Add more page

docs/_data/global.json

@@ -9,7 +9,7 @@
     },
     {
       "id": "expo",
-      "color": "bd-has-text-star",
+      "color": "has-text-star",
       "fa_type": "fas",
       "fa_icon": "fa-star",
       "title": "Expo"

docs/_data/links.json

@@ -330,36 +330,51 @@
     "expo": {
       "name": "Expo",
       "subtitle": "Official Bulma showcase",
+      "icon": "star",
+      "color": "star",
       "path": "/expo"
     },
     "love": {
       "name": "Love",
       "subtitle": "Fans of Bulma around the world",
+      "color": "danger",
+      "icon": "heart",
       "path": "/love"
     },
     "bulma-start": {
       "name": "Bulma start",
       "subtitle": "A tiny npm package to get started",
+      "icon": "rocket",
+      "color": "success",
       "path": "/bulma-start"
     },
     "made-with-bulma": {
       "name": "Made with Bulma",
       "subtitle": "The official community badge",
+      "icon": "certificate",
+      "color": "primary",
       "path": "/made-with-bulma"
     },
     "bootstrap": {
       "name": "Coming from Bootstrap",
       "subtitle": "See how Bulma is an alternative to Bootstrap",
+      "icon": "exchange-alt",
+      "color": "bootstrap",
       "path": "/alternative-to-bootstrap"
     },
     "patreon-backers": {
       "name": "Patreon backers",
       "subtitle": "Everyone who is supporting Bulma",
+      "icon_brand": "true",
+      "icon": "patreon",
+      "color": "patreon",
       "path": "/backers"
     },
     "extensions": {
       "name": "Bulma extensions",
       "subtitle": "Side projects to enhance Bulma",
+      "icon": "plug",
+      "color": "orange",
       "path": "/extensions"
     }
   },

docs/_includes/footer/boxes.html

@@ -21,7 +21,7 @@
   <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">
+        <span class="icon has-text-star">
           <i class="fas fa-star"></i>
         </span>
         <strong>Expo</strong>

docs/_includes/footer/links.html

@@ -51,20 +51,22 @@
       </p>
 
       {% for link_id in site.data.links.more %}
-          {% assign link = site.data.links.by_id[link_id] %}
+        {% assign link = site.data.links.by_id[link_id] %}
 
         <p class="bd-footer-link bd-has-subtitle">
           <a href="{{ site.url }}{{ link.path }}">
-            <span>
+            <span class="bd-footer-link-icon has-text-{{ link.color }}">
-              {{ link.name }}
+              <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
             </span>
+            <strong>
+              {{ link.name }}
+            </strong>
             <em>
               {{ link.subtitle }}
             </em>
           </a>
         </p>
       {% endfor %}
-
     </div>
   </div>
 </div>

docs/_includes/footer/support.html

@@ -18,6 +18,24 @@
       </div>
     </div>
 
+    <div class="bd-footer-donation column">
+      <p class="bd-footer-donation-title">
+        <strong>Visit</strong> our sponsor
+      </p>
+      <div class="bd-footer-donation-action">
+        <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 class="bd-footer-donation column">
       <p class="bd-footer-donation-title">
         <strong>Monthly</strong> donation

docs/_includes/global/footer.html

@@ -2,10 +2,6 @@
 
 {% include book/book-banner.html %}
 
-{% include global/sponsors.html %}
-
-<hr class="is-marginless">
-
 {% include global/newsletter.html %}
 
 {% include footer/main.html %}

docs/_sass/footer.sass

@@ -2,7 +2,7 @@
   color: $text-strong
   font-size: 1.25rem
   line-height: 1.25
-  margin-bottom: 1rem
+  margin-bottom: 0.5rem
   transition-duration: $speed
   transition-property: color
   strong
@@ -10,7 +10,7 @@
 
 .bd-footer-subtitle
   color: $grey-light
-  margin-top: -1rem
+  margin-top: -0.5rem
   transition-duration: $speed
   transition-property: color
 
@@ -26,7 +26,7 @@
 
 .bd-footer-tsp
   color: $grey-light
-  margin-top: 1rem
+  margin-top: 1.5rem
 
 %bd-footer-box
   background-color: $white
@@ -36,15 +36,16 @@
   text-align: center
   .bd-footer-title
     font-size: 1.5rem
-    margin-bottom: 1rem
 
 // Support
 
 .bd-footer-support
   @extend %bd-footer-box
   margin-bottom: 3rem
-  margin-top: 2.25rem
+  margin-top: 3rem
-  padding: 2.5rem
+  padding: 3rem
+  .bd-footer-title
+    margin-bottom: 1.5rem
 
 .bd-footer-donations
   justify-content: center
@@ -61,7 +62,7 @@
 
 .bd-footer-donation-action
   @extend %center
-  min-height: 36px
+  height: 70px
   .paypal-form
     height: 30px
     img
@@ -139,13 +140,20 @@ $star-figure-height: 156px
     margin-top: 1.5em
 
 .bd-footer-link
-  margin-top: 0.25rem
+  margin-top: 0.5rem
   &.bd-is-more
     font-size: 0.875rem
     a:not(:hover)
       color: $grey-light
   &.bd-has-subtitle
     a
