Add Amazon

diff --git a/docs/_data/meta.json b/docs/_data/meta.json
index add9f18e85659335cf4627b13bb6f6e49ae7bdeb..a171d2d699e7410f1ca355354678c8ed8b4bc864 100644 (file)
--- a/docs/_data/meta.json
+++ b/docs/_data/meta.json
@@ -7,5 +7,6 @@
   "twitter": "https://twitter.com/jgthms",
   "version": "0.6.2",
   "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
+  "book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
   "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf"
 }
\ No newline at end of file

diff --git a/docs/_includes/book-content.html b/docs/_includes/book-content.html
index 1f171aa101cc49fc2a412210e9de14558fd6e294..e6cf82ebcc5bee30d6c11189bb03ae72d01ee979 100644 (file)
--- a/docs/_includes/book-content.html
+++ b/docs/_includes/book-content.html
@@ -17,7 +17,7 @@
   <div class="bd-book-tags">
     <div class="field is-grouped is-grouped-multiline">
       <div class="control">
-        <span class="tag is-white has-text-grey is-paddingless">Formats included:</span>
+        <span class="tag is-white has-text-grey is-paddingless">Formats available:</span>
       </div>
       <div class="control">
         <div class="tags has-addons">
@@ -26,21 +26,35 @@
           <strong class="tag has-text-success">Mobi</strong>
         </div>
       </div>
+      <div class="control">
+        <span class="tag is-white has-text-grey is-paddingless">or</span>
+      </div>
+      <div class="control">
+        <div class="tags has-addons">
+          <strong class="tag has-text-orange">Kindle</strong>
+        </div>
+      </div>
     </div>
   </div>
   <div class="block bd-book-buttons">
     <div class="buttons">
-      <a class="button is-danger is-large" href="{{ site.data.meta.book_url }}" target="_blank" rel="nofollow">
+      <a class="button bd-is-bleeding is-large" href="{{ site.data.meta.book_url }}" target="_blank" rel="nofollow">
         <span>
-          <strong>Buy</strong> the book
+          <em>PDF + Epub + Mobi</em>
+          <strong>Buy</strong> from <img src="/images/book/bleedingedge-type.png">
         </span>
       </a>
-      <a class="button is-light is-large" href="{{ site.data.meta.book_sample }}" target="_blank" rel="nofollow">
+      <a class="button bd-is-amazon is-large" href="{{ site.data.meta.book_amazon }}" target="_blank" rel="nofollow">
         <span>
-          <span>Get</span>
-          <strong>free sample</strong>
+          <em>Kindle version</em>
+          <strong>Buy</strong> from <img src="/images/book/amazon-logo.png">
         </span>
       </a>
     </div>
+    <div class="bd-book-sample">
+      Or <a href="{{ site.data.meta.book_sample }}" target="_blank" rel="nofollow">
+        download a free sample
+      </a>!
+    </div>
   </div>
 </div>

diff --git a/docs/_sass/book.sass b/docs/_sass/book.sass
index 23b0224fd34d7f91ab0e07ddc8f4c0eb7c096b72..3284e09dcfae2ff4ca2b497c5d26f4be5edf29fc 100644 (file)
--- a/docs/_sass/book.sass
+++ b/docs/_sass/book.sass
@@ -53,11 +53,41 @@ $book-beige: #FFEDD7
   max-width: 340px
 
 .bd-book-tags
-  margin-bottom: 3rem
+  margin-bottom: 1.5rem
   .tags
     .tag
       margin-right: 1px
 
+.bd-book-buttons
+  .button
+    height: auto
+    padding-bottom: calc(1em - 1px)
+    padding-top: calc(0.5em - 1px)
+    & > span
+      font-size: 0.875em
+      & > em
+        display: block
+        font-size: 0.5em
+        font-style: normal
+        line-height: 1em
+        margin-bottom: 0.5em
+        opacity: 0.5
+    img
+      display: block
+      max-height: 24px
+    &.bd-is-bleeding
+      background-color: $bleeding-green
+      border-color: transparent
+      &:hover
+        background-color: darken($bleeding-green, 5%)
+    &.bd-is-amazon
+      background-color: $amazon
+      border-color: transparent
+      &:hover
+        background-color: darken($amazon, 5%)
+      img
+        margin-bottom: -11px
+
 .bd-book-columns
   align-items: center
   display: flex
@@ -93,6 +123,12 @@ $book-beige: #FFEDD7
 +mobile
   .bd-book-columns
     flex-direction: column
