Add fortyfour

diff --git a/docs/_includes/fortyfour.html b/docs/_includes/fortyfour.html
new file mode 100644 (file)
index 0000000..2a54eff
--- /dev/null
+++ b/docs/_includes/fortyfour.html
@@ -0,0 +1,9 @@
+<a class="bd-banner is-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
+  <div class="bd-banner-background"></div>
+  <p class="bd-banner-text">
+    <strong class="tag is-danger">New!</strong> My 44-page ebook "<strong>CSS in 44 minutes</strong>" is out! <span class="bd-emoji-bis">😃</span>
+  </p>
+  <span class="button is-success is-rounded">
+    <strong>Get it now →</strong>
+  </span>
+</a>

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index 8f3dc89cdede5080d32cda31d519bafd915b8cf2..ad43eadcb4cdd63f6053b4c11fe71139e92bf263 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -173,6 +173,19 @@
       </a>
       <div class="navbar-item">
         <div class="field is-grouped">
+          <p class="control">
+            <a href="https://www.patreon.com/jgthms" target="_blank" style="display: block;">
+              <img
+                style="display: block; max-height: 36px;"
+                src="/images/become_a_patron_button.png"
+                width="153"
+                height="36"
+                srcset="/images/become_a_patron_button@3x.png 3x,
+                        /images/become_a_patron_button@2x.png 2x,
+                        /images/become_a_patron_button.png 1x"
+                alt="Become a patron">
+            </a>
+          </p>
           <p class="control">
             {% include elements/tw-button.html label="Tweet" %}
           </p>
@@ -192,4 +205,4 @@
   </div>
 </nav>
 
-{% include patreon.html %}
+{% include fortyfour.html %}

diff --git a/docs/_includes/patreon.html b/docs/_includes/patreon.html
index 5a91252792063ec2d17c77dd7f24945d3b0c187e..1277955ca533618d0f64b2e6faf3575a9df6783d 100644 (file)
--- a/docs/_includes/patreon.html
+++ b/docs/_includes/patreon.html
@@ -1,8 +1,8 @@
-<div class="bd-patreon">
-  <p class="bd-patreon-text">
+<div class="bd-banner is-patreon">
+  <p class="bd-banner-text">
     <strong>Support Bulma</strong> on Patreon
   </p>
-  <a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
+  <a class="bd-banner-button" href="https://www.patreon.com/jgthms" target="_blank">
     <img src="/images/patreon.png" alt="Become a patron">
   </a>
 </div>

diff --git a/docs/_sass/patreon.sass b/docs/_sass/patreon.sass
index 74a0613e87fb95e7b24b4f2b635e631db49696cc..ef6d51826708db816af667d41632ce91824c1ae6 100644 (file)
--- a/docs/_sass/patreon.sass
+++ b/docs/_sass/patreon.sass
@@ -1,22 +1,45 @@
-.bd-patreon
+.bd-banner
   align-items: center
-  background-color: $patreon-blue
-  color: $white
   display: flex
   justify-content: center
-  padding: 0.5rem 1rem
+  overflow: hidden
+  padding: 1rem
+  position: relative
   strong
     color: currentColor
+  .tag
+    margin-right: 0.5em
+  &.is-patreon
+    background-color: $patreon-blue
+    color: $white
+  &.is-fortyfour
+    background-color: $fortyfour
+    color: $white
+  .button
+    transform-origin: center
+    transition-duration: $speed
+    transition-property: transform
+  &:hover
+    .button
+      transform: scale(1.1)
 
-.bd-patreon-text
-  font-size: 0.875rem
+.bd-banner-background
+  +overlay
+  background-image: url("/images/fortyfour-background.jpg")
+  background-position: center center
+  background-size: cover
+  opacity: 0.5
+
+.bd-banner-text
   line-height: 1.25
   margin-right: 0.5rem
+  position: relative
 
-.bd-patreon-button
+.bd-banner-button
   display: inline-block
   flex-shrink: 0
   height: 34px
+  position: relative
   width: 145px
   img
     max-height: 100%
@@ -25,5 +48,5 @@
   background-color: $patreon
 
 +from(480px)
