From 4ede497c96634a029cc86bff3899d7ac7ef897a1 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Mon, 9 Apr 2018 10:35:44 +0100
Subject: [PATCH] Add main layout

---
 docs/_data/global.json                    |  37 ++
 docs/_includes/elements/improve-page.html |  16 +
 docs/_includes/navbar.html                |  46 +-
 docs/_javascript/main.js                  |  24 +-
 docs/_layouts/default.html                |   2 +-
 docs/_layouts/documentation.html          | 104 ++--
 docs/_sass/global.sass                    |   6 +-
 docs/_sass/main.sass                      |  64 +++
 docs/_sass/specific.sass                  |  31 +-
 docs/bulma-docs.sass                      |   3 +
 docs/css/bulma-docs.css                   | 184 ++++++-
 docs/documentation/elements/button.html   | 615 +++++++++++-----------
 docs/index.html                           |   2 +-
 docs/lib/main.js                          |  24 +-
 sass/components/breadcrumb.sass           |   5 +-
 sass/components/navbar.sass               |   2 +
 16 files changed, 719 insertions(+), 446 deletions(-)
 create mode 100644 docs/_includes/elements/improve-page.html
 create mode 100644 docs/_sass/main.sass

diff --git a/docs/_data/global.json b/docs/_data/global.json
index fc5f0e3e..bcc1dc61 100644
--- a/docs/_data/global.json
+++ b/docs/_data/global.json
@@ -1,4 +1,41 @@
 {
+  "navbar_items": [
+    {
+      "id": "templates",
+      "color": "has-text-info",
+      "fa_type": "fas",
+      "fa_icon": "fa-code",
+      "title": "Templates"
+    },
+    {
+      "id": "videos",
+      "color": "has-text-success",
+      "fa_type": "fas",
+      "fa_icon": "fa-play-circle",
+      "title": "Videos"
+    },
+    {
+      "id": "blog",
+      "color": "bd-has-text-rss",
+      "fa_type": "fas",
+      "fa_icon": "fa-rss",
+      "title": "Blog"
+    },
+    {
+      "id": "expo",
+      "color": "bd-has-text-star",
+      "fa_type": "fas",
+      "fa_icon": "fa-star",
+      "title": "Expo"
+    },
+    {
+      "id": "love",
+      "color": "has-text-danger",
+      "fa_type": "fas",
+      "fa_icon": "fa-heart",
+      "title": "Love"
+    }
+  ],
   "more_items": [
     {
       "id": "bulma-start",
diff --git a/docs/_includes/elements/improve-page.html b/docs/_includes/elements/improve-page.html
new file mode 100644
index 00000000..791877a3
--- /dev/null
+++ b/docs/_includes/elements/improve-page.html
@@ -0,0 +1,16 @@
+<section class="section bd-typo">
+  <div class="container">
+    <p class="has-text-centered has-text-grey-light">
+      <a href="{{ site.url }}/made-with-bulma/">
+        <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
+      </a>
+      <br>
+      This page is <strong class="has-text-grey">open source</strong>.
+      Noticed a typo? Or something unclear?
+      <br>
+      <a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
+        Improve this page on GitHub
+      </a>
+    </p>
+  </div>
+</section>
diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index 4f5f3c92..08909a01 100644
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -1,4 +1,4 @@
-<nav id="navbar" class="navbar is-fixed-top {% if include.transparent %}is-transparent{% endif %}">
+<nav id="navbar" class="navbar">
   <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">
@@ -23,44 +23,24 @@
     </div>
   </div>
 
-  <div id="navMenu{{ include.id }}" class="navbar-menu is-active">
+  <div id="navMenu{{ include.id }}" class="navbar-menu">
     <div class="navbar-start">
-      <a class="navbar-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
+      <a class="navbar-item bd-navbar-item-documentation {% 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>
+
+      {% for item in site.data.global.navbar_items %}
+        <a class="navbar-item bd-navbar-item-{{ item.id }} {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
+          <span class="icon {{ item.color }}">
+            <i class="{{ item.fa_type }} {{ item.fa_icon }}"></i>
+          </span>
+          <span>{{ item.title }}</span>
+        </a>
+      {% endfor %}
+
       <div class="navbar-item has-dropdown is-hoverable">
         <div class="navbar-link">
           More
diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index 5bad7b56..2abf217f 100644
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -287,23 +287,23 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-  translateHeader(window.scrollY, false);
+  // translateHeader(window.scrollY, false);
 
   let ticking = false;
   let lastY = 0;
 
-  window.addEventListener('scroll', function() {
-    const currentY = window.scrollY;
+  // window.addEventListener('scroll', function() {
+  //   const currentY = window.scrollY;
 
-    if (!ticking) {
-      window.requestAnimationFrame(function() {
-        upOrDown(lastY, currentY);
-        ticking = false;
-        lastY = currentY;
-      });
-    }
+  //   if (!ticking) {
+  //     window.requestAnimationFrame(function() {
+  //       upOrDown(lastY, currentY);
+  //       ticking = false;
+  //       lastY = currentY;
+  //     });
+  //   }
 
-    ticking = true;
-  });
+  //   ticking = true;
+  // });
 
 });
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index e168fb7f..fdc52d80 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="has-navbar-fixed-top {% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
+<html lang="en" class="{% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
   {% include head.html %}
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
     {% include deprecated.html %}
diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 894c1a71..6b252601 100644
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -3,73 +3,51 @@ layout: default
 route: documentation
 ---
 
-{% include navbar.html id="Documentation" has_container=true %}
+{% include navbar.html id="Documentation" %}
 
-<section class="hero is-link">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column">
-          <p class="title">
-            Documentation
-          </p>
+<main class="bd-main">
+  <div class="bd-side-background"></div>
+  <div class="bd-main-container container">
+    <div class="bd-duo">
+      <div class="bd-lead">
+        <div class="bd-breadcrumb">
+          <nav class="breadcrumb" aria-label="breadcrumbs">
+            <ul>
+              <li>
+                <a href="{{ site.url }}">Home</a>
+              </li>
+              <li>
+                <a href="{{ site.url }}/documentation">Documentation</a>
+              </li>
+              <li>
+                <a href="{{ site.url }}/documentation/elements">Elements</a>
+              </li>
+              <li class="is-active">
+                <a href="#" aria-current="page">Button</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
+        <header class="bd-header">
+          <h1 class="title">
+            {{ page.title }}
+          </h1>
           <p class="subtitle">
-            Everything you need to <strong>create a website</strong> with Bulma
+            {{ page.subtitle }}
           </p>
-        </div>
-        <div class="column is-narrow">
-          {% include carbon.html %}
+        </header>
+
+        <div class="bd-content">
+          {{ content }}
         </div>
       </div>
-    </div>
+
+      <aside class="bd-side">
+        {% include carbon.html %}
+      </aside>
+    </aside>
   </div>
+</main>
 
-  <div class="hero-foot">
-    <div class="container">
-      <nav class="tabs is-boxed">
-        <ul>
-          <li {% if page.doc-tab == 'overview' %}class="is-active"{% endif %}>
-            <a href="{{ site.data.meta.documentation }}">Overview</a>
-          </li>
-          <li {% if page.doc-tab == 'modifiers' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/modifiers/syntax">Modifiers</a>
-          </li>
-          <li {% if page.doc-tab == 'columns' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/columns/basics">Columns</a>
-          </li>
-          <li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/layout/container/">Layout</a>
-          </li>
-          <li {% if page.doc-tab == 'form' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/form/general">Form</a>
-          </li>
-          <li {% if page.doc-tab == 'elements' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/elements/box/">Elements</a>
-          </li>
-          <li {% if page.doc-tab == 'components' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/components/breadcrumb/">Components</a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-</section>
-
-{{ content }}
-
-<section class="section bd-typo">
-  <div class="container">
-    <p class="has-text-centered has-text-grey-light">
-      <a href="{{ site.url }}/made-with-bulma/">
-        <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
-      </a>
-      <br>
-      This page is <strong class="has-text-grey">open source</strong>.
-      Noticed a typo? Or something unclear?
-      <br>
-      <a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
-        Improve this page on GitHub
-      </a>
-    </p>
-  </div>
-</section>
+{% include elements/improve-page.html %}
diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass
index 4f8eb321..6fe5ed58 100644
--- a/docs/_sass/global.sass
+++ b/docs/_sass/global.sass
@@ -3,6 +3,7 @@ svg
   max-width: 100%
 
 $carbon-space: 15px
+$carbon-width: 300px
 
 #carboncontainer
   align-items: center
@@ -10,8 +11,9 @@ $carbon-space: 15px
   justify-content: center
   margin-left: auto
   margin-right: auto
-  max-width: 340px
+  max-width: $carbon-width
   min-height: 120px + ($carbon-space * 2)
+  min-width: 280px
 
 #carbon
   flex-grow: 1
@@ -21,7 +23,7 @@ $carbon-space: 15px
   &:hover
     box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
   +tablet
-    width: 340px
+    width: $carbon-width
 
 #carbonads
   font-size: 14px
diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass
new file mode 100644
index 00000000..09a17057
--- /dev/null
+++ b/docs/_sass/main.sass
@@ -0,0 +1,64 @@
+.bd-main
+  overflow: hidden
+  position: relative
+
+// Lead
+
+.bd-lead
+  // border: 1px solid lightskyblue
+  position: relative
+
+.bd-breadcrumb
+  margin-bottom: 2.5rem
+
+.bd-header
+  margin-bottom: 2.5rem
+  .subtitle
+    color: $text-light
+    strong
+      color: currentColor
+
+// Side
+
+.bd-side,
+.bd-side-background
+  background-color: $white-bis
+  // border: 1px solid coral
+
+.bd-side
+  position: relative
+
+.bd-side-background
+  bottom: 0
+  left: 50%
+  position: absolute
+  right: 0
+  top: 0
+
++touch
+  .bd-lead,
+  .bd-side
+    padding: 1.5rem
+
++mobile
+  .bd-side-background
+    display: none
+
++tablet
+  .bd-duo
+    display: flex
+  .bd-lead
+    background-color: $white
+    overflow: hidden
+    flex-grow: 1
+    flex-shrink: 1
+  .bd-side
+    flex: 0 0 300px
+
++desktop
+  .bd-main
+    padding: 0 3rem
+  .bd-lead
+    padding: 3rem 3rem 3rem 0
+  .bd-side
+    padding: 3rem 0 3rem 1.5rem
diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index f0a7e180..f4d5b7e4 100644
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -1,3 +1,28 @@
+.bd-has-text-rss
+  color: $rss
+
+.bd-has-text-star
+  color: $star
+
+$navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)
+
+@each $name, $color in $navbar-items
+  .bd-navbar-item-#{$name}
+    .icon
+      color: $color
+    &:hover
+      background-color: $color !important
+      color: #fff !important
+      .icon
+        color: currentColor !important
+
+.bd-navbar-item-expo
+  &:hover
+    color: #744F09 !important
+    .icon
+      color: #FF7B00 !important
+
+
 .bd-special-shadow
   background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
   height: 8px
@@ -28,13 +53,13 @@
   width: 24px
 
 .button.bd-is-rss
-  background-color: #f26522
+  background-color: $rss
   border-color: transparent
   color: #fff
   &:hover
-    background-color: darken(#f26522, 5%)
+    background-color: darken($rss, 5%)
   &:active
-    background-color: darken(#f26522, 10%)
+    background-color: darken($rss, 10%)
 
 .bd-view-all-versions
   color: $text-light
diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index a4ee2fbd..c7e28d28 100644
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -9,8 +9,11 @@ $fortyfour: #5f45bb
 $amazon: #ffd863
 $bleeding-green: #ABF47C
 $bleeding-red: #CA1F26
+$star: #FFD257
+$rss: #f26522
 
 @import "../bulma"
+@import "./_sass/main"
 @import "./_sass/highlight"
 @import "./_sass/override"
 @import "./_sass/global"
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 6b3f2098..003fd5c3 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -5084,7 +5084,7 @@ a.tag:hover {
   color: #3273dc;
   display: flex;
   justify-content: center;
-  padding: 0.5em 0.75em;
+  padding: 0 0.75em;
 }
 
 .breadcrumb a:hover {
@@ -5848,6 +5848,7 @@ a.dropdown-item.is-active {
   box-shadow: 0 2px 0 0 whitesmoke;
   min-height: 3.25rem;
   position: relative;
+  z-index: 30;
 }
 
 .navbar.is-white {
@@ -9491,6 +9492,88 @@ label.panel-block:hover {
   padding: 3rem 1.5rem 6rem;
 }
 
+.bd-main {
+  overflow: hidden;
+  position: relative;
+}
+
+.bd-lead {
+  position: relative;
+}
+
+.bd-breadcrumb {
+  margin-bottom: 2.5rem;
+}
+
+.bd-header {
+  margin-bottom: 2.5rem;
+}
+
+.bd-header .subtitle {
+  color: #7a7a7a;
+}
+
+.bd-header .subtitle strong {
+  color: currentColor;
+}
+
+.bd-side,
+.bd-side-background {
+  background-color: #fafafa;
+}
+
+.bd-side {
+  position: relative;
+}
+
+.bd-side-background {
+  bottom: 0;
+  left: 50%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+@media screen and (max-width: 1023px) {
+  .bd-lead,
+  .bd-side {
+    padding: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .bd-side-background {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .bd-duo {
+    display: flex;
+  }
+  .bd-lead {
+    background-color: white;
+    overflow: hidden;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .bd-side {
+    flex: 0 0 300px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .bd-main {
+    padding: 0 3rem;
+  }
+  .bd-lead {
+    padding: 3rem 3rem 3rem 0;
+  }
+  .bd-side {
+    padding: 3rem 0 3rem 1.5rem;
+  }
+}
+
 .highlight {
   background-color: #f5f5f5;
   color: #586e75;
@@ -9770,8 +9853,9 @@ svg {
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
-  max-width: 340px;
+  max-width: 300px;
   min-height: 150px;
+  min-width: 280px;
 }
 
 #carbon {
@@ -9787,7 +9871,7 @@ svg {
 
 @media screen and (min-width: 769px), print {
   #carbon {
-    width: 340px;
+    width: 300px;
   }
 }
 
@@ -10282,6 +10366,100 @@ svg {
   text-decoration: underline;
 }
 
+.bd-has-text-rss {
+  color: #f26522;
+}
+
+.bd-has-text-star {
+  color: #FFD257;
+}
+
+.bd-navbar-item-documentation .icon {
+  color: #00d1b2;
+}
+
+.bd-navbar-item-documentation:hover {
+  background-color: #00d1b2 !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-documentation:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-templates .icon {
+  color: #209cee;
+}
+
+.bd-navbar-item-templates:hover {
+  background-color: #209cee !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-templates:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-videos .icon {
+  color: #23d160;
+}
+
+.bd-navbar-item-videos:hover {
+  background-color: #23d160 !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-videos:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-blog .icon {
+  color: #f26522;
+}
+
+.bd-navbar-item-blog:hover {
+  background-color: #f26522 !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-blog:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-expo .icon {
+  color: #FFD257;
+}
+
+.bd-navbar-item-expo:hover {
+  background-color: #FFD257 !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-expo:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-love .icon {
+  color: #ff3860;
+}
+
+.bd-navbar-item-love:hover {
+  background-color: #ff3860 !important;
+  color: #fff !important;
+}
+
+.bd-navbar-item-love:hover .icon {
+  color: currentColor !important;
+}
+
+.bd-navbar-item-expo:hover {
+  color: #744F09 !important;
+}
+
+.bd-navbar-item-expo:hover .icon {
+  color: #FF7B00 !important;
+}
+
 .bd-special-shadow {
   background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
   height: 8px;
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index fa1c3d54..47989a99 100644
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -1,8 +1,13 @@
 ---
 title: Button
+subtitle: "The classic <strong>button</strong>, in different colors, sizes, and states"
 layout: documentation
 doc-tab: elements
 doc-subtab: button
+meta:
+- colors: true
+- sizes: true
+- variables: true
 ---
 
 {% capture button_example %}
@@ -448,342 +453,322 @@ doc-subtab: button
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+<div class="content">
+  <p>
+    The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an <strong>interactive</strong> element of your page.
+  </p>
+</div>
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Buttons</h1>
-    <h2 class="subtitle">
-      The classic <strong>button</strong>, in different colors, sizes, and states
-    </h2>
-    {%
-      include meta.html
-      colors=true
-      sizes=true
-      variables=true
-    %}
+{% include snippet.html content=button_example %}
 
-    <hr>
+<div class="content">
+  <p>
+    The <code>.button</code> class can be used on:
+  </p>
+  <ul>
+    <li>
+      <code>&lt;a&gt;</code> anchor links
+    </li>
+    <li>
+      <code>&lt;button&gt;</code> form buttons
+    </li>
+    <li>
+      <code>&lt;input type="submit"&gt;</code> submit inputs
+    </li>
+    <li>
+      <code>&lt;input type="reset"&gt;</code> reset inputs
+    </li>
+  </ul>
+</div>
 
+{% include snippet.html content=button_tags_example %}
+
+{% include anchor.html name="Colors" %}
+
+{% include snippet.html content=button_colors_a_example %}
+
+{% include snippet.html content=button_colors_b_example %}
+
+{% include anchor.html name="Sizes" %}
+
+{% include snippet.html content=button_sizes_example %}
+
+{% include anchor.html name="Styles" %}
+
+<h4 class="subtitle">Outlined</h4>
+
+{% include snippet.html content=button_outlined_example %}
+
+<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
+
+<div class="columns">
+  <div class="column">
+    <div class="bd-callout is-primary">
+      {{button_inverted_example}}
+    </div>
+  </div>
+  <div class="column">
+    {% highlight html %}{{button_inverted_example}}{% endhighlight %}
+  </div>
+</div>
+
+<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
+
+<div class="columns">
+  <div class="column">
+    <div class="bd-callout is-primary">
+      {{button_inverted_outlined_example}}
+    </div>
+  </div>
+  <div class="column">
+    {% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %}
+  </div>
+</div>
+
+<h4 class="subtitle">Rounded buttons</h4>
+
+<div class="columns">
+  <div class="column">
+    {% include elements/new-tag.html version="0.6.2" %}
+    {{ button_rounded_example }}
+  </div>
+  <div class="column">
+    {% highlight html %}{{ button_rounded_example }}{% endhighlight %}
+  </div>
+</div>
+
+{% include anchor.html name="States" %}
+
+<h4 class="subtitle">Normal</h4>
+
+{% include snippet.html content=button_normal_example %}
+
+<h4 class="subtitle">Hover</h4>
+
+{% include snippet.html content=button_hover_example %}
+
+<h4 class="subtitle">Focus</h4>
+
+{% include snippet.html content=button_focus_example %}
+
+<h4 class="subtitle">Active</h4>
+
+{% include snippet.html content=button_active_example %}
+
+<h4 class="subtitle">Loading</h4>
+
+<div class="columns">
+  <div class="column">
+    <div class="block">
+      {{button_loading_example}}
+    </div>
+    <div class="message is-info">
+      <div class="message-body">
+        <p>
+          Since the loading spinner is implemented using the <code>:after</code> pseudo-element, it is not supported by the <code>&lt;input type="submit"&gt;</code> element.
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="column">
+    {% highlight html %}{{button_loading_example}}{% endhighlight %}
+  </div>
+</div>
+
+<h4 id="static-button" class="subtitle">
+  Static
+</h4>
+
+<div class="columns">
+  <div class="column">
     <div class="content">
       <p>
-        The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an <strong>interactive</strong> element of your page.
+        You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
       </p>
     </div>
+    {{button_static_example}}
+  </div>
+  <div class="column">
+    {% highlight html %}{{button_static_example}}{% endhighlight %}
+  </div>
+</div>
 
-    {% include snippet.html content=button_example %}
+<h4 class="subtitle">Disabled</h4>
 
+<div class="columns">
+  <div class="column">
+    <div class="block">
+      {{button_disabled_example}}
+    </div>
+    <div class="message is-danger">
+      <div class="message-body">
+        <p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
+      </div>
+    </div>
+  </div>
+  <div class="column">
+    {% highlight html %}{{button_disabled_example}}{% endhighlight %}
+  </div>
+</div>
+
+<h4 class="subtitle">With Font Awesome icons</h4>
+
+{% include snippet.html content=button_fa_example clipped=true %}
+
+<div class="columns">
+  <div class="column">
     <div class="content">
       <p>
-        The <code>.button</code> class can be used on:
+        If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
+      </p>
+    </div>
+    {{button_only_icon_example}}
+  </div>
+  <div class="column">
+    {% highlight html %}{{button_only_icon_example}}{% endhighlight %}
+  </div>
+</div>
+
+{% include anchor.html name="Button group" %}
+
+<div class="content">
+  <p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
+</div>
+
+{% include snippet.html content=button_group_example %}
+
+{% include anchor.html name="Button addons" %}
+
+<div class="content">
+  <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
+</div>
+
+{% include snippet.html content=button_addons_example %}
+
+{% include anchor.html name="Button group with addons" %}
+
+<div class="content">
+  <p>You can group together addons as well:</p>
+</div>
+
+{% include snippet.html content=button_group_addons_example %}
+
+{% include anchor.html name="List of buttons" %}
+
+{% include elements/new-tag.html version="0.6.1" %}
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        You can now create a <strong>list of buttons</strong> with the <code>.buttons</code> container.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ buttons }}
+    </div>
+  </div>
+  <div class="column">
+    {% highlight html %}{{ buttons }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all buttons <strong>evenly spaced</strong>.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ buttons_multiple }}
+    </div>
+  </div>
+  <div class="column highlight-full">
+    {% highlight html %}{{ buttons_multiple }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        You can <strong>attach buttons together</strong> with the <code>.has-addons</code> modifier.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ buttons_addons }}
+    </div>
+  </div>
+  <div class="column highlight-full">
+    {% highlight html %}{{ buttons_addons }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        Use the <code>is-centered</code> or the <code>is-right</code> modifiers to alter the <strong>alignment</strong>.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ buttons_addons_centered }}
+      {{ buttons_addons_right }}
+    </div>
+  </div>
+  <div class="column highlight-full">
+    {% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the <code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ buttons_addons_selected }}
+    </div>
+  </div>
+  <div class="column highlight-full">
+    {% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="message is-info">
+  <div class="message-header">
+    <p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p>
+  </div>
+  <div class="message-body">
+    <div class="content">
+      <p>
+        While this list of buttons style can be achieved with either <code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
       </p>
       <ul>
         <li>
-          <code>&lt;a&gt;</code> anchor links
+          <code>buttons</code> has a <strong>simpler markup</strong>
         </li>
         <li>
-          <code>&lt;button&gt;</code> form buttons
+          <code>buttons</code> can only contain <code>button</code> elements
         </li>
         <li>
-          <code>&lt;input type="submit"&gt;</code> submit inputs
+          <code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs
         </li>
         <li>
-          <code>&lt;input type="reset"&gt;</code> reset inputs
+          <code>field is-grouped</code> can be forced to fit all controls on a <strong>single line</strong>
+        </li>
+        <li>
+          with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls
         </li>
       </ul>
+      <p>
+        Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need more control on the styling and the elements, use a <a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
+      </p>
     </div>
-
-    {% include snippet.html content=button_tags_example %}
-
-    {% include anchor.html name="Colors" %}
-
-    {% include snippet.html content=button_colors_a_example %}
-
-    {% include snippet.html content=button_colors_b_example %}
-
-    {% include anchor.html name="Sizes" %}
-
-    {% include snippet.html content=button_sizes_example %}
-
-    {% include anchor.html name="Styles" %}
-
-    <h4 class="subtitle">Outlined</h4>
-
-    {% include snippet.html content=button_outlined_example %}
-
-    <h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
-
-    <div class="columns">
-      <div class="column">
-        <div class="bd-callout is-primary">
-          {{button_inverted_example}}
-        </div>
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_inverted_example}}{% endhighlight %}
-      </div>
-    </div>
-
-    <h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
-
-    <div class="columns">
-      <div class="column">
-        <div class="bd-callout is-primary">
-          {{button_inverted_outlined_example}}
-        </div>
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %}
-      </div>
-    </div>
-
-    <h4 class="subtitle">Rounded buttons</h4>
-
-    <div class="columns">
-      <div class="column">
-        {% include elements/new-tag.html version="0.6.2" %}
-        {{ button_rounded_example }}
-      </div>
-      <div class="column">
-        {% highlight html %}{{ button_rounded_example }}{% endhighlight %}
-      </div>
-    </div>
-
-    {% include anchor.html name="States" %}
-
-    <h4 class="subtitle">Normal</h4>
-
-    {% include snippet.html content=button_normal_example %}
-
-    <h4 class="subtitle">Hover</h4>
-
-    {% include snippet.html content=button_hover_example %}
-
-    <h4 class="subtitle">Focus</h4>
-
-    {% include snippet.html content=button_focus_example %}
-
-    <h4 class="subtitle">Active</h4>
-
-    {% include snippet.html content=button_active_example %}
-
-    <h4 class="subtitle">Loading</h4>
-
-    <div class="columns">
-      <div class="column">
-        <div class="block">
-          {{button_loading_example}}
-        </div>
-        <div class="message is-info">
-          <div class="message-body">
-            <p>
-              Since the loading spinner is implemented using the <code>:after</code> pseudo-element, it is not supported by the <code>&lt;input type="submit"&gt;</code> element.
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_loading_example}}{% endhighlight %}
-      </div>
-    </div>
-
-    <h4 id="static-button" class="subtitle">
-      Static
-    </h4>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
-          </p>
-        </div>
-        {{button_static_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_static_example}}{% endhighlight %}
-      </div>
-    </div>
-
-    <h4 class="subtitle">Disabled</h4>
-
-    <div class="columns">
-      <div class="column">
-        <div class="block">
-          {{button_disabled_example}}
-        </div>
-        <div class="message is-danger">
-          <div class="message-body">
-            <p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
-          </div>
-        </div>
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_disabled_example}}{% endhighlight %}
-      </div>
-    </div>
-
-    <h4 class="subtitle">With Font Awesome icons</h4>
-
-    {% include snippet.html content=button_fa_example clipped=true %}
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
-          </p>
-        </div>
-        {{button_only_icon_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_only_icon_example}}{% endhighlight %}
-      </div>
-    </div>
-
-    {% include anchor.html name="Button group" %}
-
-    <div class="content">
-      <p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
-    </div>
-
-    {% include snippet.html content=button_group_example %}
-
-    {% include anchor.html name="Button addons" %}
-
-    <div class="content">
-      <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
-    </div>
-
-    {% include snippet.html content=button_addons_example %}
-
-    {% include anchor.html name="Button group with addons" %}
-
-    <div class="content">
-      <p>You can group together addons as well:</p>
-    </div>
-
-    {% include snippet.html content=button_group_addons_example %}
-
-    {% include anchor.html name="List of buttons" %}
-
-    {% include elements/new-tag.html version="0.6.1" %}
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            You can now create a <strong>list of buttons</strong> with the <code>.buttons</code> container.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ buttons }}
-        </div>
-      </div>
-      <div class="column">
-        {% highlight html %}{{ buttons }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all buttons <strong>evenly spaced</strong>.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ buttons_multiple }}
-        </div>
-      </div>
-      <div class="column highlight-full">
-        {% highlight html %}{{ buttons_multiple }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            You can <strong>attach buttons together</strong> with the <code>.has-addons</code> modifier.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ buttons_addons }}
-        </div>
-      </div>
-      <div class="column highlight-full">
-        {% highlight html %}{{ buttons_addons }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            Use the <code>is-centered</code> or the <code>is-right</code> modifiers to alter the <strong>alignment</strong>.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ buttons_addons_centered }}
-          {{ buttons_addons_right }}
-        </div>
-      </div>
-      <div class="column highlight-full">
-        {% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the <code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ buttons_addons_selected }}
-        </div>
-      </div>
-      <div class="column highlight-full">
-        {% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="message is-info">
-      <div class="message-header">
-        <p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p>
-      </div>
-      <div class="message-body">
-        <div class="content">
-          <p>
-            While this list of buttons style can be achieved with either <code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
-          </p>
-          <ul>
-            <li>
-              <code>buttons</code> has a <strong>simpler markup</strong>
-            </li>
-            <li>
-              <code>buttons</code> can only contain <code>button</code> elements
-            </li>
-            <li>
-              <code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs
-            </li>
-            <li>
-              <code>field is-grouped</code> can be forced to fit all controls on a <strong>single line</strong>
-            </li>
-            <li>
-              with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls
-            </li>
-          </ul>
-          <p>
-            Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need more control on the styling and the elements, use a <a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
-          </p>
-        </div>
-      </div>
-    </div>
-
-    {% include variables.html type='element' %}
-
   </div>
-</section>
+</div>
+
+{% include variables.html type='element' %}
diff --git a/docs/index.html b/docs/index.html
index 3f9765a5..57ce2caa 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,7 +4,7 @@ route: index
 fixed_navbar: true
 ---
 
-{% include navbar.html id="Index" fixed=true has_container=true boxed=true transparent=true hide_fortyfour=true %}
+{% include navbar.html id="Index" %}
 
 {% include index/intro.html %}
 
diff --git a/docs/lib/main.js b/docs/lib/main.js
index e4ae35b2..4063ee49 100644
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -287,22 +287,22 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
-  translateHeader(window.scrollY, false);
+  // translateHeader(window.scrollY, false);
 
   var ticking = false;
   var lastY = 0;
 
-  window.addEventListener('scroll', function () {
-    var currentY = window.scrollY;
+  // window.addEventListener('scroll', function() {
+  //   const currentY = window.scrollY;
 
-    if (!ticking) {
-      window.requestAnimationFrame(function () {
-        upOrDown(lastY, currentY);
-        ticking = false;
-        lastY = currentY;
-      });
-    }
+  //   if (!ticking) {
+  //     window.requestAnimationFrame(function() {
+  //       upOrDown(lastY, currentY);
+  //       ticking = false;
+  //       lastY = currentY;
+  //     });
+  //   }
 
-    ticking = true;
-  });
+  //   ticking = true;
+  // });
 });
