Add fortyfour

docs/_includes/components/categories.html

@@ -29,3 +29,5 @@
     </div>
   {% endfor %}
 </nav>
+
+{% include global/fortyfour.html %}

docs/_includes/global/fortyfour.html

@@ -1,8 +1,23 @@
 <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 class="bd-banner-title">
+    New ebook!
   </p>
+
+  <p class="bd-banner-text">
+    My 44-page ebook "<strong>CSS in 44 minutes</strong>" is out! <span class="bd-emoji-bis">😃</span>
+  </p>
+
+  <figure class="bd-banner-image">
+    {%
+      include elements/responsive-image.html
+      path="css-book/css-in-44-minutes-book-cover"
+      extension="png"
+      alt="CSS in 44 minutes book cover"
+      width="126"
+      height="176"
+    %}
+  </figure>
+
   <span class="button is-success is-rounded">
     <strong>Get it now →</strong>
   </span>

docs/_sass/patreon.sass

@@ -1,25 +1,32 @@
 .bd-banner
-  align-items: center
-  display: flex
-  justify-content: center
+  border-radius: $radius-large
+  display: block
   overflow: hidden
-  padding: 1rem
+  margin-top: 1.5rem
+  padding: 1.5rem
   position: relative
+  text-align: center
+  transition-duration: $speed
+  transition-property: border-color, color
   strong
     color: currentColor
   .tag
-    margin-right: 0.5em
+    margin-bottom: 0.25em
   &.is-patreon
     background-color: $patreon-blue
     color: $white
   &.is-fortyfour
-    background-color: $fortyfour
-    color: $white
+    background-color: $white
+    border: 2px solid $background
   .button
     transform-origin: center
     transition-duration: $speed
     transition-property: transform
   &:hover
+    border-color: $link
+    color: $link
+    .bd-banner-title
+      color: currentColor
     .button
       transform: scale(1.1)
 
@@ -30,11 +37,27 @@
   background-size: cover
   opacity: 0.5
 
-.bd-banner-text
+.bd-banner-title
+  color: $text-strong
+  font-size: 1.25em
+  font-weight: $weight-semibold
   line-height: 1.25
-  margin-right: 0.5rem
+  margin-bottom: 0.25em
+
+.bd-banner-text
+  font-size: 0.875em
+  line-height: 1.25
+  padding: 0 0.5em
   position: relative
 
+.bd-banner-image
+  height: 176px
+  margin-bottom: 1rem
+  margin-top: 1rem
+  img
+    display: inline-block
+    vertical-align: top
+
 .bd-banner-button
   display: inline-block
   flex-shrink: 0
@@ -46,7 +69,3 @@
 
 .hero.bd-is-patreon
   background-color: $patreon
-
-+from(480px)
-  .bd-banner-text
-    margin-right: 1rem

docs/css/bulma-docs.css

@@ -12834,12 +12834,15 @@ svg {
 }
 
 .bd-banner {
-  align-items: center;
-  display: flex;
-  justify-content: center;
+  border-radius: 6px;
+  display: block;
   overflow: hidden;
-  padding: 1rem;
+  margin-top: 1.5rem;
+  padding: 1.5rem;
   position: relative;
+  text-align: center;
+  transition-duration: 86ms;
+  transition-property: border-color, color;
 }
 
 .bd-banner strong {
@@ -12847,7 +12850,7 @@ svg {
 }
 
 .bd-banner .tag {
-  margin-right: 0.5em;
+  margin-bottom: 0.25em;
 }
 
 .bd-banner.is-patreon {
@@ -12856,8 +12859,8 @@ svg {
 }
 
 .bd-banner.is-fortyfour {
-  background-color: #5f45bb;
-  color: white;
+  background-color: white;
+  border: 2px solid whitesmoke;
 }
 
 .bd-banner .button {
@@ -12869,6 +12872,15 @@ svg {
   transition-property: transform, -webkit-transform;
 }
 
+.bd-banner:hover {
+  border-color: #3273dc;
+  color: #3273dc;
+}
+
+.bd-banner:hover .bd-banner-title {
+  color: currentColor;
+}
+
 .bd-banner:hover .button {
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
@@ -12881,12 +12893,32 @@ svg {
   opacity: 0.5;
 }
 
-.bd-banner-text {
+.bd-banner-title {
+  color: #363636;
+  font-size: 1.25em;
+  font-weight: 600;
   line-height: 1.25;
-  margin-right: 0.5rem;
+  margin-bottom: 0.25em;
+}
+
+.bd-banner-text {
+  font-size: 0.875em;
+  line-height: 1.25;
+  padding: 0 0.5em;
   position: relative;
 }
 
+.bd-banner-image {
+  height: 176px;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+
+.bd-banner-image img {
+  display: inline-block;
+  vertical-align: top;
+}
+
 .bd-banner-button {
   display: inline-block;
   flex-shrink: 0;
@@ -12903,12 +12935,6 @@ svg {
   background-color: #f96854;
 }
 
-@media screen and (min-width: 480px) {
-  .bd-banner-text {
-    margin-right: 1rem;
-  }
-}
-
 .bd-sponsors {
   align-items: center;
   display: flex;