diff --git a/docs/_includes/fortyfour.html b/docs/_includes/fortyfour.html new file mode 100644 index 00000000..2a54eff7 --- /dev/null +++ b/docs/_includes/fortyfour.html @@ -0,0 +1,9 @@ + +
+

+ New! My 44-page ebook "CSS in 44 minutes" is out! 😃 +

+ + Get it now → + + diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 8f3dc89c..ad43eadc 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -173,6 +173,19 @@
+

+ + Become a patron + +

{% include elements/tw-button.html label="Tweet" %}

@@ -192,4 +205,4 @@
-{% include patreon.html %} +{% include fortyfour.html %} diff --git a/docs/_includes/patreon.html b/docs/_includes/patreon.html index 5a912527..1277955c 100644 --- a/docs/_includes/patreon.html +++ b/docs/_includes/patreon.html @@ -1,8 +1,8 @@ -
-

+

+

Support Bulma on Patreon

- + Become a patron
diff --git a/docs/_sass/patreon.sass b/docs/_sass/patreon.sass index 74a0613e..ef6d5182 100644 --- a/docs/_sass/patreon.sass +++ b/docs/_sass/patreon.sass @@ -1,22 +1,45 @@ -.bd-patreon +.bd-banner align-items: center - background-color: $patreon-blue - color: $white display: flex justify-content: center - padding: 0.5rem 1rem + overflow: hidden + padding: 1rem + position: relative strong color: currentColor + .tag + margin-right: 0.5em + &.is-patreon + background-color: $patreon-blue + color: $white + &.is-fortyfour + background-color: $fortyfour + color: $white + .button + transform-origin: center + transition-duration: $speed + transition-property: transform + &:hover + .button + transform: scale(1.1) -.bd-patreon-text - font-size: 0.875rem +.bd-banner-background + +overlay + background-image: url("/images/fortyfour-background.jpg") + background-position: center center + background-size: cover + opacity: 0.5 + +.bd-banner-text line-height: 1.25 margin-right: 0.5rem + position: relative -.bd-patreon-button +.bd-banner-button display: inline-block flex-shrink: 0 height: 34px + position: relative width: 145px img max-height: 100% @@ -25,5 +48,5 @@ background-color: $patreon +from(480px) - .bd-patreon-text + .bd-banner-text margin-right: 1rem diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index 7d8f0296..d8dcd82a 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -141,6 +141,10 @@ margin-right: 0.5em margin-top: 2px +.bd-emoji-bis + font-size: 1.25em + vertical-align: middle + $notification-background-color: $background !default $notification-radius: $radius !default $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 23e4adb4..96a1f27e 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -5,6 +5,7 @@ $github: #333333 $twitter: #55acee $patreon: #f96854 $patreon-blue: #052d49 +$fortyfour: #5f45bb @import "../bulma" @import "./_sass/highlight" diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index adbfc9bf..2ca8d950 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -11850,6 +11850,11 @@ svg { margin-top: 2px; } +.bd-emoji-bis { + font-size: 1.25em; + vertical-align: middle; +} + .bd-notification { background-color: whitesmoke; border-radius: 3px; @@ -13297,40 +13302,83 @@ html.route-index .hero.is-primary a.column:hover .title strong { white-space: nowrap; } -.bd-patreon { +.bd-banner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - background-color: #052d49; - color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; - padding: 0.5rem 1rem; + overflow: hidden; + padding: 1rem; + position: relative; } -.bd-patreon strong { +.bd-banner strong { color: currentColor; } -.bd-patreon-text { - font-size: 0.875rem; - line-height: 1.25; - margin-right: 0.5rem; +.bd-banner .tag { + margin-right: 0.5em; } -.bd-patreon-button { +.bd-banner.is-patreon { + background-color: #052d49; + color: white; +} + +.bd-banner.is-fortyfour { + background-color: #5f45bb; + color: white; +} + +.bd-banner .button { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transition-duration: 86ms; + transition-duration: 86ms; + -webkit-transition-property: -webkit-transform; + transition-property: -webkit-transform; + transition-property: transform; + transition-property: transform, -webkit-transform; +} + +.bd-banner:hover .button { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +.bd-banner-background { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + background-image: url("/images/fortyfour-background.jpg"); + background-position: center center; + background-size: cover; + opacity: 0.5; +} + +.bd-banner-text { + line-height: 1.25; + margin-right: 0.5rem; + position: relative; +} + +.bd-banner-button { display: inline-block; -ms-flex-negative: 0; flex-shrink: 0; height: 34px; + position: relative; width: 145px; } -.bd-patreon-button img { +.bd-banner-button img { max-height: 100%; } @@ -13339,7 +13387,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { } @media screen and (min-width: 480px) { - .bd-patreon-text { + .bd-banner-text { margin-right: 1rem; } } diff --git a/docs/images/become_a_patron_button.png b/docs/images/become_a_patron_button.png new file mode 100644 index 00000000..291b7bcf Binary files /dev/null and b/docs/images/become_a_patron_button.png differ diff --git a/docs/images/become_a_patron_button@2x.png b/docs/images/become_a_patron_button@2x.png new file mode 100644 index 00000000..5443ec96 Binary files /dev/null and b/docs/images/become_a_patron_button@2x.png differ diff --git a/docs/images/become_a_patron_button@3x.png b/docs/images/become_a_patron_button@3x.png new file mode 100644 index 00000000..81cb33f1 Binary files /dev/null and b/docs/images/become_a_patron_button@3x.png differ diff --git a/docs/images/fortyfour-background.jpg b/docs/images/fortyfour-background.jpg new file mode 100644 index 00000000..538a70cb Binary files /dev/null and b/docs/images/fortyfour-background.jpg differ