+      align-items: center
+      display: flex
+      justify-content: space-between
+      strong
+        flex-grow: 1
+        flex-shrink: 1
+        font-weight: unset
       em
         display: block
         font-size: 0.875rem
@@ -153,10 +161,19 @@ $star-figure-height: 156px
       &:not(:hover)
         em
           color: $grey-light
+      +mobile
+        flex-wrap: wrap
+        margin-top: 1rem
+        em
+          width: 100%
       +tablet
-        align-items: center
-        display: flex
-        justify-content: space-between
         em
           margin-left: 1rem
           text-align: right
+
+.bd-footer-link-icon
+  flex-grow: 0
+  flex-shrink: 0
+  margin-right: 0.5em
+  text-align: center
+  width: 1em

docs/_sass/specific.sass

@@ -93,7 +93,7 @@
 .bd-has-text-rss
   color: $rss
 
-.bd-has-text-star
+.has-text-star
   color: $star
 
 // $navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)

docs/css/bulma-docs.css

@@ -10654,7 +10654,7 @@ svg {
   color: #363636;
   font-size: 1.25rem;
   line-height: 1.25;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
   transition-duration: 86ms;
   transition-property: color;
 }
@@ -10665,7 +10665,7 @@ svg {
 
 .bd-footer-subtitle {
   color: #b5b5b5;
-  margin-top: -1rem;
+  margin-top: -0.5rem;
   transition-duration: 86ms;
   transition-property: color;
 }
@@ -10687,7 +10687,7 @@ svg {
 
 .bd-footer-tsp {
   color: #b5b5b5;
-  margin-top: 1rem;
+  margin-top: 1.5rem;
 }
 
 .bd-footer-support, .bd-footer-star {
@@ -10700,13 +10700,16 @@ svg {
 
 .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;
+  margin-top: 3rem;
-  padding: 2.5rem;
+  padding: 3rem;
+}
+
+.bd-footer-support .bd-footer-title {
+  margin-bottom: 1.5rem;
 }
 
 .bd-footer-donations {
@@ -10728,7 +10731,7 @@ svg {
 }
 
 .bd-footer-donation-action {
-  min-height: 36px;
+  height: 70px;
 }
 
 .bd-footer-donation-action .paypal-form {
@@ -10836,7 +10839,7 @@ svg {
 }
 
 .bd-footer-link {
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
 }
 
 .bd-footer-link.bd-is-more {
@@ -10847,6 +10850,18 @@ svg {
   color: #b5b5b5;
 }
 
+.bd-footer-link.bd-has-subtitle a {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.bd-footer-link.bd-has-subtitle a strong {
+  flex-grow: 1;
+  flex-shrink: 1;
+  font-weight: unset;
+}
+
 .bd-footer-link.bd-has-subtitle a em {
   display: block;
   font-size: 0.875rem;
@@ -10857,18 +10872,31 @@ svg {
   color: #b5b5b5;
 }
 
-@media screen and (min-width: 769px), print {
+@media screen and (max-width: 768px) {
   .bd-footer-link.bd-has-subtitle a {
-    align-items: center;
+    flex-wrap: wrap;
-    display: flex;
+    margin-top: 1rem;
-    justify-content: space-between;
   }
+  .bd-footer-link.bd-has-subtitle a em {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 769px), print {
   .bd-footer-link.bd-has-subtitle a em {
     margin-left: 1rem;
     text-align: right;
   }
 }
 
+.bd-footer-link-icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-right: 0.5em;
+  text-align: center;
+  width: 1em;
+}
+
 ::-moz-selection {
   background-color: #00d1b2;
   color: #fff;
@@ -11011,7 +11039,7 @@ svg {
   color: #f26522;
 }
 
-.bd-has-text-star {
+.has-text-star {
   color: #FFD257;
 }
 

docs/more.html

@@ -0,0 +1,53 @@
+---
+title: More
+layout: default
+breadcrumb:
+- home
+- more
+---
+
+{% include global/navbar.html id="More" %}
+
+<main class="bd-main">
+  <div class="bd-main-container container">
+    <div class="bd-duo">
+      <div class="bd-lead">
+        {% include components/breadcrumb.html %}
+
+        <header class="bd-header">
+          <div class="bd-header-titles">
+            <h1 class="title">
+              More
+            </h1>
+            <p class="subtitle is-4">
+              Projects and content related to Bulma
+            </p>
+          </div>
+
+          <div class="bd-header-carbon">
+            {% include elements/carbon.html %}
+          </div>
+        </header>
+
+        <div class="bd-content">
+          <div class="bd-links">
+            {% for link_id in site.data.links.more %}
+              {% assign link = site.data.links.by_id[link_id] %}
+              <a class="bd-link bd-is-post" href="{{ site.url }}{{ link.path }}">
+                <h2 class="bd-link-name">
+                  <span class="bd-link-icon has-text-{{ link.color }}">
+                    <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
+                  </span>
+                  {{ link.name }}
+                </h2>
+                <p class="bd-link-subtitle">
+                  {{ link.subtitle }}
+                </p>
+              </a>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>