Fix sidebar

Author: jgthms

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,14 +30,20 @@
         <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 %}
         <a class="navbar-item bd-navbar-item-{{ item.id }} {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
           <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">

docs/_sass/main.sass

@@ -167,11 +167,11 @@
   .bd-header-carbon
     margin-top: 1.5rem
 
-+mobile
++touch
   .bd-side-background
     display: none
 
-+tablet
++desktop
   .bd-duo
     display: flex
   .bd-lead

docs/_sass/patreon.sass

@@ -1,7 +1,9 @@
 .bd-side-sponsors
-  margin-top: 1.5rem
+  margin-top: 3rem
+  text-align: center
 
-.bd-side-sponsor-label
+.bd-side-sponsor-label,
+.bd-banner-label
   color: $grey-light
   font-size: 0.75rem
   margin-bottom: 0.75rem
@@ -17,9 +19,8 @@
 .bd-banner
   border-radius: $radius-large
   display: block
-  overflow: hidden
-  margin-top: 1.5rem
-  padding: 1.5rem
+  margin-top: 3rem
+  padding-bottom: 1.5rem
   position: relative
   text-align: center
   transition-duration: $speed
@@ -31,9 +32,9 @@
   &.is-patreon
     background-color: $patreon-blue
     color: $white
-  &.is-fortyfour
-    background-color: $white
-    border: 2px solid $background
+  // &.is-fortyfour
+  //   background-color: $white
+  //   border: 2px solid $background
   .button
     transform-origin: center
     transition-duration: $speed
@@ -44,7 +45,7 @@
     .bd-banner-title
       color: currentColor
     .button
-      transform: scale(1.1)
+      transform: scale(1.05)
 
 .bd-banner-background
   +overlay
@@ -61,9 +62,10 @@
   margin-bottom: 0.25em
 
 .bd-banner-text
+  display: none
   font-size: 0.875em
   line-height: 1.25
-  padding: 0 0.5em
+  margin-bottom: 0.5rem
   position: relative
 
 .bd-banner-image
@@ -72,6 +74,8 @@
   margin-top: 1rem
   img
     display: inline-block
+    // left: -8px
+    // position: relative
     vertical-align: top
 
 .bd-banner-button