From: Jeremy Thomas Date: Tue, 10 Apr 2018 16:33:43 +0000 (+0100) Subject: Footer stars X-Git-Tag: 0.7.0~1^2~33 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=91776c091f787cd357ac84b4784dca1f922ea70a;p=thirdparty%2Fbulma.git Footer stars --- diff --git a/docs/_data/links.json b/docs/_data/links.json index c22fd67dd..ef01cc05e 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -330,6 +330,10 @@ "love": { "name": "Love", "path": "/love" + }, + "bootstrap": { + "name": "Alternative to Bootstrap", + "path": "/alternative-to-bootstrap" } }, "categories": { diff --git a/docs/_includes/elements/patreon.html b/docs/_includes/elements/patreon.html index 1277955ca..067315573 100644 --- a/docs/_includes/elements/patreon.html +++ b/docs/_includes/elements/patreon.html @@ -1,8 +1,3 @@ -
-

- Support Bulma on Patreon -

- - Become a patron - -
+ + Become a patron + diff --git a/docs/_includes/footer/about.html b/docs/_includes/footer/about.html new file mode 100644 index 000000000..97d39d8ee --- /dev/null +++ b/docs/_includes/footer/about.html @@ -0,0 +1,13 @@ +

+ Bulma by Jeremy Thomas. +

+ +
+ +
+ +
+ Source code licensed MIT. +
+ Website content licensed CC BY-NC-SA 4.0 +
diff --git a/docs/_includes/footer/boxes.html b/docs/_includes/footer/boxes.html new file mode 100644 index 000000000..624bb11de --- /dev/null +++ b/docs/_includes/footer/boxes.html @@ -0,0 +1,48 @@ +{% assign boostrap_link = site.data.links.by_id['boostrap'] %} +{% assign expo_link = site.data.links.by_id['expo'] %} +{% assign love_link = site.data.links.by_id['love'] %} + +
+ +
+

+ Coming from Bootstrap +

+

+ An alternative to Bootstrap +

+
+ +
+ +
+ + + +
+

+ + + + Expo +

+

+ See what you can build with Bulma +

+
+ + + +
+

+ + + + Love +

+

+ Fans of Bulma +

+
+ +
diff --git a/docs/_includes/footer/contribute.html b/docs/_includes/footer/contribute.html new file mode 100644 index 000000000..50454906e --- /dev/null +++ b/docs/_includes/footer/contribute.html @@ -0,0 +1,9 @@ +

+ Contribute on GitHub +

+ +
+ + + +
diff --git a/docs/_includes/footer/share.html b/docs/_includes/footer/share.html new file mode 100644 index 000000000..71174f01c --- /dev/null +++ b/docs/_includes/footer/share.html @@ -0,0 +1,9 @@ +

+ Share on social media +

+ +
+ + +
+
diff --git a/docs/_includes/footer/support.html b/docs/_includes/footer/support.html new file mode 100644 index 000000000..936995cd4 --- /dev/null +++ b/docs/_includes/footer/support.html @@ -0,0 +1,30 @@ +
+

+ Support Bulma +

+ +
+
+

+ One-time donation +

+
+
+ + + + +
+
+
+ +
+

+ Monthly donation +

+
+ {% include elements/patreon.html %} +
+
+
+
diff --git a/docs/_includes/global/footer.html b/docs/_includes/global/footer.html index 05be9bfd2..fe9a63ebf 100644 --- a/docs/_includes/global/footer.html +++ b/docs/_includes/global/footer.html @@ -4,81 +4,16 @@ {% include global/sponsors.html %} +
+ {% include global/newsletter.html %} diff --git a/docs/_includes/global/navbar.html b/docs/_includes/global/navbar.html index a9a8a9596..d5eed5830 100644 --- a/docs/_includes/global/navbar.html +++ b/docs/_includes/global/navbar.html @@ -83,17 +83,7 @@

- - Become a patron - + {% include elements/patreon.html %}

diff --git a/docs/_includes/global/newsletter.html b/docs/_includes/global/newsletter.html index fcabda793..1eb55756a 100644 --- a/docs/_includes/global/newsletter.html +++ b/docs/_includes/global/newsletter.html @@ -1,32 +1,32 @@ -

-
-
-
-
-

Bulma Newsletter

-

Get notified when v1 is ready!

-
+
+
+
+
+

Newsletter

+

Features, releases, showcase… stay in the loop!

+
-
-
-
-
- - - - -
-
- - - +
+ +
+
+ + + + +
+
+ + +
- -
+
+
-
\ No newline at end of file +
diff --git a/docs/_includes/global/sponsors.html b/docs/_includes/global/sponsors.html index ff441e967..36fe8537c 100644 --- a/docs/_includes/global/sponsors.html +++ b/docs/_includes/global/sponsors.html @@ -1,23 +1,21 @@ -
-
-
-
-
-

Bulma Sponsors

-
-
-
- - {% - include elements/responsive-image.html - path="sponsors/chainaxe" - extension="png" - alt="chainaxe logo" - width="99" - height="70" - %} - -
+
+
+
+
+

Sponsors

+
+
+
+ + {% + include elements/responsive-image.html + path="sponsors/chainaxe" + extension="png" + alt="chainaxe logo" + width="99" + height="70" + %} +
diff --git a/docs/_sass/footer.sass b/docs/_sass/footer.sass index cd98dd89a..cd9359646 100644 --- a/docs/_sass/footer.sass +++ b/docs/_sass/footer.sass @@ -1,81 +1,120 @@ -#about - .twitter-container - display: block - height: 30px - line-height: 30px - margin-top: 0.5rem - small - display: block - margin-top: 5px - -#mc_embed_signup - .field - margin-bottom: 0 - .notification - margin-top: 0.75rem - -#share - form - height: 30px - margin-top: 10px +.bd-footer-title + color: $text-strong + font-size: 1.25rem + line-height: 1.25 + margin-bottom: 1rem + transition-duration: $speed + transition-property: color + strong + font-weight: $weight-semibold + +.bd-footer-subtitle + color: $grey-light + margin-top: -1rem + transition-duration: $speed + transition-property: color -#social - align-items: center +.bd-footer-iframe display: flex flex-wrap: wrap - justify-content: flex-start - max-width: 400px - > iframe, - > a, - > form, - > div - display: inline-block - font-size: 11px - height: 30px - line-height: 30px - margin-top: 0.5rem - .github-btn - width: 160px - .twitter-share-button - margin-right: 10px - min-width: 76px - .paypal-form - min-width: 148px + min-height: 30px .fb-like - align-items: center - display: flex - width: 130px - .bd-patreon-button + margin-left: 10px + +.bd-footer-tsp + color: $grey-light + margin-top: 1.5rem + +%bd-footer-box + background-color: $white + border-radius: $radius-large + box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.1) + display: block + text-align: center + .bd-footer-title + font-size: 1.5rem + margin-bottom: 1rem + +// Support + +.bd-footer-support + @extend %bd-footer-box + margin-bottom: 3rem + margin-top: 2.25rem + padding: 2.5rem + +.bd-footer-donations + justify-content: center + +.bd-footer-donation + flex: none + width: 240px + +.bd-footer-donation-title + color: $grey-light + margin-bottom: 0.5rem + strong + color: currentColor + +.bd-footer-donation-action + @extend %center + min-height: 36px + .paypal-form height: 30px - margin-right: 0.5rem - width: 128px + img + display: block -#newsletter - .input - border-color: $white - box-shadow: none +// Stars -#sister - ul - display: flex - flex-wrap: wrap - li +$star-figure-height: 156px + +.bd-footer-stars + +tablet + align-items: stretch display: flex - height: 30px - margin: 5px 1rem 0 0 - img - height: 30px + justify-content: space-between -#tsp - margin-top: 3rem - text-align: center - small - display: block - -#alternative - font-size: 0.875rem - margin-top: 0.5rem - a - color: $text-light - &:hover - text-decoration: underline +.bd-footer-star + @extend %bd-footer-box + transition-duration: $speed + transition-property: box-shadow, transform + will-change: box-shadow, transform + +mobile + &:not(:last-child) + margin-bottom: 1.5rem + +tablet + width: calc(33.3333% - 2rem) + &:hover + box-shadow: 0 3rem 3rem -1.25rem rgba($black, 0.1) + transform: translateY(-0.5rem) + .bd-footer-title, + .bd-footer-subtitle + color: $link + &.bd-is-expo, + &.bd-is-love + padding-bottom: $star-figure-height + .bd-footer-title + align-items: center + display: flex + justify-content: center + .icon + margin-right: 0.25em + &.bd-is-expo + background-image: url("/images/footer/expo-examples.png") + background-repeat: repeat-x + background-position: bottom center + background-size: 352px $star-figure-height + &.bd-is-love + background-image: url("/images/footer/love.png") + background-repeat: no-repeat + background-position: bottom center + background-size: 440px 180px + + +.bd-footer-star-header + padding: 1.5rem + +.bd-footer-star-figure + @extend %center + height: $star-figure-height + margin-top: -1rem diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass index af545e690..67abb258b 100644 --- a/docs/_sass/global.sass +++ b/docs/_sass/global.sass @@ -2,6 +2,10 @@ svg max-height: 100% max-width: 100% +.bd-patreon-button + img + border-radius: $radius + $carbon-spacing: 1rem $carbon-shadow-size: 0.75rem $carbon-image-height: 100px diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 0477776d0..f64848123 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -23,6 +23,8 @@ $carbon-height: 100px $main-spacing: 3rem $intro-width: 1080px +$navbar-item-img-max-height: none + %center align-items: center display: flex diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 2df869aeb..7fe2f624c 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1,5 +1,5 @@ @charset "UTF-8"; -.bd-columns-tool { +.bd-columns-tool, .bd-footer-donation-action, .bd-footer-star-figure { align-items: center; display: flex; justify-content: center; @@ -261,9 +261,6 @@ html { } img, -embed, -iframe, -object, audio, video { height: auto; @@ -6519,7 +6516,7 @@ a.navbar-item:hover, a.navbar-item.is-active, } .navbar-item img { - max-height: 1.75rem; + max-height: none; } .navbar-item.has-dropdown { @@ -9488,7 +9485,7 @@ label.panel-block:hover { } .footer { - background-color: whitesmoke; + background-color: #fafafa; padding: 3rem 1.5rem 6rem; } @@ -9993,6 +9990,10 @@ svg { max-width: 100%; } +.bd-patreon-button img { + border-radius: 4px; +} + #carboncontainer { align-items: center; display: flex; @@ -10649,115 +10650,161 @@ svg { } } -#about .twitter-container { - display: block; - height: 30px; - line-height: 30px; - margin-top: 0.5rem; +.bd-footer-title { + color: #363636; + font-size: 1.25rem; + line-height: 1.25; + margin-bottom: 1rem; + transition-duration: 86ms; + transition-property: color; +} + +.bd-footer-title strong { + font-weight: 600; +} + +.bd-footer-subtitle { + color: #b5b5b5; + margin-top: -1rem; + transition-duration: 86ms; + transition-property: color; +} + +.bd-footer-iframe { + display: flex; + flex-wrap: wrap; + min-height: 30px; } -#about small { +.bd-footer-iframe .fb-like { + margin-left: 10px; +} + +.bd-footer-tsp { + color: #b5b5b5; + margin-top: 1.5rem; +} + +.bd-footer-support, .bd-footer-star { + background-color: white; + border-radius: 6px; + box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.1); display: block; - margin-top: 5px; + text-align: center; } -#mc_embed_signup .field { - margin-bottom: 0; +.bd-footer-support .bd-footer-title, .bd-footer-star .bd-footer-title { + font-size: 1.5rem; + margin-bottom: 1rem; } -#mc_embed_signup .notification { - margin-top: 0.75rem; +.bd-footer-support { + margin-bottom: 3rem; + margin-top: 2.25rem; + padding: 2.5rem; } -#share form { - height: 30px; - margin-top: 10px; +.bd-footer-donations { + justify-content: center; } -#social { - align-items: center; - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - max-width: 400px; +.bd-footer-donation { + flex: none; + width: 240px; } -#social > iframe, -#social > a, -#social > form, -#social > div { - display: inline-block; - font-size: 11px; +.bd-footer-donation-title { + color: #b5b5b5; + margin-bottom: 0.5rem; +} + +.bd-footer-donation-title strong { + color: currentColor; +} + +.bd-footer-donation-action { + min-height: 36px; +} + +.bd-footer-donation-action .paypal-form { height: 30px; - line-height: 30px; - margin-top: 0.5rem; } -#social .github-btn { - width: 160px; +.bd-footer-donation-action .paypal-form img { + display: block; } -#social .twitter-share-button { - margin-right: 10px; - min-width: 76px; +@media screen and (min-width: 769px), print { + .bd-footer-stars { + align-items: stretch; + display: flex; + justify-content: space-between; + } } -#social .paypal-form { - min-width: 148px; +.bd-footer-star { + transition-duration: 86ms; + transition-property: box-shadow, transform; + will-change: box-shadow, transform; } -#social .fb-like { - align-items: center; - display: flex; - width: 130px; +@media screen and (max-width: 768px) { + .bd-footer-star:not(:last-child) { + margin-bottom: 1.5rem; + } } -#social .bd-patreon-button { - height: 30px; - margin-right: 0.5rem; - width: 128px; +@media screen and (min-width: 769px), print { + .bd-footer-star { + width: calc(33.3333% - 2rem); + } } -#newsletter .input { - border-color: white; - box-shadow: none; +.bd-footer-star:hover { + box-shadow: 0 3rem 3rem -1.25rem rgba(10, 10, 10, 0.1); + transform: translateY(-0.5rem); } -#sister ul { - display: flex; - flex-wrap: wrap; +.bd-footer-star:hover .bd-footer-title, +.bd-footer-star:hover .bd-footer-subtitle { + color: #3273dc; } -#sister li { - display: flex; - height: 30px; - margin: 5px 1rem 0 0; +.bd-footer-star.bd-is-expo, .bd-footer-star.bd-is-love { + padding-bottom: 156px; } -#sister img { - height: 30px; +.bd-footer-star.bd-is-expo .bd-footer-title, .bd-footer-star.bd-is-love .bd-footer-title { + align-items: center; + display: flex; + justify-content: center; } -#tsp { - margin-top: 3rem; - text-align: center; +.bd-footer-star.bd-is-expo .bd-footer-title .icon, .bd-footer-star.bd-is-love .bd-footer-title .icon { + margin-right: 0.25em; } -#tsp small { - display: block; +.bd-footer-star.bd-is-expo { + background-image: url("/images/footer/expo-examples.png"); + background-repeat: repeat-x; + background-position: bottom center; + background-size: 352px 156px; } -#alternative { - font-size: 0.875rem; - margin-top: 0.5rem; +.bd-footer-star.bd-is-love { + background-image: url("/images/footer/love.png"); + background-repeat: no-repeat; + background-position: bottom center; + background-size: 440px 180px; } -#alternative a { - color: #7a7a7a; +.bd-footer-star-header { + padding: 1.5rem; } -#alternative a:hover { - text-decoration: underline; +.bd-footer-star-figure { + height: 156px; + margin-top: -1rem; } ::-moz-selection { diff --git a/docs/images/become-a-patron.png b/docs/images/become-a-patron.png new file mode 100644 index 000000000..dcd6cb329 Binary files /dev/null and b/docs/images/become-a-patron.png differ diff --git a/docs/images/become_a_patron_button.png b/docs/images/become_a_patron_button.png deleted file mode 100644 index 291b7bcf2..000000000 Binary files a/docs/images/become_a_patron_button.png and /dev/null differ diff --git a/docs/images/become_a_patron_button@2x.png b/docs/images/become_a_patron_button@2x.png deleted file mode 100644 index 5443ec963..000000000 Binary files a/docs/images/become_a_patron_button@2x.png and /dev/null differ diff --git a/docs/images/become_a_patron_button@3x.png b/docs/images/become_a_patron_button@3x.png deleted file mode 100644 index 81cb33f19..000000000 Binary files a/docs/images/become_a_patron_button@3x.png and /dev/null differ diff --git a/docs/images/footer/bootstrap-to-bulma.png b/docs/images/footer/bootstrap-to-bulma.png new file mode 100644 index 000000000..6ba9b1bb8 Binary files /dev/null and b/docs/images/footer/bootstrap-to-bulma.png differ diff --git a/docs/images/footer/expo-examples.png b/docs/images/footer/expo-examples.png new file mode 100644 index 000000000..fddfd8c5b Binary files /dev/null and b/docs/images/footer/expo-examples.png differ diff --git a/docs/images/footer/jesse.png b/docs/images/footer/jesse.png new file mode 100644 index 000000000..6bc7f245e Binary files /dev/null and b/docs/images/footer/jesse.png differ diff --git a/docs/images/footer/love-film.png b/docs/images/footer/love-film.png new file mode 100644 index 000000000..76fd01a8d Binary files /dev/null and b/docs/images/footer/love-film.png differ diff --git a/docs/images/footer/love.png b/docs/images/footer/love.png new file mode 100644 index 000000000..8ae142f81 Binary files /dev/null and b/docs/images/footer/love.png differ diff --git a/docs/test.html b/docs/test.html index 3d198abf2..cf9f18a2b 100644 --- a/docs/test.html +++ b/docs/test.html @@ -8,13 +8,48 @@ Bulma test page - + + + + + {% include global/navbar.html %} - {% include test/from-to.html %} - {% include test/features.html %} +
+
+
+
+ {% include footer/about.html %} +
+
+ {% include footer/contribute.html %} +
+
+ {% include footer/share.html %} +
+
+ {% include footer/support.html %} + {% include footer/boxes.html %} +
+
+ + + + diff --git a/sass/base/minireset.sass b/sass/base/minireset.sass index ea5f1031f..e99311cf1 100644 --- a/sass/base/minireset.sass +++ b/sass/base/minireset.sass @@ -59,9 +59,6 @@ html // Media img, -embed, -iframe, -object, audio, video height: auto diff --git a/sass/layout/footer.sass b/sass/layout/footer.sass index 5b59e2541..6688482ab 100644 --- a/sass/layout/footer.sass +++ b/sass/layout/footer.sass @@ -1,4 +1,4 @@ -$footer-background-color: $background !default +$footer-background-color: $white-bis !default .footer background-color: $footer-background-color