+  .bd-book-buttons
+    .button
+      width: 100%
+      &:not(:last-child)
+        margin-right: 0
+        margin-bottom: 1rem
   .bd-book-modal
     .bd-book-content
       padding: 2rem
@@ -107,6 +143,9 @@ $book-beige: #FFEDD7
       position: absolute
       right: calc(100% + 1.25rem)
       top: 0.5rem
+  .bd-book-buttons
+    .button
+      width: calc(50% - 0.5rem)
   // Modal
   .bd-book-modal
     .modal-content

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 27af775d7ed39383ff6f71be89636187148e94da..f0a7e180c4eb9d1689c4beaea37d705d5f60beb9 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -62,6 +62,9 @@
     left: 0
     right: auto
 
+.has-text-orange
+  color: $orange !important
+
 .bd-article-image
   background-color: $primary
   display: block

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index e7453b083ea72b6832ad14dfe71235bccd2fbac8..0c02de3e0624687bec96602fe7b49ae18083e319 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -6,6 +6,9 @@ $twitter: #55acee
 $patreon: #f96854
 $patreon-blue: #052d49
 $fortyfour: #5f45bb
+$amazon: #ffd863
+$bleeding-green: #ABF47C
+$bleeding-red: #CA1F26
 
 @import "../bulma"
 @import "./_sass/highlight"

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 4c46aacf1177234620e862aa328baf3c4fb12e22..e146d9d0b06aaa9881fa4fc610684d441103c1f7 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -11717,6 +11717,10 @@ svg {
   }
 }
 
+.has-text-orange {
+  color: #ff470f !important;
+}
+
 .bd-article-image {
   background-color: #00d1b2;
   display: block;
@@ -13589,13 +13593,59 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .bd-book-tags {
-  margin-bottom: 3rem;
+  margin-bottom: 1.5rem;
 }
 
 .bd-book-tags .tags .tag {
   margin-right: 1px;
 }
 
+.bd-book-buttons .button {
+  height: auto;
+  padding-bottom: calc(1em - 1px);
+  padding-top: calc(0.5em - 1px);
+}
+
+.bd-book-buttons .button > span {
+  font-size: 0.875em;
+}
+
+.bd-book-buttons .button > span > em {
+  display: block;
+  font-size: 0.5em;
+  font-style: normal;
+  line-height: 1em;
+  margin-bottom: 0.5em;
+  opacity: 0.5;
+}
+
+.bd-book-buttons .button img {
+  display: block;
+  max-height: 24px;
+}
+
+.bd-book-buttons .button.bd-is-bleeding {
+  background-color: #ABF47C;
+  border-color: transparent;
+}
+
+.bd-book-buttons .button.bd-is-bleeding:hover {
+  background-color: #9cf264;
+}
+
+.bd-book-buttons .button.bd-is-amazon {
+  background-color: #ffd863;
+  border-color: transparent;
+}
+
+.bd-book-buttons .button.bd-is-amazon:hover {
+  background-color: #ffd24a;
+}
+
+.bd-book-buttons .button.bd-is-amazon img {
+  margin-bottom: -11px;
+}
+
 .bd-book-columns {
   -webkit-box-align: center;
       -ms-flex-align: center;
@@ -13665,6 +13715,13 @@ html.route-index .hero.is-primary a.column:hover .title strong {
         -ms-flex-direction: column;
             flex-direction: column;
   }
+  .bd-book-buttons .button {
+    width: 100%;
+  }
+  .bd-book-buttons .button:not(:last-child) {
+    margin-right: 0;
+    margin-bottom: 1rem;
+  }
   .bd-book-modal .bd-book-content {
     padding: 2rem;
   }
@@ -13683,6 +13740,9 @@ html.route-index .hero.is-primary a.column:hover .title strong {
     right: calc(100% + 1.25rem);
     top: 0.5rem;
   }
+  .bd-book-buttons .button {
+    width: calc(50% - 0.5rem);
+  }
   .bd-book-modal .modal-content {
     width: 960px;
   }

diff --git a/docs/images/book/amazon-logo.png b/docs/images/book/amazon-logo.png
new file mode 100644 (file)
index 0000000..c55f0d3
Binary files /dev/null and b/docs/images/book/amazon-logo.png differ

diff --git a/docs/images/book/bleedingedge-type.png b/docs/images/book/bleedingedge-type.png
new file mode 100644 (file)
index 0000000..91339d8
Binary files /dev/null and b/docs/images/book/bleedingedge-type.png differ