Fix sidebar

docs/_includes/global/fortyfour.html

@@ -1,12 +1,8 @@
 <a class="bd-banner is-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
-  <p class="bd-banner-title">
+  <p class="bd-banner-label">
     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
@@ -18,7 +14,11 @@
     %}
   </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>
+
   <span class="button is-success is-rounded">
-    <strong>Get it now →</strong>
+    <strong>Buy now →</strong>
   </span>
 </a>

docs/_includes/global/navbar.html

@@ -30,7 +30,12 @@
         <span class="icon has-text-primary">
           <i class="fas fa-book"></i>
         </span>
-        <span>Documentation</span>
+        <span class="is-hidden-touch is-hidden-widescreen">
+          Docs
+        </span>
+        <span class="is-hidden-desktop-only">
+          Documentation
+        </span>
       </a>
 
       {% for item in site.data.global.navbar_items %}
@@ -38,6 +43,7 @@
           <span class="icon {{ item.color }}">
             <i class="{{ item.fa_type }} {{ item.fa_icon }}"></i>
           </span>
+
           <span>{{ item.title }}</span>
         </a>
       {% endfor %}
@@ -47,6 +53,7 @@
         <a class="navbar-link" href="{{ site.url }}{{ link.path }}">
           {{ link.name }}
         </a>
+
         <div id="moreDropdown" class="navbar-dropdown">
           {% for link_id in site.data.links.more %}
             {% assign link = site.data.links.by_id[link_id] %}
@@ -69,16 +76,18 @@
     </div>
 
     <div class="navbar-end">
-      <a class="navbar-item is-hidden-mobile" href="{{ site.data.meta.github }}" target="_blank">
+      <a class="navbar-item is-hidden-touch is-hidden-desktop-only" href="{{ site.data.meta.github }}" target="_blank">
         <span class="icon" style="color: #333;">
           <i class="fab fa-lg fa-github-alt"></i>
         </span>
       </a>
-      <a class="navbar-item is-hidden-mobile" href="{{ site.data.meta.twitter }}" target="_blank">
+
+      <a class="navbar-item is-hidden-touch is-hidden-desktop-only" href="{{ site.data.meta.twitter }}" target="_blank">
         <span class="icon" style="color: #55acee;">
           <i class="fab fa-lg fa-twitter"></i>
         </span>
       </a>
+
       <div class="navbar-item">
         <div class="field is-grouped is-grouped-multiline">
           <p class="control">