Top-level pages

docs/documentation/columns.html

@@ -0,0 +1,11 @@
+---
+title: Columns
+layout: documentation
+doc-tab: columns
+breadcrumb:
+- home
+- documentation
+- columns
+---
+
+{% include components/links.html category_id='columns' %}

docs/documentation/components.html

@@ -0,0 +1,11 @@
+---
+title: Components
+layout: documentation
+doc-tab: components
+breadcrumb:
+- home
+- documentation
+- components
+---
+
+{% include components/links.html category_id='components' %}

docs/documentation/elements.html

@@ -0,0 +1,11 @@
+---
+title: Elements
+layout: documentation
+doc-tab: elements
+breadcrumb:
+- home
+- documentation
+- elements
+---
+
+{% include components/links.html category_id='elements' %}

docs/documentation/form.html

@@ -1,9 +1,11 @@
 ---
 title: Form
-subtitle: "All <strong>form controls</strong>"
 layout: documentation
+doc-tab: form
 breadcrumb:
 - home
 - documentation
 - form
 ---
+
+{% include components/links.html category_id='form' %}

docs/documentation/modifiers.html

@@ -0,0 +1,11 @@
+---
+title: Modifiers
+layout: documentation
+doc-tab: modifiers
+breadcrumb:
+- home
+- documentation
+- modifiers
+---
+
+{% include components/links.html category_id='modifiers' %}

docs/documentation/modifiers/typography-helpers.html

@@ -2,6 +2,7 @@
 title: Typography helpers
 subtitle: "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width"
 layout: documentation
+hide_categories: true
 doc-tab: modifiers
 doc-subtab: typography-helpers
 breadcrumb:
@@ -96,7 +97,7 @@ breadcrumb:
   </p>
 </div>
 
-{% include layout/main-close.html %}
+{% include layout/main-close.html show_categories=true %}
 
 <div class="container">
   <div class="table-container">

docs/documentation/overview.html

@@ -0,0 +1,11 @@
+---
+title: Overview
+layout: documentation
+doc-tab: overview
+breadcrumb:
+- home
+- documentation
+- overview
+---
+
+{% include components/links.html category_id='overview' %}

docs/documentation/overview/classes.html

@@ -1,6 +1,5 @@
 ---
 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

docs/documentation/overview/colors.html

@@ -1,6 +1,5 @@
 ---
 title: Colors
-subtitle: "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components"
 layout: documentation
 doc-tab: overview
 doc-subtab: colors

docs/documentation/overview/customize.html

@@ -1,6 +1,5 @@
 ---
 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

docs/documentation/overview/functions.html

@@ -1,6 +1,5 @@
 ---
 title: Functions
-subtitle: "Utility functions to calculate colors and other values"
 layout: documentation
 doc-tab: overview
 doc-subtab: functions

docs/documentation/overview/mixins.html

@@ -1,6 +1,5 @@
 ---
 title: Mixins
-subtitle: "Utility mixins for custom elements and responsive helpers"
 layout: documentation
 doc-tab: overview
 doc-subtab: mixins

docs/documentation/overview/modular.html

@@ -1,6 +1,5 @@
 ---
 title: Modularity
-subtitle: "Just import what you <strong>need</strong>"
 layout: documentation
 doc-tab: overview
 doc-subtab: modular
@@ -99,5 +98,8 @@ breadcrumb:
       <code>[disabled]</code>
     </li>
   </ul>
-  {% highlight html %}{{ buttons }}{% endhighlight %}
+
+  <div class="bd-snippet-code highlight-full">
+    {% highlight html %}{{ buttons }}{% endhighlight %}
+  </div>
 </div>

docs/documentation/overview/responsiveness.html

@@ -1,6 +1,5 @@
 ---
 title: Responsiveness
-subtitle: "Bulma is a <strong>mobile-first</strong> framework"
 layout: documentation
 doc-tab: overview
 doc-subtab: responsiveness
@@ -36,7 +35,7 @@ $fullhd-enabled: false
     <li>the <code>level</code> component will show its children stacked vertically</li>
     <li>the <code>nav</code> menu will be hidden</li>
   </ul>
-  <p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
+  <p>You can however enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
 </div>
 
 {% include anchor.html name="Breakpoints" %}

docs/documentation/overview/start.html

@@ -1,6 +1,5 @@
 ---
 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

docs/documentation/overview/variables.html

@@ -1,6 +1,5 @@
 ---
 title: Variables
-subtitle: "Easily <strong>customize</strong> Bulma to match your design"
 layout: documentation
 doc-tab: overview
 doc-subtab: variables