Add Amazon

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"
 }

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>

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

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

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"

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;
   }