Fix fixed spaced navbar

docs/_includes/elements/patreon.html

@@ -1,3 +1,10 @@
 <a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
-  <img src="{{ site.url }}/images/become-a-patron.png" alt="Become a patron" width="148" height="36">
+  {%
+    include elements/responsive-image.html
+    path="become-a-patron"
+    extension="png"
+    alt="Become a Patron"
+    width="148"
+    height="36"
+  %}
 </a>

docs/_sass/global.sass

@@ -3,8 +3,19 @@ svg
   max-width: 100%
 
 .bd-patreon-button
+  display: inline-block
+  position: relative
+  vertical-align: top
   img
     border-radius: $radius
+    display: block
+  &:hover
+    &::after
+      +overlay
+      background-color: rgba(#000, 0.05)
+      border-radius: $radius
+      content: ""
+      display: block
 
 $carbon-spacing: 1rem
 $carbon-shadow-size: 0.75rem

docs/css/bulma-docs.css

@@ -133,7 +133,7 @@
   width: 1em;
 }
 
-.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
+.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .bd-patreon-button:hover::after, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
 .bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
   bottom: 0;
   left: 0;
@@ -6706,10 +6706,12 @@ a.navbar-item:hover, a.navbar-item.is-active,
     max-height: calc(100vh - 3.25rem);
     overflow: auto;
   }
-  html.has-navbar-fixed-top-touch {
+  html.has-navbar-fixed-top-touch,
+  body.has-navbar-fixed-top-touch {
     padding-top: 3.25rem;
   }
-  html.has-navbar-fixed-bottom-touch {
+  html.has-navbar-fixed-bottom-touch,
+  body.has-navbar-fixed-bottom-touch {
     padding-bottom: 3.25rem;
   }
 }
@@ -6868,12 +6870,22 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar.is-fixed-top-desktop {
     top: 0;
   }
-  html.has-navbar-fixed-top-desktop {
+  html.has-navbar-fixed-top-desktop,
+  body.has-navbar-fixed-top-desktop {
     padding-top: 3.25rem;
   }
-  html.has-navbar-fixed-bottom-desktop {
+  html.has-navbar-fixed-bottom-desktop,
+  body.has-navbar-fixed-bottom-desktop {
     padding-bottom: 3.25rem;
   }
+  html.has-spaced-navbar-fixed-top,
+  body.has-spaced-navbar-fixed-top {
+    padding-top: 5.25rem;
+  }
+  html.has-spaced-navbar-fixed-bottom,
+  body.has-spaced-navbar-fixed-bottom {
+    padding-bottom: 5.25rem;
+  }
   a.navbar-item.is-active,
   .navbar-link.is-active {
     color: #0a0a0a;
@@ -10155,8 +10167,22 @@ svg {
   max-width: 100%;
 }
 
+.bd-patreon-button {
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+}
+
 .bd-patreon-button img {
   border-radius: 4px;
+  display: block;
+}
+
+.bd-patreon-button:hover::after {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  content: "";
+  display: block;
 }
 
 #carboncontainer {

sass/components/navbar.sass

@@ -2,7 +2,8 @@ $navbar-background-color: $white !default
 $navbar-box-shadow-size: 0 2px 0 0 !default
 $navbar-box-shadow-color: $background !default
 $navbar-height: 3.25rem !default
-$navbar-padding: 1rem 2rem !default
+$navbar-padding-vertical: 1rem !default
+$navbar-padding-horizontal: 2rem !default
 $navbar-z: 30 !default
 $navbar-fixed-z: 30 !default
 
@@ -115,9 +116,6 @@ html,
 body
   &.has-navbar-fixed-top
     padding-top: $navbar-height
-
-html,
-body
   &.has-navbar-fixed-bottom
     padding-bottom: $navbar-height
 
@@ -252,10 +250,12 @@ a.navbar-item,
         +overflow-touch
         max-height: calc(100vh - #{$navbar-height})
         overflow: auto
-  html.has-navbar-fixed-top-touch
-    padding-top: $navbar-height
-  html.has-navbar-fixed-bottom-touch
-    padding-bottom: $navbar-height
+  html,
+  body
+    &.has-navbar-fixed-top-touch
+      padding-top: $navbar-height
+    &.has-navbar-fixed-bottom-touch
+      padding-bottom: $navbar-height
 
 +desktop
   .navbar,
@@ -267,7 +267,7 @@ a.navbar-item,
   .navbar
     min-height: $navbar-height
     &.is-spaced
-      padding: $navbar-padding
+      padding: $navbar-padding-vertical $navbar-padding-horizontal
       .navbar-start,
       .navbar-end
         align-items: center
@@ -389,10 +389,16 @@ a.navbar-item,
         box-shadow: 0 -2px 3px rgba($black, 0.1)
     &.is-fixed-top-desktop
       top: 0
-  html.has-navbar-fixed-top-desktop
-    padding-top: $navbar-height
-  html.has-navbar-fixed-bottom-desktop
-    padding-bottom: $navbar-height
+  html,
+  body
+    &.has-navbar-fixed-top-desktop
+      padding-top: $navbar-height
+    &.has-navbar-fixed-bottom-desktop
+      padding-bottom: $navbar-height
+    &.has-spaced-navbar-fixed-top
+      padding-top: $navbar-height + ($navbar-padding-vertical * 2)
+    &.has-spaced-navbar-fixed-bottom
+      padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
   // Hover/Active states
   a.navbar-item,
   .navbar-link