diff --git a/docs/_includes/elements/patreon.html b/docs/_includes/elements/patreon.html
index 06731557..d58d2683 100644
--- a/docs/_includes/elements/patreon.html
+++ b/docs/_includes/elements/patreon.html
@@ -1,3 +1,10 @@
- 
+ {%
+ include elements/responsive-image.html
+ path="become-a-patron"
+ extension="png"
+ alt="Become a Patron"
+ width="148"
+ height="36"
+ %}
diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass
index 67abb258..f90ea789 100644
--- a/docs/_sass/global.sass
+++ b/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
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 06ec4377..8cb186f4 100644
--- a/docs/css/bulma-docs.css
+++ b/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 {
diff --git a/docs/images/become-a-patron.png b/docs/images/become-a-patron.png
index dcd6cb32..50f6a6b9 100644
Binary files a/docs/images/become-a-patron.png and b/docs/images/become-a-patron.png differ
diff --git a/docs/images/become-a-patron@2x.png b/docs/images/become-a-patron@2x.png
new file mode 100644
index 00000000..fb6c0f3f
Binary files /dev/null and b/docs/images/become-a-patron@2x.png differ
diff --git a/docs/images/become-a-patron@3x.png b/docs/images/become-a-patron@3x.png
new file mode 100644
index 00000000..9aad000a
Binary files /dev/null and b/docs/images/become-a-patron@3x.png differ
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index b7aa73dc..1160cd46 100644
--- a/sass/components/navbar.sass
+++ b/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