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": {
|
"love": {
|
||||||
"name": "Love",
|
"name": "Love",
|
||||||
"path": "/love"
|
"path": "/love"
|
||||||
|
},
|
||||||
|
"bootstrap": {
|
||||||
|
"name": "Alternative to Bootstrap",
|
||||||
|
"path": "/alternative-to-bootstrap"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"categories": {
|
"categories": {
|
||||||
|
|||||||
@ -1,8 +1,3 @@
|
|||||||
<div class="bd-banner is-patreon">
|
<a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
|
||||||
<p class="bd-banner-text">
|
<img src="{{ site.url }}/images/become-a-patron.png" alt="Become a patron" width="148" height="36">
|
||||||
<strong>Support Bulma</strong> on Patreon
|
</a>
|
||||||
</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>
|
|
||||||
|
|||||||
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 %}
|
{% include global/sponsors.html %}
|
||||||
|
|
||||||
|
<hr class="is-marginless">
|
||||||
|
|
||||||
{% include global/newsletter.html %}
|
{% include global/newsletter.html %}
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
<div id="about" class="content">
|
{% include footer/about.html %}
|
||||||
<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>
|
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@ -83,17 +83,7 @@
|
|||||||
<div class="navbar-item">
|
<div class="navbar-item">
|
||||||
<div class="field is-grouped is-grouped-multiline">
|
<div class="field is-grouped is-grouped-multiline">
|
||||||
<p class="control">
|
<p class="control">
|
||||||
<a href="https://www.patreon.com/jgthms" target="_blank" style="display: block;">
|
{% include elements/patreon.html %}
|
||||||
<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>
|
|
||||||
</p>
|
</p>
|
||||||
<p class="control">
|
<p class="control">
|
||||||
<a class="button is-primary" href="{{ site.data.meta.download }}">
|
<a class="button is-primary" href="{{ site.data.meta.download }}">
|
||||||
|
|||||||
@ -1,31 +1,31 @@
|
|||||||
<section id="newsletter" class="hero is-primary">
|
<section id="newsletter" class="section is-medium">
|
||||||
<div class="hero-body">
|
<div class="container">
|
||||||
<div class="container">
|
<div class="columns is-vcentered">
|
||||||
<div class="columns is-vcentered">
|
<div class="column">
|
||||||
<div class="column is-one-third is-left">
|
<p class="title">Newsletter</p>
|
||||||
<p class="title">Bulma <strong>Newsletter</strong></p>
|
<p class="subtitle is-4 has-text-grey-light">Features, releases, showcase… stay in the loop!</p>
|
||||||
<p class="subtitle">Get notified when v1 is ready!</p>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
|
<form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
|
||||||
<div class="field is-grouped">
|
<div class="field is-grouped">
|
||||||
<div class="control has-icons-left is-expanded">
|
<div class="control has-icons-left is-expanded">
|
||||||
<input type="email" value="" name="email" class="input is-flat required email" placeholder="email address" required>
|
<input type="email" value="" name="email" class="input is-flat required email" placeholder="email address" required>
|
||||||
<span class="icon is-small is-left">
|
<span class="icon is-small is-left">
|
||||||
<i class="fas fa-envelope"></i>
|
<i class="fas fa-envelope"></i>
|
||||||
</span>
|
</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>
|
</div>
|
||||||
</form>
|
<div class="control">
|
||||||
</div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,23 +1,21 @@
|
|||||||
<section class="hero">
|
<section class="section">
|
||||||
<div class="hero-body">
|
<div class="container">
|
||||||
<div class="container">
|
<div class="columns is-vcentered">
|
||||||
<div class="columns is-vcentered">
|
<div class="column is-4">
|
||||||
<div class="column is-4">
|
<p class="title">Sponsors</p>
|
||||||
<p class="title">Bulma <strong>Sponsors</strong></p>
|
</div>
|
||||||
</div>
|
<div class="column is-8">
|
||||||
<div class="column is-8">
|
<div class="bd-sponsors">
|
||||||
<div class="bd-sponsors">
|
<a href="https://chainaxe.io/" target="_blank" rel="nofollow">
|
||||||
<a href="https://chainaxe.io/" target="_blank" rel="nofollow">
|
{%
|
||||||
{%
|
include elements/responsive-image.html
|
||||||
include elements/responsive-image.html
|
path="sponsors/chainaxe"
|
||||||
path="sponsors/chainaxe"
|
extension="png"
|
||||||
extension="png"
|
alt="chainaxe logo"
|
||||||
alt="chainaxe logo"
|
width="99"
|
||||||
width="99"
|
height="70"
|
||||||
height="70"
|
%}
|
||||||
%}
|
</a>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,81 +1,120 @@
|
|||||||
#about
|
.bd-footer-title
|
||||||
.twitter-container
|
color: $text-strong
|
||||||
display: block
|
font-size: 1.25rem
|
||||||
height: 30px
|
line-height: 1.25
|
||||||
line-height: 30px
|
margin-bottom: 1rem
|
||||||
margin-top: 0.5rem
|
transition-duration: $speed
|
||||||
small
|
transition-property: color
|
||||||
display: block
|
strong
|
||||||
margin-top: 5px
|
font-weight: $weight-semibold
|
||||||
|
|
||||||
#mc_embed_signup
|
.bd-footer-subtitle
|
||||||
.field
|
color: $grey-light
|
||||||
margin-bottom: 0
|
margin-top: -1rem
|
||||||
.notification
|
transition-duration: $speed
|
||||||
margin-top: 0.75rem
|
transition-property: color
|
||||||
|
|
||||||
#share
|
.bd-footer-iframe
|
||||||
form
|
|
||||||
height: 30px
|
|
||||||
margin-top: 10px
|
|
||||||
|
|
||||||
#social
|
|
||||||
align-items: center
|
|
||||||
display: flex
|
display: flex
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
justify-content: flex-start
|
min-height: 30px
|
||||||
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
|
|
||||||
.fb-like
|
.fb-like
|
||||||
align-items: center
|
margin-left: 10px
|
||||||
display: flex
|
|
||||||
width: 130px
|
|
||||||
.bd-patreon-button
|
|
||||||
height: 30px
|
|
||||||
margin-right: 0.5rem
|
|
||||||
width: 128px
|
|
||||||
|
|
||||||
#newsletter
|
.bd-footer-tsp
|
||||||
.input
|
color: $grey-light
|
||||||
border-color: $white
|
margin-top: 1.5rem
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
#sister
|
%bd-footer-box
|
||||||
ul
|
background-color: $white
|
||||||
display: flex
|
border-radius: $radius-large
|
||||||
flex-wrap: wrap
|
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.1)
|
||||||
li
|
display: block
|
||||||
display: flex
|
|
||||||
height: 30px
|
|
||||||
margin: 5px 1rem 0 0
|
|
||||||
img
|
|
||||||
height: 30px
|
|
||||||
|
|
||||||
#tsp
|
|
||||||
margin-top: 3rem
|
|
||||||
text-align: center
|
text-align: center
|
||||||
small
|
.bd-footer-title
|
||||||
display: block
|
font-size: 1.5rem
|
||||||
|
margin-bottom: 1rem
|
||||||
|
|
||||||
#alternative
|
// Support
|
||||||
font-size: 0.875rem
|
|
||||||
margin-top: 0.5rem
|
.bd-footer-support
|
||||||
a
|
@extend %bd-footer-box
|
||||||
color: $text-light
|
margin-bottom: 3rem
|
||||||
&:hover
|
margin-top: 2.25rem
|
||||||
text-decoration: underline
|
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-height: 100%
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
|
|
||||||
|
.bd-patreon-button
|
||||||
|
img
|
||||||
|
border-radius: $radius
|
||||||
|
|
||||||
$carbon-spacing: 1rem
|
$carbon-spacing: 1rem
|
||||||
$carbon-shadow-size: 0.75rem
|
$carbon-shadow-size: 0.75rem
|
||||||
$carbon-image-height: 100px
|
$carbon-image-height: 100px
|
||||||
|
|||||||
@ -23,6 +23,8 @@ $carbon-height: 100px
|
|||||||
$main-spacing: 3rem
|
$main-spacing: 3rem
|
||||||
$intro-width: 1080px
|
$intro-width: 1080px
|
||||||
|
|
||||||
|
$navbar-item-img-max-height: none
|
||||||
|
|
||||||
%center
|
%center
|
||||||
align-items: center
|
align-items: center
|
||||||
display: flex
|
display: flex
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
.bd-columns-tool {
|
.bd-columns-tool, .bd-footer-donation-action, .bd-footer-star-figure {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -261,9 +261,6 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
img,
|
img,
|
||||||
embed,
|
|
||||||
iframe,
|
|
||||||
object,
|
|
||||||
audio,
|
audio,
|
||||||
video {
|
video {
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -6519,7 +6516,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar-item img {
|
.navbar-item img {
|
||||||
max-height: 1.75rem;
|
max-height: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-item.has-dropdown {
|
.navbar-item.has-dropdown {
|
||||||
@ -9488,7 +9485,7 @@ label.panel-block:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
background-color: whitesmoke;
|
background-color: #fafafa;
|
||||||
padding: 3rem 1.5rem 6rem;
|
padding: 3rem 1.5rem 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -9993,6 +9990,10 @@ svg {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-patreon-button img {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
#carboncontainer {
|
#carboncontainer {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -10649,115 +10650,161 @@ svg {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#about .twitter-container {
|
.bd-footer-title {
|
||||||
display: block;
|
color: #363636;
|
||||||
height: 30px;
|
font-size: 1.25rem;
|
||||||
line-height: 30px;
|
line-height: 1.25;
|
||||||
margin-top: 0.5rem;
|
margin-bottom: 1rem;
|
||||||
|
transition-duration: 86ms;
|
||||||
|
transition-property: color;
|
||||||
}
|
}
|
||||||
|
|
||||||
#about small {
|
.bd-footer-title strong {
|
||||||
display: block;
|
font-weight: 600;
|
||||||
margin-top: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#mc_embed_signup .field {
|
.bd-footer-subtitle {
|
||||||
margin-bottom: 0;
|
color: #b5b5b5;
|
||||||
|
margin-top: -1rem;
|
||||||
|
transition-duration: 86ms;
|
||||||
|
transition-property: color;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mc_embed_signup .notification {
|
.bd-footer-iframe {
|
||||||
margin-top: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#share form {
|
|
||||||
height: 30px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#social {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-start;
|
min-height: 30px;
|
||||||
max-width: 400px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#social > iframe,
|
.bd-footer-iframe .fb-like {
|
||||||
#social > a,
|
margin-left: 10px;
|
||||||
#social > form,
|
|
||||||
#social > div {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 11px;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#social .github-btn {
|
.bd-footer-tsp {
|
||||||
width: 160px;
|
color: #b5b5b5;
|
||||||
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#social .twitter-share-button {
|
.bd-footer-support, .bd-footer-star {
|
||||||
margin-right: 10px;
|
background-color: white;
|
||||||
min-width: 76px;
|
border-radius: 6px;
|
||||||
}
|
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.1);
|
||||||
|
display: block;
|
||||||
#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;
|
|
||||||
text-align: center;
|
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;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#alternative {
|
@media screen and (min-width: 769px), print {
|
||||||
font-size: 0.875rem;
|
.bd-footer-stars {
|
||||||
margin-top: 0.5rem;
|
align-items: stretch;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#alternative a {
|
.bd-footer-star {
|
||||||
color: #7a7a7a;
|
transition-duration: 86ms;
|
||||||
|
transition-property: box-shadow, transform;
|
||||||
|
will-change: box-shadow, transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
#alternative a:hover {
|
@media screen and (max-width: 768px) {
|
||||||
text-decoration: underline;
|
.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 {
|
::-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 http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Bulma test page</title>
|
<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>
|
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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 global/navbar.html %}
|
||||||
{% include test/from-to.html %}
|
<footer class="footer">
|
||||||
{% include test/features.html %}
|
<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/clipboard-1.7.1.min.js"></script>
|
||||||
<script src="{{ site.url }}/vendor/js.cookie-2.1.4.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>
|
<script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
|
||||||
|
|||||||
@ -59,9 +59,6 @@ html
|
|||||||
|
|
||||||
// Media
|
// Media
|
||||||
img,
|
img,
|
||||||
embed,
|
|
||||||
iframe,
|
|
||||||
object,
|
|
||||||
audio,
|
audio,
|
||||||
video
|
video
|
||||||
height: auto
|
height: auto
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
$footer-background-color: $background !default
|
$footer-background-color: $white-bis !default
|
||||||
|
|
||||||
.footer
|
.footer
|
||||||
background-color: $footer-background-color
|
background-color: $footer-background-color
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user