Update overview

docs/_data/links.json

@@ -8,6 +8,42 @@
       "name": "Documentation",
       "path": "/documentation"
     },
+    "overview": {
+      "name": "Overview",
+      "path": "/documentation/overview"
+    },
+    "overview-start": {
+      "name": "Start",
+      "path": "/documentation/overview/start"
+    },
+    "overview-classes": {
+      "name": "Classes",
+      "path": "/documentation/overview/classes"
+    },
+    "overview-modular": {
+      "name": "Modular",
+      "path": "/documentation/overview/modular"
+    },
+    "overview-responsiveness": {
+      "name": "Responsiveness",
+      "path": "/documentation/overview/responsiveness"
+    },
+    "overview-variables": {
+      "name": "Variables",
+      "path": "/documentation/overview/variables"
+    },
+    "overview-colors": {
+      "name": "Colors",
+      "path": "/documentation/overview/colors"
+    },
+    "overview-functions": {
+      "name": "Functions",
+      "path": "/documentation/overview/functions"
+    },
+    "overview-mixins": {
+      "name": "Mixins",
+      "path": "/documentation/overview/mixins"
+    },
     "modifiers": {
       "name": "Modifiers",
       "path": "/documentation/modifiers"
@@ -214,6 +250,7 @@
     }
   },
   "order": {
+    "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
     "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
     "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],

docs/_sass/main.sass

@@ -77,6 +77,8 @@ $main-spacing: 2.5rem
   .bd-side-background
     display: none
 
+$sidebar-width: 16rem
+
 +tablet
   .bd-duo
     display: flex
@@ -88,7 +90,7 @@ $main-spacing: 2.5rem
   .bd-prev-next
     display: flex
   .bd-side
-    flex: 0 0 calc(#{$carbon-width} + 1.5rem)
+    flex: 0 0 calc(#{$sidebar-width} + 1.5rem)
 
 +desktop
   .bd-main
@@ -97,14 +99,16 @@ $main-spacing: 2.5rem
     margin-left: -3rem
     padding: 3rem
   .bd-header
+    align-items: center
     display: flex
+    min-height: 130px
   .bd-header-titles
     flex-grow: 1
     flex-shrink: 1
   .bd-header-carbon
     flex-grow: 0
     flex-shrink: 0
-    margin-left: 1.5rem
+    margin: -15px 0 -15px 1.5rem
     width: $carbon-width
   .bd-side
     padding: 3rem 0 3rem 1.5rem

docs/css/bulma-docs.css

@@ -9600,7 +9600,7 @@ label.panel-block:hover {
     display: flex;
   }
   .bd-side {
-    flex: 0 0 calc(300px + 1.5rem);
+    flex: 0 0 calc(16rem + 1.5rem);
   }
 }
 
@@ -9613,7 +9613,9 @@ label.panel-block:hover {
     padding: 3rem;
   }
   .bd-header {
+    align-items: center;
     display: flex;
+    min-height: 130px;
   }
   .bd-header-titles {
     flex-grow: 1;
@@ -9622,7 +9624,7 @@ label.panel-block:hover {
   .bd-header-carbon {
     flex-grow: 0;
     flex-shrink: 0;
-    margin-left: 1.5rem;
+    margin: -15px 0 -15px 1.5rem;
     width: 300px;
   }
   .bd-side {

docs/documentation/overview/classes.html

@@ -1,19 +1,16 @@
 ---
 title: CSS classes
+subtitle: "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want."
 layout: documentation
 doc-tab: overview
 doc-subtab: classes
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-classes
 ---
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Classes</h1>
-    <h2 class="subtitle">Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.</h2>
-
-    <hr>
-
 <div class="content">
   <p>
     Bulma is a <strong>CSS</strong> framework, meaning that the end result is simply a <strong>single</strong> <code>.css</code> file:
@@ -34,5 +31,3 @@ doc-subtab: classes
     </li>
   </ul>
 </div>
-  </div>
-</section>

docs/documentation/overview/colors.html

@@ -1,8 +1,14 @@
 ---
 title: Colors
+subtitle: "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components"
 layout: documentation
 doc-tab: overview
 doc-subtab: colors
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-colors
 colors:
 - white
 - black
@@ -25,15 +31,6 @@ shades:
 - white-bis
 ---
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Colors</h1>
-    <h2 class="subtitle">The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components</h2>
-
-    <hr>
-
 <div class="content">
   <p>
     Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
@@ -123,5 +120,3 @@ shades:
     {% endfor %}
   </tbody>
 </table>
-  </div>
-</section>

docs/documentation/overview/customize.html

@@ -1,8 +1,14 @@
 ---
-title: Customize Bulma
+title: Customize Bulma with Sass
+subtitle: "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>"
 layout: documentation
 doc-tab: overview
 doc-subtab: customize
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-customize
 ---
 
 {% capture scss_code %}
@@ -49,15 +55,6 @@ $colors: map-merge($colors, $addColors);
 @import "../bulma";
 {% endcapture %}
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Customizing with Sass</h1>
-    <h2 class="subtitle">Create your <strong>own theme</strong> with a simple set of <strong>variables</strong></h2>
-
-    <hr>
-
 <div class="content">
   <p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
 </div>
@@ -109,5 +106,3 @@ $colors: map-merge($colors, $addColors);
     </figure>
   </div>
 </article>
-  </div>
-</section>

docs/documentation/overview/functions.html

@@ -1,19 +1,16 @@
 ---
 title: Functions
+subtitle: "Utility functions to calculate colors and other values"
 layout: documentation
 doc-tab: overview
 doc-subtab: functions
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-functions
 ---
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Functions</h1>
-    <h2 class="subtitle">Utility functions to calculate colors and other values</h2>
-
-    <hr>
-
 <div class="content">
   <p>Bulma uses 3 custom functions to help define the values and colors dynamically:</p>
   <ul>
@@ -232,5 +229,3 @@ doc-subtab: functions
     </tbody>
   </table>
 </div>
-  </div>
-</section>

docs/documentation/overview/mixins.html

@@ -1,19 +1,16 @@
 ---
 title: Mixins
+subtitle: "Utility mixins for custom elements and responsive helpers"
 layout: documentation
 doc-tab: overview
 doc-subtab: mixins
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-mixins
 ---
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Mixins</h1>
-    <h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
-
-    <hr>
-
 <table class="table is-bordered">
   <tr>
     <td><code>=arrow($color)</code></td>
@@ -68,5 +65,3 @@ doc-subtab: mixins
 <div class="content">
   <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
 </div>
-  </div>
-</section>

docs/documentation/overview/modular.html

@@ -1,18 +1,53 @@
 ---
 title: Modularity
+subtitle: "Just import what you <strong>need</strong>"
 layout: documentation
 doc-tab: overview
 doc-subtab: modular
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-modular
 ---
 
-{% include subnav/subnav-overview.html %}
+{% capture import %}
+@import "bulma/sass/utilities/_all"
+@import "bulma/sass/grid/columns"
+{% endcapture %}
 
-<section class="section">
+{% capture columns %}
-  <div class="container">
+<div class="columns">
-    <h1 class="title">Modular</h1>
+  <div class="column">1</div>
-    <h2 class="subtitle">Just import what you <strong>need</strong></h2>
+  <div class="column">2</div>
+  <div class="column">3</div>
+  <div class="column">4</div>
+  <div class="column">5</div>
+</div>
+{% endcapture %}
 
-    <hr>
+{% capture only_button %}
+@import "bulma/sass/utilities/_all"
+@import "bulma/sass/elements/button.sass"
+{% endcapture %}
+
+{% capture buttons %}
+<a class="button">
+  Button
+</a>
+
+<a class="button is-primary">
+  Primary button
+</a>
+
+<a class="button is-large">
+  Large button
+</a>
+
+<a class="button is-loading">
+  Loading button
+</a>
+{% endcapture %}
 
 <div class="content">
   <p>
@@ -25,32 +60,18 @@ doc-subtab: modular
     <br>
     Simply <strong>import</strong> the utilities dependencies, and then the files you need directly:
   </p>
-{% highlight sass %}
+  {% highlight sass %}{{ import }}{% endhighlight %}
-@import "bulma/sass/utilities/_all"
-@import "bulma/sass/grid/columns"
-{% endhighlight %}
   <p>
     Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
   </p>
-{% highlight html %}
+  {% highlight html %}{{ columns }}{% endhighlight %}
-<div class="columns">
-  <div class="column">1</div>
-  <div class="column">2</div>
-  <div class="column">3</div>
-  <div class="column">4</div>
-  <div class="column">5</div>
-</div>
-{% endhighlight %}
 
   <hr>
 
   <p>
     What if you only want the <strong>button</strong> styles instead?
   </p>
-{% highlight sass %}
+  {% highlight sass %}{{ only_button }}{% endhighlight %}
-@import "bulma/sass/utilities/_all"
-@import "bulma/sass/elements/button.sass"
-{% endhighlight %}
   <p>
     You can now use the <code>.button</code> class, and all its modifiers:
   </p>
@@ -78,23 +99,5 @@ doc-subtab: modular
       <code>[disabled]</code>
     </li>
   </ul>
-{% highlight html %}
+  {% highlight html %}{{ buttons }}{% endhighlight %}
-<a class="button">
-  Button
-</a>
-
-<a class="button is-primary">
-  Primary button
-</a>
-
-<a class="button is-large">
-  Large button
-</a>
-
-<a class="button is-loading">
-  Loading button
-</a>
-{% endhighlight %}
 </div>
-  </div>
-</section>

docs/documentation/overview/responsiveness.html

@@ -1,8 +1,14 @@
 ---
 title: Responsiveness
+subtitle: "Bulma is a <strong>mobile-first</strong> framework"
 layout: documentation
 doc-tab: overview
 doc-subtab: responsiveness
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-responsiveness
 variables_keys:
 - gap
 - tablet
@@ -19,13 +25,6 @@ $widescreen-enabled: false
 $fullhd-enabled: false
 {% endcapture %}
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Responsiveness</h1>
-    <h2 class="subtitle">Bulma is a <strong>mobile-first</strong> framework</h2>
-
 {% include anchor.html name="Vertical by default" %}
 
 <div class="content">
@@ -257,6 +256,3 @@ $fullhd-enabled: false
     {% endfor %}
   </tbody>
 </table>
-
-  </div>
-</section>

docs/documentation/overview/start.html

@@ -1,19 +1,16 @@
 ---
-title: Get started with Bulma
+title: Getting started with Bulma
+subtitle: "You only need <strong>1 CSS file</strong> to use Bulma"
 layout: documentation
 doc-tab: overview
 doc-subtab: start
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-start
 ---
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Getting started</h1>
-    <h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
-
-    <hr>
-
 <div class="content">
   <p>
     There are several ways to <strong>get started</strong> with Bulma. You can either:
@@ -135,6 +132,3 @@ doc-subtab: start
     <a class="button is-link" href="/bulma-start/">Check it out</a>
   </p>
 </div>
-
-  </div>
-</section>

docs/documentation/overview/variables.html

@@ -1,19 +1,16 @@
 ---
 title: Variables
+subtitle: "Easily <strong>customize</strong> Bulma to match your design"
 layout: documentation
 doc-tab: overview
 doc-subtab: variables
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-variables
 ---
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Variables</h1>
-    <h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
-
-    <hr>
-
 {% assign initial_variables = site.data.variables.utilities.initial-variables %}
 {% assign initial_vars      = initial_variables.vars %}
 {% assign derived_variables = site.data.variables.utilities.derived-variables %}
@@ -116,6 +113,3 @@ doc-subtab: variables
     custom_message = custom_message
     table_class    = 'is-bordered is-striped'
 %}
-
-  </div>
-</section>