library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add footer links

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-10 17:56:38 +01:00
parent 91776c091f
commit 67f3e64158
7 changed files with 234 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/_data/links.json
View File

@ -323,19 +323,55 @@
"name": "Blog",
"path": "/blog"
},
"more": {
"name": "More",
"path": "/more"
},
"expo": {
"name": "Expo",
"subtitle": "Official Bulma showcase",
"path": "/expo"
},
"love": {
"name": "Love",
"subtitle": "Fans of Bulma around the world",
"path": "/love"
},
"bulma-start": {
"name": "Bulma start",
"subtitle": "A tiny npm package to get started",
"path": "/bulma-start"
},
"made-with-bulma": {
"name": "Made with Bulma",
"subtitle": "The official community badge",
"path": "/made-with-bulma"
},
"bootstrap": {
"name": "Alternative to Bootstrap",
"name": "Coming from Bootstrap",
"subtitle": "See how Bulma is an alternative to Bootstrap",
"path": "/alternative-to-bootstrap"
},
"patreon-backers": {
"name": "Patreon backers",
"subtitle": "Everyone who is supporting Bulma",
"path": "/backers"
},
"extensions": {
"name": "Bulma extensions",
"subtitle": "Side projects to enhance Bulma",
"path": "/extensions"
}
},
"more": [
"expo",
"love",
"bulma-start",
"made-with-bulma",
"bootstrap",
"patreon-backers",
"extensions"
],
"categories": {
"overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
"modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],

70
docs/_includes/footer/links.html Normal file
View File

@ -0,0 +1,70 @@
{% assign blog_link = site.data.links.by_id['blog'] %}
{% assign documentation_link = site.data.links.by_id['documentation'] %}
{% assign more_link = site.data.links.by_id['more'] %}
<div class="bd-footer-links">
<div class="columns">
<div class="column is-3">
<p class="bd-footer-link-title">
<a href="{{ site.url }}">Home</a>
</p>
<p class="bd-footer-link-title">
<a href="{{ site.url }}{{ blog_link.path }}">Blog</a>
</p>
{% for post in site.posts | limit: 4 %}
<p class="bd-footer-link">
<a href="{{ post.url }}">
{{ post.name }}
</a>
</p>
{% endfor %}
<p class="bd-footer-link bd-is-more">
<a href="{{ site.url }}{{ blog_link.path }}">
View all posts
</a>
</p>
</div>
<div class="column is-3">
<p class="bd-footer-link-title">
<a href="{{ site.url }}{{ documentation_link.path }}">Documentation</a>
</p>
{% for category in site.data.links.categories %}
{% assign category_id = category[0] %}
{% assign category_link = site.data.links.by_id[category_id] %}
<p class="bd-footer-link">
<a href="{{ site.url }}{{ category_link.path }}">
{{ category_link.name }}
</a>
</p>
{% endfor %}
</div>
<div class="column is-6">
<p class="bd-footer-link-title">
<a href="{{ site.url }}{{ more_link.path }}">More</a>
</p>
{% for link_id in site.data.links.more %}
{% assign link = site.data.links.by_id[link_id] %}
<p class="bd-footer-link bd-has-subtitle">
<a href="{{ site.url }}{{ link.path }}">
<span>
{{ link.name }}
</span>
<em>
{{ link.subtitle }}
</em>
</a>
</p>
{% endfor %}
</div>
</div>
</div>

18
docs/_includes/footer/main.html Normal file
View File

@ -0,0 +1,18 @@
<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 %}
{% include footer/links.html %}
</div>
</footer>

10
docs/_includes/global/footer.html
View File

@ -8,15 +8,7 @@
{% include global/newsletter.html %}
<footer class="footer">
<div class="container">
<div class="columns">
<div class="column is-4">
{% include footer/about.html %}
</div>
</div>
</div>
</footer>
{% include footer/main.html %}
{% include book/book-modal.html %}

46
docs/_sass/footer.sass
View File

@ -17,13 +17,16 @@
.bd-footer-iframe
display: flex
flex-wrap: wrap
margin-bottom: -10px
min-height: 30px
iframe
margin-bottom: 10px
.fb-like
margin-left: 10px
.bd-footer-tsp
color: $grey-light
margin-top: 1.5rem
margin-top: 1rem
%bd-footer-box
background-color: $white
@ -110,7 +113,6 @@ $star-figure-height: 156px
background-position: bottom center
background-size: 440px 180px
.bd-footer-star-header
padding: 1.5rem
@ -118,3 +120,43 @@ $star-figure-height: 156px
@extend %center
height: $star-figure-height
margin-top: -1rem
// Links
.bd-footer-links
margin-top: 6rem
padding-bottom: 6rem
a
color: currentColor
&:hover
color: $link
.bd-footer-link-title
color: $text-strong
font-size: 1.25rem
font-weight: $weight-semibold
&:not(:first-child)
margin-top: 1.5em
.bd-footer-link
margin-top: 0.25rem
&.bd-is-more
font-size: 0.875rem
a:not(:hover)
color: $grey-light
&.bd-has-subtitle
a
em
display: block
font-size: 0.875rem
font-style: normal
&:not(:hover)
em
color: $grey-light
+tablet
align-items: center
display: flex
justify-content: space-between
em
margin-left: 1rem
text-align: right

64
docs/css/bulma-docs.css
View File

@ -10673,16 +10673,21 @@ svg {
.bd-footer-iframe {
display: flex;
flex-wrap: wrap;
margin-bottom: -10px;
min-height: 30px;
}
.bd-footer-iframe iframe {
margin-bottom: 10px;
}
.bd-footer-iframe .fb-like {
margin-left: 10px;
}
.bd-footer-tsp {
color: #b5b5b5;
margin-top: 1.5rem;
margin-top: 1rem;
}
.bd-footer-support, .bd-footer-star {
@ -10807,6 +10812,63 @@ svg {
margin-top: -1rem;
}
.bd-footer-links {
margin-top: 6rem;
padding-bottom: 6rem;
}
.bd-footer-links a {
color: currentColor;
}
.bd-footer-links a:hover {
color: #3273dc;
}
.bd-footer-link-title {
color: #363636;
font-size: 1.25rem;
font-weight: 600;
}
.bd-footer-link-title:not(:first-child) {
margin-top: 1.5em;
}
.bd-footer-link {
margin-top: 0.25rem;
}
.bd-footer-link.bd-is-more {
font-size: 0.875rem;
}
.bd-footer-link.bd-is-more a:not(:hover) {
color: #b5b5b5;
}
.bd-footer-link.bd-has-subtitle a em {
display: block;
font-size: 0.875rem;
font-style: normal;
}
.bd-footer-link.bd-has-subtitle a:not(:hover) em {
color: #b5b5b5;
}
@media screen and (min-width: 769px), print {
.bd-footer-link.bd-has-subtitle a {
align-items: center;
display: flex;
justify-content: space-between;
}
.bd-footer-link.bd-has-subtitle a em {
margin-left: 1rem;
text-align: right;
}
}
::-moz-selection {
background-color: #00d1b2;
color: #fff;

18
docs/test.html
View File

@ -21,23 +21,7 @@
<!-- <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 %}
<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 footer/main.html %}
<!-- {% include test/from-to.html %} -->
<!-- {% include test/features.html %} -->
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>