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>