Add footer links

diff --git a/docs/_data/links.json b/docs/_data/links.json
index ef01cc05e5f11c28dccbfb6a6be992464d915cd4..832e49b0e793eed03dc1cf4b67dd4f8e04c6e1b2 100644 (file)
--- 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 (file)
index 0000000..2fad9f7
--- /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'] %}
+
+<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>

diff --git a/docs/_includes/footer/main.html b/docs/_includes/footer/main.html
new file mode 100644 (file)
index 0000000..f2f7e19
--- /dev/null
+++ b/docs/_includes/footer/main.html
@@ -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>

diff --git a/docs/_includes/global/footer.html b/docs/_includes/global/footer.html
index fe9a63ebff903f64b9ac0a1d78876eabfe8370e3..a892d77a27c3b686d0dd9ab3d9e225d7b5ef6962 100644 (file)
--- a/docs/_includes/global/footer.html
+++ b/docs/_includes/global/footer.html
@@ -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 %}
 

diff --git a/docs/_sass/footer.sass b/docs/_sass/footer.sass
index cd9359646a17f1c4a2e6286431b3c4a75f92daf5..8cee8b426ea83fdc9927d31a7d17a068fa17e6c1 100644 (file)
--- 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 7fe2f624c1da06103ccb27babb69eeef854d866c..f1bddc3159c2450f9aed50bc526ee1ec17d68c3f 100644 (file)
--- 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 cf9f18a2bd3a58e109f934e588fcb2a95046bdb8..0823163cebf686fa0cfa3acb1bf5ee866dba4ef4 100644 (file)
--- a/docs/test.html
+++ b/docs/test.html
@@ -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>