New docs init

docs/_data/global.json

@@ -0,0 +1,44 @@
+{
+  "more_items": [
+    {
+      "id": "bulma-start",
+      "color": "success",
+      "fa_type": "fas",
+      "fa_icon": "fa-rocket",
+      "title": "Bulma start",
+      "description": "A tiny npm package to get started"
+    },
+    {
+      "id": "made-with-bulma",
+      "color": "primary",
+      "fa_type": "fas",
+      "fa_icon": "fa-certificate",
+      "title": "Made with Bulma",
+      "description": "The official community badge"
+    },
+    {
+      "id": "alternative-to-bootstrap",
+      "color": "bootstrap",
+      "fa_type": "fas",
+      "fa_icon": "fa-exchange-alt",
+      "title": "Coming from Bootstrap",
+      "description": "See how Bulma is an alternative to Bootstrap"
+    },
+    {
+      "id": "backers",
+      "color": "patreon",
+      "fa_type": "fab",
+      "fa_icon": "fa-patreon",
+      "title": "Patreon backers",
+      "description": "Everyone who is supporting Bulma"
+    },
+    {
+      "id": "extensions",
+      "color": "danger",
+      "fa_type": "fas",
+      "fa_icon": "fa-plug",
+      "title": "Extensions",
+      "description": "Side projects to enhance Bulma",
+    }
+  ]
+}

docs/_includes/navbar.html

@@ -1,14 +1,10 @@
 <nav id="navbar" class="navbar is-fixed-top {% if include.transparent %}is-transparent{% endif %}">
-  <div id="specialShadow" class="bd-special-shadow"></div>
-
-  <div class="container">
-
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">
       <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
     </a>
 
-    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
+    <!-- <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
       <span class="icon" style="color: #333;">
         <i class="fab fa-lg fa-github"></i>
       </span>
@@ -18,7 +14,7 @@
       <span class="icon" style="color: #55acee;">
         <i class="fab fa-lg fa-twitter"></i>
       </span>
-    </a>
+    </a> -->
 
     <div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
       <span></span>
@@ -27,190 +23,69 @@
     </div>
   </div>
 
-  <div id="navMenu{{ include.id }}" class="navbar-menu">
+  <div id="navMenu{{ include.id }}" class="navbar-menu is-active">
     <div class="navbar-start">