\ No newline at end of file
diff --git a/sass/components/breadcrumb.sass b/sass/components/breadcrumb.sass
index 5cf37297..57bb2de2 100644
--- a/sass/components/breadcrumb.sass
+++ b/sass/components/breadcrumb.sass
@@ -2,6 +2,9 @@ $breadcrumb-item-color: $link !default
 $breadcrumb-item-hover-color: $link-hover !default
 $breadcrumb-item-active-color: $text-strong !default
 
+$breadcrumb-item-padding-vertical: 0 !default
+$breadcrumb-item-padding-horizontal: 0.75em !default
+
 $breadcrumb-item-separator-color: $text !default
 
 .breadcrumb
@@ -18,7 +21,7 @@ $breadcrumb-item-separator-color: $text !default
     color: $breadcrumb-item-color
     display: flex
     justify-content: center
-    padding: 0.5em 0.75em
+    padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
     &:hover
       color: $breadcrumb-item-hover-color
   li
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 3e539fa2..eaeaba37 100644
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -1,5 +1,6 @@
 $navbar-background-color: $white !default
 $navbar-height: 3.25rem !default
+$navbar-z: 30 !default
 $navbar-fixed-z: 30 !default
 
 $navbar-item-color: $grey-dark !default
@@ -45,6 +46,7 @@ $navbar-divider-background-color: $border !default
   box-shadow: 0 2px 0 0 $background
   min-height: $navbar-height
   position: relative
+  z-index: $navbar-z
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)