Add Algolia markup

docs/_includes/components/docs-body.html

@@ -6,7 +6,7 @@
 %}
 
 <div class="bd-docs-body">
-  <div class="bd-docs-content bd-content">
+  <div class="bd-docs-content bd-content algolia-content">
     {{ content }}
   </div>
 

docs/_includes/components/hero.html

@@ -1,7 +1,7 @@
 {% capture hero_body %}
 <div class="bd-hero-body">
   <div class="bd-hero-heading">
-    <h1 class="title">
+    <h1 class="title algolia-lvl0">
       {% if include.icon %}
         <span class="icon">
           <i class="{{ include.icon }}"></i>
@@ -9,7 +9,7 @@
       {% endif %}
       {{ include.title | markdownify }}
     </h1>
-    <div class="subtitle is-4">
+    <div class="subtitle is-4 algolia-lvl1">
       {{ include.subtitle | markdownify }}
     </div>
     {{ include.content }}

docs/_includes/elements/link.html

@@ -14,7 +14,7 @@
   {% endif %}
 
   <div class="bd-link-body">
-    <h2 class="bd-link-title">
+    <h2 class="bd-link-title algolia-lvl1">
       {% if include.new %}
         <span style="float: right;" class="ml-2 tag is-primary">
           New!

docs/_includes/global/fortyfour.html

@@ -1,9 +1,9 @@
-<a class="bd-banner is-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
-  <p class="bd-banner-label">
+<a class="bd-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
+  <p class="bd-fortyfour-label">
     My CSS ebook
   </p>
 
-  <figure class="bd-banner-image">
+  <figure class="bd-fortyfour-image">
     {%
       include elements/responsive-image.html
       path="css-book/css-in-44-minutes-book-cover"
@@ -14,11 +14,13 @@
     %}
   </figure>
 
-  <p class="bd-banner-text">
-    My 44-page ebook "<strong>CSS in 44 minutes</strong>" is out! <span class="bd-emoji-bis">😃</span>
+  <p class="bd-fortyfour-text">
+    My 44-page ebook to teach you <strong>CSS in 44 minutes</strong>
   </p>
 
-  <span class="button is-success is-rounded">
-    <strong>Buy now →</strong>
-  </span>
+  <div class="bd-fortyfour-cta">
+    <span class="button is-primary is-light is-rounded is-small">
+      <strong>Buy now →</strong>
+    </span>
+  </div>
 </a>

docs/_layouts/documentation.html

@@ -38,7 +38,7 @@ route: documentation
   </main>
 
   <aside id="docsSide" class="bd-docs-side {% if page.fullwidth %}bd-stickied{% endif %}">
-    {% include global/side-sponsor.html %}
+    {% include global/fortyfour.html %}
 
     {% if page.meta %}
       {%

docs/_sass/components/fortyfour.scss

@@ -0,0 +1,39 @@
+.bd-fortyfour {
+  display: block;
+  padding: var(--docs-side-padding);
+  padding-bottom: 0;
+  text-align: center;
+}
+
+.bd-fortyfour-label {
+  color: $text-light;
+  font-size: 0.75em;
+  margin-bottom: 0.5em;
+  opacity: 0.5;
+}
+
+.bd-fortyfour-image {
+  @extend %center;
+}
+
+.bd-fortyfour-text {
+  display: none;
+  font-size: 0.75em;
+}
+
+.bd-fortyfour-cta {
+  @extend %center;
+  margin-top: 0.5em;
+}
+
+.bd-fortyfour:hover .button,
+.bd-fortyfour .button:hover {
+  background-color: var(--primary) !important;
+  color: var(--primary-light) !important;
+}
+
+.bd-fortyfour:active .button,
+.bd-fortyfour .button:active {
+  background-color: var(--primary-dark) !important;
+  color: var(--primary-invert) !important;
+}

docs/bulma-docs.scss

@@ -218,6 +218,7 @@ $navbar-breakpoint: $tablet;
 @import './_sass/components/variables';
 @import './_sass/components/book';
 @import './_sass/components/native';
+@import './_sass/components/fortyfour';
 
 @import './_sass/pages/index';
 @import './_sass/pages/docs';

docs/css/bulma-docs.css

@@ -16790,7 +16790,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   padding: 3rem 1.5rem 6rem;
 }
 
-.bd-option-or p, .bd-snippet-preview.bd-is-mwb, .bd-book-cover, .bd-side-sponsor, .bd-backers-platform, .bd-backers-platform .bd-backers-platform-logo, .bd-backers-heading, .bd-single-carbon, .bd-single-image, .bd-snippet-mwb, .bd-partner-sponsor, .bd-columns-tool, .bd-footer-sponsor, .bd-footer-donation-action, .bd-footer-star-figure {
+.bd-option-or p, .bd-snippet-preview.bd-is-mwb, .bd-book-cover, .bd-fortyfour-image, .bd-fortyfour-cta, .bd-side-sponsor, .bd-backers-platform, .bd-backers-platform .bd-backers-platform-logo, .bd-backers-heading, .bd-single-carbon, .bd-single-image, .bd-snippet-mwb, .bd-partner-sponsor, .bd-columns-tool, .bd-footer-sponsor, .bd-footer-donation-action, .bd-footer-star-figure {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -19285,6 +19285,41 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
+.bd-fortyfour {
+  display: block;
+  padding: var(--docs-side-padding);
+  padding-bottom: 0;
+  text-align: center;
+}
+
+.bd-fortyfour-label {
+  color: #7a7a7a;
+  font-size: 0.75em;
+  margin-bottom: 0.5em;
+  opacity: 0.5;
+}
+
+.bd-fortyfour-text {
+  display: none;
+  font-size: 0.75em;
+}
+
+.bd-fortyfour-cta {
+  margin-top: 0.5em;
+}
+
+.bd-fortyfour:hover .button,
+.bd-fortyfour .button:hover {
+  background-color: var(--primary) !important;
+  color: var(--primary-light) !important;
+}
+
+.bd-fortyfour:active .button,
+.bd-fortyfour .button:active {
+  background-color: var(--primary-dark) !important;
+  color: var(--primary-invert) !important;
+}
+
 :root {
   --bd-index-vertical: 1.5rem;
   --bd-index-gap: 3rem;