-  .bd-patreon-text
+  .bd-banner-text
     margin-right: 1rem

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 7d8f0296194c3f7599441df2b3f6c3d4d2412abb..d8dcd82a3dc2a05a18f05b2fed64ec01b9e2e00c 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -141,6 +141,10 @@
   margin-right: 0.5em
   margin-top: 2px
 
+.bd-emoji-bis
+  font-size: 1.25em
+  vertical-align: middle
+
 $notification-background-color: $background !default
 $notification-radius: $radius !default
 $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 23e4adb416687c458176cb2d4997addeff7720b1..96a1f27ebfcbbaa3411020888c8cc69d2be23da0 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -5,6 +5,7 @@ $github: #333333
 $twitter: #55acee
 $patreon: #f96854
 $patreon-blue: #052d49
+$fortyfour: #5f45bb
 
 @import "../bulma"
 @import "./_sass/highlight"

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index adbfc9bf4109f2f7548578184bf10171383af07a..2ca8d950c869e3b82b95f94adcea926807430a75 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -11850,6 +11850,11 @@ svg {
   margin-top: 2px;
 }
 
+.bd-emoji-bis {
+  font-size: 1.25em;
+  vertical-align: middle;
+}
+
 .bd-notification {
   background-color: whitesmoke;
   border-radius: 3px;
@@ -13297,40 +13302,83 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   white-space: nowrap;
 }
 
-.bd-patreon {
+.bd-banner {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  background-color: #052d49;
-  color: white;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  padding: 0.5rem 1rem;
+  overflow: hidden;
+  padding: 1rem;
+  position: relative;
 }
 
-.bd-patreon strong {
+.bd-banner strong {
   color: currentColor;
 }
 
-.bd-patreon-text {
-  font-size: 0.875rem;
+.bd-banner .tag {
+  margin-right: 0.5em;
+}
+
+.bd-banner.is-patreon {
+  background-color: #052d49;
+  color: white;
+}
+
+.bd-banner.is-fortyfour {
+  background-color: #5f45bb;
+  color: white;
+}
+
+.bd-banner .button {
+  -webkit-transform-origin: center;
+          transform-origin: center;
+  -webkit-transition-duration: 86ms;
+          transition-duration: 86ms;
+  -webkit-transition-property: -webkit-transform;
+  transition-property: -webkit-transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+}
+
+.bd-banner:hover .button {
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+}
+
+.bd-banner-background {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-image: url("/images/fortyfour-background.jpg");
+  background-position: center center;
+  background-size: cover;
+  opacity: 0.5;
+}
+
+.bd-banner-text {
   line-height: 1.25;
   margin-right: 0.5rem;
+  position: relative;
 }
 
-.bd-patreon-button {
+.bd-banner-button {
   display: inline-block;
   -ms-flex-negative: 0;
       flex-shrink: 0;
   height: 34px;
+  position: relative;
   width: 145px;
 }
 
-.bd-patreon-button img {
+.bd-banner-button img {
   max-height: 100%;
 }
 
@@ -13339,7 +13387,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 @media screen and (min-width: 480px) {
-  .bd-patreon-text {
+  .bd-banner-text {
     margin-right: 1rem;
   }
 }

diff --git a/docs/images/become_a_patron_button.png b/docs/images/become_a_patron_button.png
new file mode 100644 (file)
index 0000000..291b7bc
Binary files /dev/null and b/docs/images/become_a_patron_button.png differ

diff --git a/docs/images/become_a_patron_button@2x.png b/docs/images/become_a_patron_button@2x.png
new file mode 100644 (file)
index 0000000..5443ec9
Binary files /dev/null and b/docs/images/become_a_patron_button@2x.png differ

diff --git a/docs/images/become_a_patron_button@3x.png b/docs/images/become_a_patron_button@3x.png
new file mode 100644 (file)
index 0000000..81cb33f
Binary files /dev/null and b/docs/images/become_a_patron_button@3x.png differ

diff --git a/docs/images/fortyfour-background.jpg b/docs/images/fortyfour-background.jpg
new file mode 100644 (file)
index 0000000..538a70c
Binary files /dev/null and b/docs/images/fortyfour-background.jpg differ