-      <div class="navbar-item has-dropdown is-hoverable">
-        <a class="navbar-link {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
-          Docs
-        </a>
-        <div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
-          <a class="navbar-item {% if page.doc-tab == 'overview' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
-            Overview
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
-            Modifiers
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
-            Columns
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
-            Layout
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/general/">
-            Form
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
-            Elements
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
-            Components
-          </a>
-          <hr class="navbar-divider">
-          <div class="navbar-item">
-            <div>
-              <p class="is-size-6-desktop">
-                <strong>{{ site.data.meta.version }}</strong>
-              </p>
-              {{#unless site.deprecated}}
-                <small>
-                  <a class="bd-view-all-versions" href="https://versions.bulma.io/">View all versions</a>
-                </small>
-              {{/unless}}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="navbar-item has-dropdown is-hoverable">
-        <a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
-          Blog
-        </a>
-        <div id="blogDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
-          {% for post in site.posts limit:3 %}
-            <a class="navbar-item" href="{{ post.url }}">
-              <div class="navbar-content">
-                <p>
-                  <small class="has-text-link">{{ post.date | date_to_string }}</small>
-                </p>
-                <p>{{ post.title }}</p>
-              </div>
-            </a>
-          {% endfor %}
-          <a class="navbar-item" href="{{ site.url }}/blog/">
-            More posts
-          </a>
-          <hr class="navbar-divider">
-          <div class="navbar-item">
-            <div class="navbar-content">
-              <div class="level is-mobile">
-                <div class="level-left">
-                  <div class="level-item">
-                    <strong>Stay up to date!</strong>
-                  </div>
-                </div>
-                <div class="level-right">
-                  <div class="level-item">
-                    <a class="button bd-is-rss is-small" href="{{ site.url }}/atom.xml">
-                      <span class="icon is-small">
-                        <i class="fas fa-rss"></i>
-                      </span>
-                      <span>Subscribe</span>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <a class="navbar-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
+        <span class="icon has-text-primary">
+          <i class="fas fa-book"></i>
+        </span>
+        <span>Documentation</span>
+      </a>
+      <a class="navbar-item {% if page.route == 'templates' %}is-active{% endif %}" href="{{ site.url }}/templates/">
+        <span class="icon has-text-info">
+          <i class="fas fa-code"></i>
+        </span>
+        <span>Templates</span>
+      </a>
+      <a class="navbar-item {% if page.route == 'videos' %}is-active{% endif %}" href="{{ site.url }}/videos/">
+        <span class="icon has-text-success">
+          <i class="fas fa-play-circle"></i>
+        </span>
+        <span>Videos</span>
+      </a>
+      <a class="navbar-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
+        <span class="icon" style="color: #f26522;">
+          <i class="fas fa-rss"></i>
+        </span>
+        <span>Blog</span>
+      </a>
+      <a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
+        <span class="icon" style="color: #FFD257;">
+          <i class="fas fa-star"></i>
+        </span>
+        <span>Expo</span>
+      </a>
+      <a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
+        <span class="icon has-text-danger">
+          <i class="fas fa-heart"></i>
+        </span>
+        <span>Love</span>
+      </a>
       <div class="navbar-item has-dropdown is-hoverable">
         <div class="navbar-link">
           More
         </div>
         <div id="moreDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
-          <a class="navbar-item {% if page.route == 'bulma-start' %}is-active{% endif %}" href="{{ site.url }}/bulma-start/">
-            <div class="media">
-              <div class="media-left">
-                <span class="icon is-large has-text-success">
-                  <i class="fas fa-rocket fa-2x"></i>
-                </span>
-              </div>
-              <div class="media-content">
-                <p>
-                  <strong>Bulma start</strong>
-                  <br>
-                  <small>A tiny npm package to get started</small>
-                </p>
-              </div>
-            </div>
-          </a>
-          <hr class="navbar-divider">
-          <a class="navbar-item {% if page.route == 'made-with-bulma' %}is-active{% endif %}" href="{{ site.url }}/made-with-bulma/">
-            <div class="media">
-              <div class="media-left">
-                <span class="icon is-large has-text-primary">
-                  <i class="fas fa-certificate fa-2x"></i>
-                </span>
-              </div>
-              <div class="media-content">
-                <p>
-                  <strong>Made with Bulma</strong>
-                  <br>
-                  <small>The official community badge</small>
-                </p>
-              </div>
-            </div>
-          </a>
-          <hr class="navbar-divider">
-          <a id="moreDropdownBootstrap" class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/alternative-to-bootstrap/">
-            <div class="media">
-              <div class="media-left">
-                <span class="icon is-large">
-                  <i class="fas fa-exchange-alt fa-2x"></i>
-                </span>
-              </div>
-              <div class="media-content">
-                <p>
-                  <strong>Coming from Bootstrap</strong>
-                  <br>
-                  <small>See how Bulma is an alternative to Bootstrap</small>
-                </p>
-              </div>
-            </div>
-          </a>
-          <hr class="navbar-divider">
-          <a id="moreDropdownPatreon" class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/backers/">
-            <div class="media">
-              <div class="media-left">
-                <span class="icon is-large">
-                  <i class="fab fa-patreon fa-2x"></i>
-                </span>
-              </div>
-              <div class="media-content">
-                <p>
-                  <strong>Patreon backers</strong>
-                  <br>
-                  <small>Everyone who is supporting Bulma</small>
-                </p>
-              </div>
-            </div>
-          </a>
-          <hr class="navbar-divider">
-          <a class="navbar-item {% if page.route == 'extensions' %}is-active{% endif %}" href="{{ site.url }}/extensions/">
-            <div class="media">
-              <div class="media-left">
-                <span class="icon is-large has-text-danger">
-                  <i class="fas fa-plug fa-2x"></i>
-                </span>
-              </div>
-              <div class="media-content">
-                <p>
-                  <strong>Extensions</strong>
-                  <br>
-                  <small>Side projects to enhance Bulma</small>
-                </p>
+          {% for item in site.data.global.more_items %}
+            <a class="navbar-item {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
+              <div class="media">
+                <div class="media-left">
+                  <span class="icon is-large has-text-{{ item.color }}">
+                    <i class="{{ item.fa_type }} {{ item.fa_icon }} fa-2x"></i>
+                  </span>
+                </div>
+                <div class="media-content">
+                  <p>
+                    <strong>{{ item.title }}</strong>
+                    <br>
+                    <small>{{ item.description }}</small>
+                  </p>
+                </div>
               </div>
-            </div>
-          </a>
+            </a>
+          {% endfor %}
         </div>
       </div>
-      <a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
-        <span class="bd-emoji">⭐️</span>
-        Expo
-      </a>
-      <a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
-        <span class="bd-emoji">❤️</span>
-        Love
-      </a>
     </div>
 
     <div class="navbar-end">
@@ -229,7 +104,7 @@
           <p class="control">
             <a href="https://www.patreon.com/jgthms" target="_blank" style="display: block;">
               <img
-                style="display: block; max-height: 36px;"
+                style="border-radius: 3px; display: block; max-height: 36px;"
                 src="/images/become_a_patron_button.png"
                 width="153"
                 height="36"
@@ -239,25 +114,13 @@
                 alt="Become a patron">
             </a>
           </p>
-          <p class="control">
-            {% include elements/tw-button.html label="Tweet" %}
-          </p>
           <p class="control">
             <a class="button is-primary" href="{{ site.data.meta.download }}">
-              <span class="icon">
-                <i class="fas fa-download"></i>
-              </span>
-              <span>Download</span>
+              <strong>Download</strong>
             </a>
           </p>
         </div>
       </div>
     </div>
   </div>
-
-  </div>
 </nav>
-
-{% unless include.hide_fortyfour %}
-  {% include fortyfour.html %}
-{% endunless %}

docs/_javascript/main.js

@@ -280,8 +280,11 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     const translateFactor = 1 + translateValue / NAVBAR_HEIGHT;
-    specialShadow.style.opacity = scrollFactor;
-    specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
+
+    if (specialShadow) {
+      specialShadow.style.opacity = scrollFactor;
+      specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
+    }
   }
 
   translateHeader(window.scrollY, false);

docs/_sass/override.sass

@@ -11,6 +11,11 @@ body.page-grid .column > .notification
   padding-right: 0
   text-align: center
 
+a.navbar-item
+  & > .icon:not(:last-child)
+    margin-left: -0.25em
+    margin-right: 0.25em
+
 +tablet
   .header-item .button + .button
     margin-left: 0.75rem

docs/lib/main.js

@@ -280,8 +280,11 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     var translateFactor = 1 + translateValue / NAVBAR_HEIGHT;
-    specialShadow.style.opacity = scrollFactor;
-    specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
+
+    if (specialShadow) {
+      specialShadow.style.opacity = scrollFactor;
+      specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
+    }
   }
 
   translateHeader(window.scrollY, false);

