mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
Footer stars
This commit is contained in:
Jeremy Thomas
parent
3dd3784186
commit
91776c091f
@ -330,6 +330,10 @@
|
||||
"love": {
|
||||
"name": "Love",
|
||||
"path": "/love"
|
||||
},
|
||||
"bootstrap": {
|
||||
"name": "Alternative to Bootstrap",
|
||||
"path": "/alternative-to-bootstrap"
|
||||
}
|
||||
},
|
||||
"categories": {
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
<div class="bd-banner is-patreon">
|
||||
<p class="bd-banner-text">
|
||||
<strong>Support Bulma</strong> on Patreon
|
||||
</p>
|
||||
<a class="bd-banner-button" href="https://www.patreon.com/jgthms" target="_blank">
|
||||
<img src="/images/patreon.png" alt="Become a patron">
|
||||
</a>
|
||||
</div>
|
||||
<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">
|
||||
</a>
|
||||
|
||||
13
docs/_includes/footer/about.html
Normal file
13
docs/_includes/footer/about.html
Normal file
@ -0,0 +1,13 @@
|
||||
<h4 class="bd-footer-title">
|
||||
<strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://jgthms.com" property="cc:attributionName" rel="cc:attributionURL" target="_blank">Jeremy Thomas</a>.
|
||||
</h4>
|
||||
|
||||
<div class="bd-footer-iframe">
|
||||
<a href="{{ site.data.meta.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
<div class="bd-footer-tsp">
|
||||
Source code licensed <a href="https://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>
|
||||
</div>
|
||||
48
docs/_includes/footer/boxes.html
Normal file
48
docs/_includes/footer/boxes.html
Normal file
@ -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'] %}
|
||||
|
||||
<div class="bd-footer-stars">
|
||||
<a class="bd-footer-star bd-is-bootstrap" href="{{ site.url }}{{ boostrap_link.path }}">
|
||||
<header class="bd-footer-star-header">
|
||||
<h4 class="bd-footer-title">
|
||||
<strong>Coming from Bootstrap</strong>
|
||||
</h4>
|
||||
<p class="bd-footer-subtitle">
|
||||
An alternative to Bootstrap
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<figure class="bd-footer-star-figure">
|
||||
<img src="{{ site.url }}/images/footer/bootstrap-to-bulma.png" width="160" height="48">
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
<a class="bd-footer-star bd-is-expo" href="{{ site.url }}{{ expo_link.path }}">
|
||||
<header class="bd-footer-star-header">
|
||||
<h4 class="bd-footer-title">
|
||||
<span class="icon bd-has-text-star">
|
||||
<i class="fas fa-star"></i>
|
||||
</span>
|
||||
<strong>Expo</strong>
|
||||
</h4>
|
||||
<p class="bd-footer-subtitle">
|
||||
See what you can build with Bulma
|
||||
</p>
|
||||
</header>
|
||||
</a>
|
||||
|
||||
<a class="bd-footer-star bd-is-love" href="{{ site.url }}{{ love_link.path }}">
|
||||
<header class="bd-footer-star-header">
|
||||
<h4 class="bd-footer-title">
|
||||
<span class="icon has-text-danger">
|
||||
<i class="fas fa-heart"></i>
|
||||
</span>
|
||||
<strong>Love</strong>
|
||||
</h4>
|
||||
<p class="bd-footer-subtitle">
|
||||
Fans of Bulma
|
||||
</p>
|
||||
</header>
|
||||
</a>
|
||||
</div>
|
||||
9
docs/_includes/footer/contribute.html
Normal file
9
docs/_includes/footer/contribute.html
Normal file
@ -0,0 +1,9 @@
|
||||
<h4 class="bd-footer-title">
|
||||
<strong>Contribute</strong> on GitHub
|
||||
</h4>
|
||||
|
||||
<div class="bd-footer-iframe">
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&type=follow&count=true&size=large" frameborder="0" scrolling="0" width="170px" height="30px"></iframe>
|
||||
</div>
|
||||
9
docs/_includes/footer/share.html
Normal file
9
docs/_includes/footer/share.html
Normal file
@ -0,0 +1,9 @@
|
||||
<h4 class="bd-footer-title">
|
||||
<strong>Share</strong> on social media
|
||||
</h4>
|
||||
|
||||
<div class="bd-footer-iframe">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
30
docs/_includes/footer/support.html
Normal file
30
docs/_includes/footer/support.html
Normal file
@ -0,0 +1,30 @@
|
||||
<div class="bd-footer-support">
|
||||
<h4 class="bd-footer-title">
|
||||
<strong>Support</strong> Bulma
|
||||
</h4>
|
||||
|
||||
<div class="bd-footer-donations columns">
|
||||
<div class="bd-footer-donation column">
|
||||
<p class="bd-footer-donation-title">
|
||||
<strong>One-time</strong> donation
|
||||
</p>
|
||||
<div class="bd-footer-donation-action">
|
||||
<form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
||||
<input type="hidden" name="cmd" value="_s-xclick">
|
||||
<input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
|
||||
<input type="image" src="{{site.url}}/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-footer-donation column">
|
||||
<p class="bd-footer-donation-title">
|
||||
<strong>Monthly</strong> donation
|
||||
</p>
|
||||
<div class="bd-footer-donation-action">
|
||||
{% include elements/patreon.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4,81 +4,16 @@
|
||||
|
||||
{% include global/sponsors.html %}
|
||||
|
||||
<hr class="is-marginless">
|
||||
|
||||
{% include global/newsletter.html %}
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<div id="about" class="content">
|
||||
<strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
|
||||
<div class="twitter-container">
|
||||
<a href="{{ site.data.meta.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
<p id="alternative">
|
||||
<a href="{{ site.url }}/alternative-to-bootstrap/">An alternative to <strong>Bootstrap</strong></a>
|
||||
</p>
|
||||
</div>
|
||||
{% include footer/about.html %}
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
|
||||
<a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
|
||||
<img src="/images/patreon.png" alt="Become a patron">
|
||||
</a>
|
||||
|
||||
<form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
||||
<input type="hidden" name="cmd" value="_s-xclick">
|
||||
<input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
|
||||
<input type="image" src="{{site.url}}/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="{{site.url}}/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="{{site.url}}/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tsp">
|
||||
<p>
|
||||
<a href="{{ site.url }}/made-with-bulma/">
|
||||
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
|
||||
</a>
|
||||
<small>
|
||||
Get the <a href="{{ site.url }}/made-with-bulma/">badge</a>!
|
||||
<br>
|
||||
Source code licensed <a href="https://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -83,17 +83,7 @@
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<p class="control">
|
||||
<a href="https://www.patreon.com/jgthms" target="_blank" style="display: block;">
|
||||
<img
|
||||
style="border-radius: 3px; display: block; max-height: 36px;"
|
||||
src="/images/become_a_patron_button.png"
|
||||
width="153"
|
||||
height="36"
|
||||
srcset="/images/become_a_patron_button@3x.png 3x,
|
||||
/images/become_a_patron_button@2x.png 2x,
|
||||
/images/become_a_patron_button.png 1x"
|
||||
alt="Become a patron">
|
||||
</a>
|
||||
{% include elements/patreon.html %}
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="{{ site.data.meta.download }}">
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
<section id="newsletter" class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-one-third is-left">
|
||||
<p class="title">Bulma <strong>Newsletter</strong></p>
|
||||
<p class="subtitle">Get notified when v1 is ready!</p>
|
||||
</div>
|
||||
<section id="newsletter" class="section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<p class="title">Newsletter</p>
|
||||
<p class="subtitle is-4 has-text-grey-light">Features, releases, showcase… stay in the loop!</p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
|
||||
<div class="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="email" class="input is-flat required email" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="is-hidden">
|
||||
<input type="text" name="hp" id="hp">
|
||||
</div>
|
||||
<input type="hidden" name="list" value="So5UY3O9gHJkq892bn763Tyf4A">
|
||||
<input type="submit" value="Subscribe" name="submit" id="mc-embedded-subscribe" class="button is-white is-outlined">
|
||||
</div>
|
||||
<div class="column">
|
||||
<form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
|
||||
<div class="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="email" class="input is-flat required email" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="is-hidden">
|
||||
<input type="text" name="hp" id="hp">
|
||||
</div>
|
||||
<input type="hidden" name="list" value="So5UY3O9gHJkq892bn763Tyf4A">
|
||||
<button class="button is-link">
|
||||
<strong>Subscribe</strong>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,23 +1,21 @@
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Sponsors</strong></p>
|
||||
</div>
|
||||
<div class="column is-8">
|
||||
<div class="bd-sponsors">
|
||||
<a href="https://chainaxe.io/" target="_blank" rel="nofollow">
|
||||
{%
|
||||
include elements/responsive-image.html
|
||||
path="sponsors/chainaxe"
|
||||
extension="png"
|
||||
alt="chainaxe logo"
|
||||
width="99"
|
||||
height="70"
|
||||
%}
|
||||
</a>
|
||||
</div>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Sponsors</p>
|
||||
</div>
|
||||
<div class="column is-8">
|
||||
<div class="bd-sponsors">
|
||||
<a href="https://chainaxe.io/" target="_blank" rel="nofollow">
|
||||
{%
|
||||
include elements/responsive-image.html
|
||||
path="sponsors/chainaxe"
|
||||
extension="png"
|
||||
alt="chainaxe logo"
|
||||
width="99"
|
||||
height="70"
|
||||
%}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,81 +1,120 @@
|
||||
#about
|
||||
.twitter-container
|
||||
display: block
|
||||
height: 30px
|
||||
line-height: 30px
|
||||
margin-top: 0.5rem
|
||||
small
|
||||
display: block
|
||||
margin-top: 5px
|
||||
.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
|
||||
|
||||
#mc_embed_signup
|
||||
.field
|
||||
margin-bottom: 0
|
||||
.notification
|
||||
margin-top: 0.75rem
|
||||
.bd-footer-subtitle
|
||||
color: $grey-light
|
||||
margin-top: -1rem
|
||||
transition-duration: $speed
|
||||
transition-property: color
|
||||
|
||||
#share
|
||||
form
|
||||
height: 30px
|
||||
margin-top: 10px
|
||||
|
||||
#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
|
||||
height: 30px
|
||||
margin-right: 0.5rem
|
||||
width: 128px
|
||||
margin-left: 10px
|
||||
|
||||
#newsletter
|
||||
.input
|
||||
border-color: $white
|
||||
box-shadow: none
|
||||
.bd-footer-tsp
|
||||
color: $grey-light
|
||||
margin-top: 1.5rem
|
||||
|
||||
#sister
|
||||
ul
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
li
|
||||
display: flex
|
||||
height: 30px
|
||||
margin: 5px 1rem 0 0
|
||||
img
|
||||
height: 30px
|
||||
|
||||
#tsp
|
||||
margin-top: 3rem
|
||||
%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
|
||||
small
|
||||
display: block
|
||||
.bd-footer-title
|
||||
font-size: 1.5rem
|
||||
margin-bottom: 1rem
|
||||
|
||||
#alternative
|
||||
font-size: 0.875rem
|
||||
margin-top: 0.5rem
|
||||
a
|
||||
color: $text-light
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
// 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
|
||||
img
|
||||
display: block
|
||||
|
||||
// Stars
|
||||
|
||||
$star-figure-height: 156px
|
||||
|
||||
.bd-footer-stars
|
||||
+tablet
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
|
||||
.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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
#about small {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
.bd-footer-title strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#mc_embed_signup .field {
|
||||
margin-bottom: 0;
|
||||
.bd-footer-subtitle {
|
||||
color: #b5b5b5;
|
||||
margin-top: -1rem;
|
||||
transition-duration: 86ms;
|
||||
transition-property: color;
|
||||
}
|
||||
|
||||
#mc_embed_signup .notification {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
#share form {
|
||||
height: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#social {
|
||||
align-items: center;
|
||||
.bd-footer-iframe {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
max-width: 400px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
#social > iframe,
|
||||
#social > a,
|
||||
#social > form,
|
||||
#social > div {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-top: 0.5rem;
|
||||
.bd-footer-iframe .fb-like {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#social .github-btn {
|
||||
width: 160px;
|
||||
.bd-footer-tsp {
|
||||
color: #b5b5b5;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
#social .twitter-share-button {
|
||||
margin-right: 10px;
|
||||
min-width: 76px;
|
||||
}
|
||||
|
||||
#social .paypal-form {
|
||||
min-width: 148px;
|
||||
}
|
||||
|
||||
#social .fb-like {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
#social .bd-patreon-button {
|
||||
height: 30px;
|
||||
margin-right: 0.5rem;
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
#newsletter .input {
|
||||
border-color: white;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#sister ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#sister li {
|
||||
display: flex;
|
||||
height: 30px;
|
||||
margin: 5px 1rem 0 0;
|
||||
}
|
||||
|
||||
#sister img {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#tsp {
|
||||
margin-top: 3rem;
|
||||
.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;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#tsp small {
|
||||
.bd-footer-support .bd-footer-title, .bd-footer-star .bd-footer-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.bd-footer-support {
|
||||
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: #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;
|
||||
}
|
||||
|
||||
.bd-footer-donation-action .paypal-form img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#alternative {
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.5rem;
|
||||
@media screen and (min-width: 769px), print {
|
||||
.bd-footer-stars {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
#alternative a {
|
||||
color: #7a7a7a;
|
||||
.bd-footer-star {
|
||||
transition-duration: 86ms;
|
||||
transition-property: box-shadow, transform;
|
||||
will-change: box-shadow, transform;
|
||||
}
|
||||
|
||||
#alternative a:hover {
|
||||
text-decoration: underline;
|
||||
@media screen and (max-width: 768px) {
|
||||
.bd-footer-star:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.bd-footer-star {
|
||||
width: calc(33.3333% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-footer-star:hover {
|
||||
box-shadow: 0 3rem 3rem -1.25rem rgba(10, 10, 10, 0.1);
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
|
||||
.bd-footer-star:hover .bd-footer-title,
|
||||
.bd-footer-star:hover .bd-footer-subtitle {
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.bd-footer-star.bd-is-expo, .bd-footer-star.bd-is-love {
|
||||
padding-bottom: 156px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.bd-footer-star.bd-is-expo .bd-footer-title .icon, .bd-footer-star.bd-is-love .bd-footer-title .icon {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.bd-footer-star-header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-footer-star-figure {
|
||||
height: 156px;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
|
||||
BIN
docs/images/become-a-patron.png
Normal file
BIN
docs/images/become-a-patron.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
BIN
docs/images/footer/bootstrap-to-bulma.png
Normal file
BIN
docs/images/footer/bootstrap-to-bulma.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
docs/images/footer/expo-examples.png
Normal file
BIN
docs/images/footer/expo-examples.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
BIN
docs/images/footer/jesse.png
Normal file
BIN
docs/images/footer/jesse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
docs/images/footer/love-film.png
Normal file
BIN
docs/images/footer/love-film.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
docs/images/footer/love.png
Normal file
BIN
docs/images/footer/love.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
@ -8,13 +8,48 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Bulma test page</title>
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/bulma-test.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
|
||||
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- <object type="application/x-shockwave-flash" data="https://htmlreference.io/assets/golf.swf">
|
||||
<param name="movie" value="https://htmlreference.io/assets/golf.swf">
|
||||
<param name="wmode" value="transparent">
|
||||
<p>You need to enable Flash to view this content.</p>
|
||||
</object> -->
|
||||
<!-- <embed src="https://www.youtube.com/embed/kmk43_2dtn0" width="640" height="480"> -->
|
||||
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/hK8ONv4wcbA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
|
||||
<!-- <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> -->
|
||||
{% include global/navbar.html %}
|
||||
{% include test/from-to.html %}
|
||||
{% include test/features.html %}
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
{% include footer/about.html %}
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
{% include footer/contribute.html %}
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
{% include footer/share.html %}
|
||||
</div>
|
||||
</div>
|
||||
{% include footer/support.html %}
|
||||
{% include footer/boxes.html %}
|
||||
</div>
|
||||
</footer>
|
||||
<!-- {% include test/from-to.html %} -->
|
||||
<!-- {% include test/features.html %} -->
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
|
||||
<script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
|
||||
|
||||
@ -59,9 +59,6 @@ html
|
||||
|
||||
// Media
|
||||
img,
|
||||
embed,
|
||||
iframe,
|
||||
object,
|
||||
audio,
|
||||
video
|
||||
height: auto
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
$footer-background-color: $background !default
|
||||
$footer-background-color: $white-bis !default
|
||||
|
||||
.footer
|
||||
background-color: $footer-background-color
|
||||
|
||||
Loading…
Reference in New Issue
Block a user