Add documentation tabs

docs/_data/links.json

@@ -17,7 +17,7 @@
       "path": "/documentation/overview"
     },
     "overview-start": {
-      "name": "Getting started",
+      "name": "Start",
       "subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
       "color": "danger",
       "icon": "rocket",
@@ -31,7 +31,7 @@
       "path": "/documentation/overview/customize"
     },
     "overview-classes": {
-      "name": "CSS Classes",
+      "name": "Classes",
       "subtitle": "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.",
       "color": "link",
       "icon_brand": "true",

docs/_layouts/documentation.html

@@ -61,6 +61,25 @@ route: documentation
           </div>
         </header>
 
+        {% if page.hide_tabs %}
+          <hr style="margin: 0 0 3rem;">
+        {% else %}
+          <nav class="bd-tabs">
+            <div class="tabs">
+              <ul>
+                {% for link_id in category_links %}
+                  {% assign link = site.data.links.by_id[link_id] %}
+                  <li {% if link_id == current_link_id %}class="is-active"{% endif %}>
+                    <a href="{{ site.url }}{{ link.path }}">
+                      {{ link.name }}
+                    </a>
+                  </li>
+                {% endfor %}
+              </ul>
+            </div>
+          </nav>
+        {% endif %}
+
         <div class="bd-content">
           {{ content }}
         </div>

docs/_sass/main.sass

@@ -45,9 +45,7 @@
   margin-left: auto
 
 .bd-header
-  border-bottom: 2px solid $background
   margin-bottom: $main-spacing
-  padding-bottom: $main-spacing
   .subtitle
     color: $text-light
     strong
@@ -55,6 +53,22 @@
   #meta
     margin-top: -0.5rem
 
+.bd-tabs
+  margin-bottom: $main-spacing
+  .tabs
+    overflow: visible
+    ul,
+    a
+      border-bottom-color: $white-ter
+      border-bottom-width: 2px
+    ul
+      flex-wrap: wrap
+      max-width: 100%
+    a
+      margin-bottom: -2px
+    li:not(.is-active) a:hover
+        border-bottom-color: $border
+
 .bd-content
   hr:first-child
     display: none
@@ -195,7 +209,7 @@
   .bd-header
     align-items: center
     display: flex
-    min-height: 130px
+    min-height: 140px
   .bd-header-titles
     flex-grow: 1
     flex-shrink: 1

docs/bulma-docs.sass

@@ -22,7 +22,7 @@ $carbon-width: 300px
 $carbon-height: 100px
 $main-spacing: 3rem
 $intro-width: 1080px
-$sidebar-width: 14rem
+$sidebar-width: 10.5rem
 
 @import "../bulma"
 

docs/css/bulma-docs.css

@@ -10246,9 +10246,7 @@ label.panel-block:hover {
 }
 
 .bd-header {
-  border-bottom: 2px solid whitesmoke;
   margin-bottom: 3rem;
-  padding-bottom: 3rem;
 }
 
 .bd-header .subtitle {
@@ -10263,6 +10261,33 @@ label.panel-block:hover {
   margin-top: -0.5rem;
 }
 
+.bd-tabs {
+  margin-bottom: 3rem;
+}
+
+.bd-tabs .tabs {
+  overflow: visible;
+}
+
+.bd-tabs .tabs ul,
+.bd-tabs .tabs a {
+  border-bottom-color: whitesmoke;
+  border-bottom-width: 2px;
+}
+
+.bd-tabs .tabs ul {
+  flex-wrap: wrap;
+  max-width: 100%;
+}
+
+.bd-tabs .tabs a {
+  margin-bottom: -2px;
+}
+
+.bd-tabs .tabs li:not(.is-active) a:hover {
+  border-bottom-color: #dbdbdb;
+}
+
 .bd-content hr:first-child {
   display: none;
 }
@@ -10370,7 +10395,7 @@ label.panel-block:hover {
 
 .bd-anchors {
   display: none;
-  max-width: 14rem;
+  max-width: 10.5rem;
   padding-top: calc(1.5rem - 1px);
 }
 
@@ -10429,7 +10454,7 @@ label.panel-block:hover {
     display: flex;
   }
   .bd-side {
-    flex: 0 0 calc(14rem + 1.5rem);
+    flex: 0 0 calc(10.5rem + 1.5rem);
   }
 }
 
@@ -10447,7 +10472,7 @@ label.panel-block:hover {
   .bd-header {
     align-items: center;
     display: flex;
-    min-height: 130px;
+    min-height: 140px;
   }
   .bd-header-titles {
     flex-grow: 1;

docs/documentation/columns.html

@@ -2,6 +2,7 @@
 title: Columns
 layout: documentation
 doc-tab: columns
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

docs/documentation/components.html

@@ -2,6 +2,7 @@
 title: Components
 layout: documentation
 doc-tab: components
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

docs/documentation/elements.html

@@ -2,6 +2,7 @@
 title: Elements
 layout: documentation
 doc-tab: elements
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

docs/documentation/form.html

@@ -2,6 +2,7 @@
 title: Form
 layout: documentation
 doc-tab: form
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

docs/documentation/layout.html

@@ -2,6 +2,7 @@
 title: Layout
 layout: documentation
 doc-tab: layout
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

docs/documentation/modifiers.html

@@ -2,6 +2,7 @@
 title: Modifiers
 layout: documentation
 doc-tab: modifiers
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

docs/documentation/overview.html

@@ -2,6 +2,7 @@
 title: Overview
 layout: documentation
 doc-tab: overview
+hide_tabs: true
 breadcrumb:
 - home
 - documentation