docs/thank-you.html

@@ -4,7 +4,7 @@ layout: default
 route: index
 ---
 
-{% include navbar.html id="ThankYou" fixed=true has_container=true boxed=true transparent=true %}
+{% include navbar.html id="ThankYou" %}
 
 <section class="hero is-large has-text-centered">
   <div class="hero-body">

sass/components/navbar.sass

@@ -4,7 +4,7 @@ $navbar-fixed-z: 30 !default
 
 $navbar-item-color: $grey-dark !default
 $navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $background !default
+$navbar-item-hover-background-color: $white-bis !default
 $navbar-item-active-color: $black !default
 $navbar-item-active-background-color: transparent !default
 $navbar-item-img-max-height: 1.75rem !default
@@ -42,6 +42,7 @@ $navbar-divider-background-color: $border !default
 
 .navbar
   background-color: $navbar-background-color
+  box-shadow: 0 2px 0 0 $background
   min-height: $navbar-height
   position: relative
   @each $name, $pair in $colors
@@ -104,13 +105,15 @@ $navbar-divider-background-color: $border !default
   &.is-fixed-top
     top: 0
 
-html.has-navbar-fixed-top,
-body.has-navbar-fixed-top
-  padding-top: $navbar-height
+html,
+body
+  &.has-navbar-fixed-top
+    padding-top: $navbar-height
 
-html.has-navbar-fixed-bottom,
-body.has-navbar-fixed-bottom
-  padding-bottom: $navbar-height
+html,
+body
+  &.has-navbar-fixed-bottom
+    padding-bottom: $navbar-height
 
 .navbar-brand,
 .navbar-tabs
@@ -137,17 +140,20 @@ body.has-navbar-fixed-bottom
   color: $navbar-item-color
   display: block
   line-height: 1.5
-  padding: 0.5rem 1rem
+  padding: 0.5rem 0.75rem
   position: relative
 
 a.navbar-item,
-a.navbar-link
+.navbar-link
+  border-radius: $radius
+  cursor: pointer
   &:hover,
   &.is-active
     background-color: $navbar-item-hover-background-color
     color: $navbar-item-hover-color
 
 .navbar-item
+  display: flex
   flex-grow: 0
   flex-shrink: 0
   img
@@ -240,13 +246,14 @@ a.navbar-link
   .navbar-menu,
   .navbar-start,
   .navbar-end
-    align-items: stretch
+    align-items: center
     display: flex
   .navbar
     min-height: $navbar-height
+    padding: 1rem 2rem
     &.is-transparent
       a.navbar-item,
-      a.navbar-link
+      .navbar-link
         &:hover,
         &.is-active
           background-color: transparent !important
@@ -367,7 +374,7 @@ a.navbar-link
     padding-bottom: $navbar-height
   // Hover/Active states
   a.navbar-item,
-  a.navbar-link
+  .navbar-link
     &.is-active
       color: $navbar-item-active-color
     &.is-active:not(:hover)