diff --git a/docs/_data/links.json b/docs/_data/links.json
index ef01cc05..832e49b0 100644
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
@@ -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"],
diff --git a/docs/_includes/footer/links.html b/docs/_includes/footer/links.html
new file mode 100644
index 00000000..2fad9f72
--- /dev/null
+++ b/docs/_includes/footer/links.html
@@ -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'] %}
+
+
diff --git a/docs/_includes/footer/main.html b/docs/_includes/footer/main.html
new file mode 100644
index 00000000..f2f7e198
--- /dev/null
+++ b/docs/_includes/footer/main.html
@@ -0,0 +1,18 @@
+
diff --git a/docs/_includes/global/footer.html b/docs/_includes/global/footer.html
index fe9a63eb..a892d77a 100644
--- a/docs/_includes/global/footer.html
+++ b/docs/_includes/global/footer.html
@@ -8,15 +8,7 @@
{% include global/newsletter.html %}
-
+{% include footer/main.html %}
{% include book/book-modal.html %}
diff --git a/docs/_sass/footer.sass b/docs/_sass/footer.sass
index cd935964..8cee8b42 100644
--- a/docs/_sass/footer.sass
+++ b/docs/_sass/footer.sass
@@ -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
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 7fe2f624..f1bddc31 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -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;
diff --git a/docs/test.html b/docs/test.html
index cf9f18a2..0823163c 100644
--- a/docs/test.html
+++ b/docs/test.html
@@ -21,23 +21,7 @@
{% include global/navbar.html %}
-
+ {% include footer/main.html %}