diff --git a/docs/_data/meta.json b/docs/_data/meta.json index add9f18e..a171d2d6 100644 --- 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 1f171aa1..e6cf82eb 100644 --- a/docs/_includes/book-content.html +++ b/docs/_includes/book-content.html @@ -17,7 +17,7 @@
- Formats included: + Formats available:
@@ -26,21 +26,35 @@ Mobi
+
+ or +
+
+
+ Kindle +
+
- + - Buy the book + PDF + Epub + Mobi + Buy from - + - Get - free sample + Kindle version + Buy from
+
+ Or + download a free sample + ! +
diff --git a/docs/_sass/book.sass b/docs/_sass/book.sass index 23b0224f..3284e09d 100644 --- 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 27af775d..f0a7e180 100644 --- 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 e7453b08..0c02de3e 100644 --- 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 4c46aacf..e146d9d0 100644 --- 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 index 00000000..c55f0d38 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 index 00000000..91339d87 Binary files /dev/null and b/docs/images/book/bleedingedge-type.png differ