Add fortyfour

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>

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

docs/_includes/patreon.html

@@ -1,8 +1,8 @@
-<div class="bd-patreon">
+<div class="bd-banner is-patreon">
-  <p class="bd-patreon-text">
+  <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>

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
+.bd-banner-background
-  font-size: 0.875rem
+  +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

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

docs/bulma-docs.sass

@@ -5,6 +5,7 @@ $github: #333333
 $twitter: #55acee
 $patreon: #f96854
 $patreon-blue: #052d49
+$fortyfour: #5f45bb
 
 @import "../bulma"
 @import "./_sass/highlight"

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 {
+.bd-banner .tag {
-  font-size: 0.875rem;
+  margin-right: 0.5em;
-  line-height: 1.25;
-  margin-right: 0.5rem;
 }
 
-.bd-patreon-button {
+.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-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;
   }
 }