Add Bulma book

docs/_config.yml

@@ -1,7 +1,5 @@
 # Meta
 
-title:         "Bulma: a modern CSS framework based on Flexbox"
-description:   "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free."
 env:           "production"
 
 # Build

docs/_data/meta.json

@@ -0,0 +1,11 @@
+{
+  "title": "Bulma: a modern CSS framework based on Flexbox",
+  "description": "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
+  "documentation": "/documentation/overview/start/",
+  "download": "https://github.com/jgthms/bulma/releases/download/0.6.2/bulma-0.6.2.zip",
+  "github": "https://github.com/jgthms/bulma",
+  "twitter": "https://twitter.com/jgthms",
+  "version": "0.6.2",
+  "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
+  "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf"
+}

docs/_includes/book-banner.html

@@ -0,0 +1,15 @@
+<section id="bulma-book" class="bd-book-banner hero is-medium">
+  <div class="bd-book-pattern"></div>
+  <div class="hero-body">
+    <div class="container">
+      <div class="bd-book-columns">
+        <div class="bd-book-column bd-is-cover">
+          {% include book-cover.html %}
+        </div>
+        <div class="bd-book-column bd-is-content">
+          {% include book-content.html %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/book-content.html

@@ -0,0 +1,39 @@
+<div class="bd-book-content">
+  <header class="block bd-book-header">
+    <strong class="tag is-success">New!</strong>
+    <h3 class="title">The official Bulma book! 😲</h3>
+    <p class="subtitle is-6 has-text-grey">by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,<br>Mikko Lauhakari, Aslam Shah and David Berning</p>
+  </header>
+  <div class="block bd-book-description is-size-5">
+    <p>A <strong>step-by-step guide</strong> that teaches you how to build a <strong>web interface from scratch</strong> using Bulma.</p>
+  </div>
+  <div class="bd-book-tags">
+    <div class="field is-grouped is-grouped-multiline">
+      <div class="control">
+        <span class="tag is-white has-text-grey is-paddingless">Formats included:</span>
+      </div>
+      <div class="control">
+        <div class="tags has-addons">
+          <strong class="tag has-text-danger">PDF</strong>
+          <strong class="tag has-text-info">Epub</strong>
+          <strong class="tag has-text-success">Mobi</strong>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="block bd-book-buttons">
+    <div class="buttons">
+      <a class="button is-danger is-large" href="{{ site.data.meta.book_url }}" target="_blank" rel="nofollow">
+        <span>
+          <strong>Buy</strong> the book
+        </span>
+      </a>
+      <a class="button is-light is-large" href="{{ site.data.meta.book_sample }}" target="_blank" rel="nofollow">
+        <span>
+          <span>Get</span>
+          <strong>free sample</strong>
+        </span>
+      </a>
+    </div>
+  </div>
+</div>

docs/_includes/book-cover.html

@@ -0,0 +1,12 @@
+<div class="bd-book-cover">
+  <a href="{{ site.data.meta.book_url }}" target="_blank">
+    {%
+      include elements/responsive-image.html
+      path="book/book-cover"
+      extension="png"
+      alt="The official Bulma book cover"
+      width="300"
+      height="380"
+    %}
+  </a>
+</div>

docs/_includes/deprecated.html

@@ -1,7 +1,7 @@
 {% if site.deprecated %}
   <div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
     <p>
-      You are viewing the deprecated <strong>{{site.version}}</strong> version of the website.
+      You are viewing the deprecated <strong>{{site.data.meta.version}}</strong> version of the website.
       <a href="/">Click here to view the latest version</a>
     </p>
   </div>

docs/_includes/elements/responsive-image.html

@@ -0,0 +1,7 @@
+<img
+  src="{{ site.url }}/images/{{ include.path }}.{{ include.extension }}"
+  srcset="{{ site.url }}/images/{{ include.path }}.{{ include.extension }} 1x,
+          {{ site.url }}/images/{{ include.path }}@2x.{{ include.extension }} 2x"
+  alt="{{ include.alt }}"
+  width="{{ include.width }}"
+  height="{{ include.height }}">

docs/_includes/elements/tw-button.html

@@ -3,7 +3,7 @@
   data-social-action="tweet"
   data-social-target="{{ site.url }}"
   target="_blank"
-  href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&hashtags=bulmaio&url={{ site.url }}&via=jgthms">
+  href="https://twitter.com/intent/tweet?text={{ site.data.meta.title | urlencode }}&hashtags=bulmaio&url={{ site.url }}&via=jgthms">
   <span class="icon">
     <i class="fab fa-twitter"></i>
   </span>

docs/_includes/footer.html

@@ -1,3 +1,5 @@
+{% include book-banner.html %}
+
 {% include bsa.html %}
 
 {% include newsletter.html %}
@@ -9,7 +11,7 @@
         <div id="about" class="content">
           <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
           <div class="twitter-container">
-            <a href="{{ site.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
+            <a href="{{ site.data.meta.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
           </div>
           <p id="alternative">
             <a href="{{ site.url }}/alternative-to-bootstrap/">An alternative to <strong>Bootstrap</strong></a>
@@ -24,7 +26,7 @@
           <div id="social">
             <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
 
-            <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
+            <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
 
             <div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
 

docs/_includes/getting-started.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Hello Bulma!</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/{{ site.version }}/css/bulma.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/{{ site.data.meta.version }}/css/bulma.min.css">
     <script defer src="{{ site.data.icons.fontawesome5 }}"></script>
   </head>
   <body>

docs/_includes/head.html

@@ -2,9 +2,9 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.data.meta.description }}{% endif %}">
 
-  <title>{% if page.fulltitle %}{{ page.fulltitle }}{% else %}{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}{% endif %}</title>
+  <title>{% if page.fulltitle %}{{ page.fulltitle }}{% else %}{% if page.title %}{{ page.title }} | {% endif %}{{ site.data.meta.title }}{% endif %}</title>
 
   {% if page.fontawesome4 %}
     <link rel="stylesheet" href="{{ site.data.icons.fontawesome4 }}">
@@ -21,7 +21,7 @@
   <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
-  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
+  <link rel="alternate" type="application/rss+xml" title="{{ site.data.meta.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
 
   <meta property="og:url" content="{{ site.url }}">
   <meta property="og:type" content="website">
@@ -42,8 +42,8 @@
     <meta property="og:title" content="{{ page.title | replace: '&nbsp;', ' ' }}">
     <meta name="twitter:title" content="{{ page.title | replace: '&nbsp;', ' ' }}">
   {% else %}
-    <meta property="og:title" content="{{ site.title }}">
-    <meta name="twitter:title" content="{{ site.title }}">
+    <meta property="og:title" content="{{ site.data.meta.title }}">
+    <meta name="twitter:title" content="{{ site.data.meta.title }}">
   {% endif %}
 
   {% if page.share_description %}
@@ -53,8 +53,8 @@
     <meta property="og:description" content="{{ page.content | strip_html | truncate: 400, '…' }}">
     <meta name="twitter:description" content="{{ page.content | strip_html | truncate: 400, '…' }}">
   {% else %}
-    <meta property="og:description" content="{{ site.description }}">
-    <meta name="twitter:description" content="{{ site.description }}">
+    <meta property="og:description" content="{{ site.data.meta.description }}">
+    <meta name="twitter:description" content="{{ site.data.meta.description }}">
   {% endif %}
 
   {% if page.share_image %}

docs/_includes/header.html

@@ -1,17 +1,17 @@
 <nav class="nav">
   <div class="nav-left">
     <a class="nav-item is-brand" href="{{ site.url }}">
-      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
     </a>
   </div>
 
   <div class="nav-center">
-    <a class="nav-item" href="{{ site.github }}">
+    <a class="nav-item" href="{{ site.data.meta.github }}">
       <span class="icon">
         <i class="fab fa-github"></i>
       </span>
     </a>
-    <a class="nav-item" href="{{ site.twitter }}">
+    <a class="nav-item" href="{{ site.data.meta.twitter }}">
       <span class="icon">
         <i class="fab fa-twitter"></i>
       </span>
@@ -32,7 +32,7 @@
       <span>Templates</span>
       <span class="tag is-small is-success">New!</span>
     </a>
-    <a class="nav-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}">
+    <a class="nav-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
       Documentation
     </a>
     <a class="nav-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
@@ -48,7 +48,7 @@
             data-social-action="tweet"
             data-social-target="{{ site.url }}"
             target="_blank"
-            href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
+            href="https://twitter.com/intent/tweet?text={{ site.data.meta.title | urlencode }}&url={{ site.url }}&via=jgthms">
             <span class="icon">
               <i class="fab fa-twitter"></i>
             </span>
@@ -56,7 +56,7 @@
           </a>
         </p>
         <p class="control">
-          <a class="button is-primary" href="{{ site.download }}">
+          <a class="button is-primary" href="{{ site.data.meta.download }}">
             <span class="icon">
               <i class="fas fa-download"></i>
             </span>

docs/_includes/index/intro.html

@@ -18,13 +18,13 @@
             <pre id="npm" class="intro-npm"><code>{{ npmInstall }}</code><code id="npmCopy" class="intro-npm-copy" data-clipboard-text="{{ npmInstall }}">copy</code></pre>
 
             <nav class="intro-buttons">
-              <a class="button is-primary is-large" href="{{ site.download }}">
+              <a class="button is-primary is-large" href="{{ site.data.meta.download }}">
                 <span>
                   <strong>Download</strong>
-                  <small>v{{ site.version }}</small>
+                  <small>v{{ site.data.meta.version }}</small>
                 </span>
               </a>
-              <a class="button is-light is-large" href="{{ site.documentation }}">
+              <a class="button is-light is-large" href="{{ site.data.meta.documentation }}">
                 <span>
                   <span>View</span>
                   <strong>docs</strong>

docs/_includes/navbar.html

@@ -5,16 +5,16 @@
 
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">
-      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+      <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.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>
     </a>
 
-    <a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
+    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.twitter }}" target="_blank">
       <span class="icon" style="color: #55acee;">
         <i class="fab fa-lg fa-twitter"></i>
       </span>
@@ -30,11 +30,11 @@
   <div id="navMenu{{ include.id }}" class="navbar-menu">
     <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.documentation }}">
+        <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.documentation }}">
+          <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/">
@@ -59,7 +59,7 @@
           <div class="navbar-item">
             <div>
               <p class="is-size-6-desktop">
-                <strong>{{ site.version }}</strong>
+                <strong>{{ site.data.meta.version }}</strong>
               </p>
               {{#unless site.deprecated}}
                 <small>
@@ -214,12 +214,12 @@
     </div>
 
     <div class="navbar-end">
-      <a class="navbar-item is-hidden-desktop-only" href="{{ site.github }}" target="_blank">
+      <a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.github }}" target="_blank">
         <span class="icon" style="color: #333;">
           <i class="fab fa-lg fa-github"></i>
         </span>
       </a>
-      <a class="navbar-item is-hidden-desktop-only" href="{{ site.twitter }}" target="_blank">
+      <a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.twitter }}" target="_blank">
         <span class="icon" style="color: #55acee;">
           <i class="fab fa-lg fa-twitter"></i>
         </span>
@@ -243,7 +243,7 @@
             {% include elements/tw-button.html label="Tweet" %}
           </p>
           <p class="control">
-            <a class="button is-primary" href="{{ site.download }}">
+            <a class="button is-primary" href="{{ site.data.meta.download }}">
               <span class="icon">
                 <i class="fas fa-download"></i>
               </span>

docs/_includes/subnav/subnav-columns.html

@@ -0,0 +1,24 @@
+<nav class="navbar has-shadow">
+  <div class="container">
+    <div class="navbar-tabs">
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'basics' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
+        Basics
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'sizes' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/sizes/">
+        Sizes
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/responsiveness/">
+        Responsiveness
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'nesting' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/nesting/">
+        Nesting
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
+        Gap
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
+        Options
+      </a>
+    </div>
+  </div>
+</nav>

docs/_javascript/navbar.js

@@ -4,7 +4,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const navbarTopEl = document.getElementById('navbar');
   const navbarBottomEl = document.getElementById('navbarBottom');
   const fixBottomEl = document.getElementById('navbarFixBottom');
-  const fixBottomElIcon = fixBottomEl.querySelector('.fa');
+  const fixBottomElText = document.getElementById('navbarFixBottomText');
   let fixedBottom = false;
 
   fixBottomEl.addEventListener('click', event => {
@@ -12,12 +12,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     if (fixedBottom) {
       fixBottomEl.className = 'button is-success';
-      fixBottomElIcon.className = 'far fa-check-square';
+      fixBottomElText.innerHTML = 'Hide';
       rootEl.classList.add('has-navbar-fixed-bottom');
       navbarBottomEl.classList.remove('is-hidden');
     } else {
       fixBottomEl.className = 'button is-link';
-      fixBottomElIcon.className = 'far fa-square';
+      fixBottomElText.innerHTML = 'Show';
       rootEl.classList.remove('has-navbar-fixed-bottom');
       navbarBottomEl.classList.add('is-hidden');
     }

docs/_layouts/documentation.html

@@ -29,7 +29,7 @@ route: documentation
       <nav class="tabs is-boxed">
         <ul>
           <li {% if page.doc-tab == 'overview' %}class="is-active"{% endif %}>
-            <a href="{{ site.documentation }}">Overview</a>
+            <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>

docs/_sass/book.sass

@@ -0,0 +1,59 @@
+$book-beige: #FFEDD7
+
+.bd-book-banner
+  background-color: $white
+  position: relative
+
+.bd-book-pattern
+  +overlay
+  background-image: url("/images/hab/lightpaperfibers_@2X.png")
+  background-repeat: repeat
+  background-size: 250px 150px
+  &::after
+    +overlay
+    background-color: rgba($book-beige, 0.1)
+    content: ""
+    display: block
+
+.bd-book-header
+  position: relative
+
+.bd-book-cover
+  img
+    display: block
+
+.bd-book-content
+  background-color: $white
+  box-shadow: 0 40px 40px -20px rgba($black, 0.1)
+  max-width: 520px
+  padding: 3rem
+
+.bd-book-description
+  max-width: 340px
+
+.bd-book-tags
+  margin-bottom: 3rem
+  .tags
+    .tag
+      margin-right: 1px
+
+.bd-book-columns
+  align-items: center
+  display: flex
+  justify-content: center
+  margin-left: auto
+  margin-right: auto
+  max-width: 1080px
+
++mobile
+  .bd-book-columns
+    flex-direction: column
+
++tablet
+  .bd-book-columns
+    justify-content: space-around
+  .bd-book-header
+    .tag
+      position: absolute
+      right: calc(100% + 1.25rem)
+      top: 0.5rem

docs/alternative-to-bootstrap.html

@@ -52,30 +52,30 @@ bootstrap:
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+    <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.data.meta.description }}{% endif %}">
 
     <title>Bulma: an alternative to Bootstrap</title>
 
     <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
 
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
-    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
+    <link rel="alternate" type="application/rss+xml" title="{{ site.data.meta.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
 
     <meta property="og:url" content="{{site.url}}">
     <meta property="og:type" content="website">
-    <meta property="og:title" content="{{site.title}}">
+    <meta property="og:title" content="{{site.data.meta.title}}">
     <meta property="og:image" content="{{site.url}}/images/bulma-banner.png">
     <meta property="og:image:type" content="image/png">
     <meta property="og:image:width" content="1200">
     <meta property="og:image:height" content="630">
-    <meta property="og:description" content="{{site.description}}">
+    <meta property="og:description" content="{{site.data.meta.description}}">
 
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:site" content="@jgthms">
     <meta name="twitter:creator" content="@jgthms">
-    <meta name="twitter:title" content="{{site.title}}">
+    <meta name="twitter:title" content="{{site.data.meta.title}}">
     <meta name="twitter:image" content="{{site.url}}/images/bulma-banner.png">
-    <meta name="twitter:description" content="{{site.description}}">
+    <meta name="twitter:description" content="{{site.data.meta.description}}">
 
     <link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201701041855">
     <link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">

docs/atom.xml

@@ -3,13 +3,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
   <channel>
-    <title>{{ site.title | xml_escape }}</title>
-    <description>{% if site.description %}{{ site.description | xml_escape }}{% endif %}</description>
+    <title>{{ site.data.meta.title | xml_escape }}</title>
+    <description>{% if site.data.meta.description %}{{ site.data.meta.description | xml_escape }}{% endif %}</description>
     <link>{{ site.url }}</link>
     <id>{{ site.url }}</id>
     <updated>{{ site.time | date_to_xmlschema }}</updated>
     <author>
-      <name>{{ site.title }}</name>
+      <name>{{ site.data.meta.title }}</name>
       <email>bbxdesign@gmail.com</email>
     </author>
     <atom:link href="{{ site.url }}/atom.xml" rel="self" type="application/rss+xml" />

docs/bulma-docs.sass

@@ -26,3 +26,4 @@ $fortyfour: #5f45bb
 @import "./_sass/klmn"
 @import "./_sass/patreon"
 @import "./_sass/sponsors"
+@import "./_sass/book"

docs/css/bulma-docs.css

@@ -13474,4 +13474,95 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   width: 200px;
 }
 
+.bd-book-banner {
+  background-color: white;
+  position: relative;
+}
+
+.bd-book-pattern {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-image: url("/images/hab/lightpaperfibers_@2X.png");
+  background-repeat: repeat;
+  background-size: 250px 150px;
+}
+
+.bd-book-pattern::after {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: rgba(255, 237, 215, 0.1);
+  content: "";
+  display: block;
+}
+
+.bd-book-header {
+  position: relative;
+}
+
+.bd-book-cover img {
+  display: block;
+}
+
+.bd-book-content {
+  background-color: white;
+  -webkit-box-shadow: 0 40px 40px -20px rgba(10, 10, 10, 0.1);
+          box-shadow: 0 40px 40px -20px rgba(10, 10, 10, 0.1);
+  max-width: 520px;
+  padding: 3rem;
+}
+
+.bd-book-description {
+  max-width: 340px;
+}
+
+.bd-book-tags {
+  margin-bottom: 3rem;
+}
+
+.bd-book-tags .tags .tag {
+  margin-right: 1px;
+}
+
+.bd-book-columns {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1080px;
+}
+
+@media screen and (max-width: 768px) {
+  .bd-book-columns {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .bd-book-columns {
+    -ms-flex-pack: distribute;
+        justify-content: space-around;
+  }
+  .bd-book-header .tag {
+    position: absolute;
+    right: calc(100% + 1.25rem);
+    top: 0.5rem;
+  }
+}
+
 /*# sourceMappingURL=bulma-docs.css.map */

docs/documentation/columns/basics.html

@@ -22,7 +22,7 @@ doc-subtab: basics
 </div>
 {% endcapture %}
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/columns/gap.html

@@ -79,7 +79,7 @@ doc-subtab: gap
 </div>
 {% endcapture %}
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/columns/nesting.html

@@ -5,7 +5,7 @@ doc-tab: columns
 doc-subtab: nesting
 ---
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/columns/options.html

@@ -83,7 +83,7 @@ doc-subtab: options
 </div>
 {% endcapture %}
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/columns/responsiveness.html

@@ -37,7 +37,7 @@ doc-subtab: responsiveness
 </div>
 {% endcapture %}
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/columns/sizes.html

@@ -95,7 +95,7 @@ doc-subtab: sizes
 </div>
 {% endcapture %}
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/components/breadcrumb.html

@@ -5,7 +5,7 @@ doc-tab: components
 doc-subtab: breadcrumb
 ---
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 {% capture breadcrumb_example %}
 <nav class="breadcrumb" aria-label="breadcrumbs">

docs/documentation/components/card.html

@@ -89,7 +89,7 @@ doc-subtab: card
 </div>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/components/dropdown.html

@@ -188,7 +188,7 @@ doc-subtab: dropdown
 </div>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/components/menu.html

@@ -42,7 +42,7 @@ doc-subtab: menu
 </aside>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/components/message.html

@@ -108,7 +108,7 @@ doc-subtab: message
 {% endfor %}
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/components/modal.html

@@ -46,7 +46,7 @@ doc-subtab: modal
 </div>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/components/nav.html

@@ -4,7 +4,7 @@ doc-tab: components
 doc-subtab: nav
 ---
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/components/navbar.html

@@ -5,7 +5,7 @@ doc-tab: components
 doc-subtab: navbar
 ---
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 {% capture navbar_example %}
 {% include examples/navbar.html id="Default" %}
@@ -31,7 +31,7 @@ doc-subtab: navbar
 <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">
-      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
     </a>
 
     <div class="navbar-burger">
@@ -154,7 +154,7 @@ doc-subtab: navbar
       </a>
       <hr class="navbar-divider">
       <div class="navbar-item">
-        Version {{ site.version }}
+        Version {{ site.data.meta.version }}
       </div>
     </div>
   </div>
@@ -186,7 +186,7 @@ doc-subtab: navbar
       </a>
       <hr class="navbar-divider">
       <div class="navbar-item">
-        Version {{ site.version }}
+        Version {{ site.data.meta.version }}
       </div>
     </div>
   </div>
@@ -218,7 +218,7 @@ doc-subtab: navbar
       </a>
       <hr class="navbar-divider">
       <div class="navbar-item">
-        Version {{ site.version }}
+        Version {{ site.data.meta.version }}
       </div>
     </div>
   </div>
@@ -252,7 +252,7 @@ doc-subtab: navbar
           </a>
           <hr class="navbar-divider">
           <div class="navbar-item">
-            Version {{ site.version }}
+            Version {{ site.data.meta.version }}
           </div>
         </div>
       </div>
@@ -276,7 +276,7 @@ doc-subtab: navbar
           </a>
           <hr class="navbar-divider">
           <div class="navbar-item">
-            Version {{ site.version }}
+            Version {{ site.data.meta.version }}
           </div>
         </div>
       </div>
@@ -341,7 +341,7 @@ doc-subtab: navbar
           </a>
           <hr class="navbar-divider">
           <div class="navbar-item">
-            Version {{ site.version }}
+            Version {{ site.data.meta.version }}
           </div>
         </div>
       </div>
@@ -353,7 +353,7 @@ doc-subtab: navbar
 {% capture navbar_dropdown_default_example %}
 <nav class="navbar" role="navigation" aria-label="dropdown navigation">
   <a class="navbar-item">
-    <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+    <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
   </a>
 
   <div class="navbar-item has-dropdown is-active">
@@ -373,7 +373,7 @@ doc-subtab: navbar
       </a>
       <hr class="navbar-divider">
       <div class="navbar-item">
-        Version {{ site.version }}
+        Version {{ site.data.meta.version }}
       </div>
     </div>
   </div>
@@ -394,7 +394,7 @@ doc-subtab: navbar
 {% capture navbar_dropdown_boxed_example %}
 <nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
   <a class="navbar-item">
-    <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+    <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
   </a>
 
   <div class="navbar-item has-dropdown is-active">
@@ -414,7 +414,7 @@ doc-subtab: navbar
       </a>
       <hr class="navbar-divider">
       <div class="navbar-item">
-        Version {{ site.version }}
+        Version {{ site.data.meta.version }}
       </div>
     </div>
   </div>
@@ -435,7 +435,7 @@ doc-subtab: navbar
 {% capture navbar_dropdown_item_active_example %}
 <nav class="navbar" role="navigation" aria-label="dropdown navigation">
   <a class="navbar-item">
-    <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+    <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
   </a>
 
   <div class="navbar-item has-dropdown is-active">
@@ -455,7 +455,7 @@ doc-subtab: navbar
       </a>
       <hr class="navbar-divider">
       <div class="navbar-item">
-        Version {{ site.version }}
+        Version {{ site.data.meta.version }}
       </div>
     </div>
   </div>
@@ -829,10 +829,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     <div id="navbarToggles" class="buttons">
       <a id="navbarFixBottom" class="button is-link">
-        <span class="icon">
-          <i class="far fa-square"></i>
-        </span>
-        <span>Show <strong>bottom</strong> navbar</span>
+        <span><span id="navbarFixBottomText">Show</span> <strong>bottom</strong> navbar</span>
       </a>
     </div>
 

docs/documentation/components/pagination.html

@@ -149,7 +149,7 @@ doc-subtab: pagination
 </nav>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/components/panel.html

@@ -73,7 +73,7 @@ doc-subtab: panel
 </nav>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/components/tabs.html

@@ -344,7 +344,7 @@ doc-subtab: tabs
 </div>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/elements/box.html

@@ -5,7 +5,7 @@ doc-tab: elements
 doc-subtab: box
 ---
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 {% capture box_example %}
 <div class="box">

docs/documentation/elements/button.html

@@ -448,7 +448,7 @@ doc-subtab: button
 </div>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/elements/content.html

@@ -101,7 +101,7 @@ doc-subtab: content
 </div>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/elements/delete.html

@@ -40,7 +40,7 @@ doc-subtab: delete
 </article>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/elements/icon.html

@@ -48,7 +48,7 @@ doc-subtab: icon
 </span>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/elements/image.html

@@ -25,7 +25,7 @@ dimensions:
 </figure>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/elements/notification.html

@@ -25,7 +25,7 @@ doc-subtab: notification
 {% endfor %}
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/elements/progress.html

@@ -25,7 +25,7 @@ doc-subtab: progress
 <progress class="progress is-large" value="60" max="100">60%</progress>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/elements/table.html

@@ -305,7 +305,7 @@ doc-subtab: table
 </table>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/elements/tag.html

@@ -124,7 +124,7 @@ doc-subtab: tag
 </div>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 {% capture tags_blog_addons %}
 <div class="field is-grouped is-grouped-multiline">

docs/documentation/elements/title.html

@@ -50,7 +50,7 @@ doc-subtab: title
 <p class="subtitle is-5">Subtitle 5</p>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/form/checkbox.html

@@ -26,7 +26,7 @@ doc-subtab: checkbox
 </label>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/form/file.html

@@ -527,7 +527,7 @@ variables_keys:
 </div>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">
@@ -743,7 +743,7 @@ variables_keys:
 
     <div class="content">
       <p>
-        You can use <a href="{{ site.github | append: '/blob/master/sass/elements/form.sass#L25,L36' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+        You can use <a href="{{ site.data.meta.github | append: '/blob/master/sass/elements/form.sass#L25,L36' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
       </p>
     </div>
 

docs/documentation/form/general.html

@@ -795,7 +795,7 @@ variables_form_keys:
 </div>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/form/input.html

@@ -239,7 +239,7 @@ variables_keys:
 </div>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">
@@ -490,7 +490,7 @@ variables_keys:
 
     <div class="content">
       <p>
-        You can use <a href="{{ site.github | append: '/blob/master/sass/elements/form.sass#L1,L23' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+        You can use <a href="{{ site.data.meta.github | append: '/blob/master/sass/elements/form.sass#L1,L23' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
       </p>
     </div>
 

docs/documentation/form/radio.html

@@ -48,7 +48,7 @@ doc-subtab: radio
 </div>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/form/select.html

@@ -270,7 +270,7 @@ doc-subtab: select
 </div>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/form/textarea.html

@@ -123,7 +123,7 @@ doc-subtab: textarea
 </div>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/grid/columns.html

@@ -327,7 +327,7 @@ doc-subtab: columns
 </div>
 {% endcapture %}
 
-{% include subnav-grid.html %}
+{% include subnav/subnav-grid.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/grid/tiles.html

@@ -7,7 +7,7 @@ doc-subtab: tiles
 
 <meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/layout/tiles/">
 
-{% include subnav-grid.html %}
+{% include subnav/subnav-grid.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/layout/container.html

@@ -38,7 +38,7 @@ doc-subtab: container
 </div>
 {% endcapture %}
 
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/layout/footer.html

@@ -5,7 +5,7 @@ doc-tab: layout
 doc-subtab: footer
 ---
 
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
 
 {% capture footer_example %}
 <footer class="footer">

docs/documentation/layout/hero.html

@@ -5,7 +5,7 @@ doc-tab: layout
 doc-subtab: hero
 ---
 
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/layout/level.html

@@ -118,7 +118,7 @@ doc-subtab: level
 </nav>
 {% endcapture %}
 
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/layout/media-object.html

@@ -156,7 +156,7 @@ doc-subtab: media-object
 </article>
 {% endcapture %}
 
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/layout/section.html

@@ -5,7 +5,7 @@ doc-tab: layout
 doc-subtab: section
 ---
 
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/layout/tiles.html

@@ -5,7 +5,7 @@ doc-tab: layout
 doc-subtab: tiles
 ---
 
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/modifiers/helpers.html

@@ -5,7 +5,7 @@ doc-tab: modifiers
 doc-subtab: helpers
 ---
 
-{% include subnav-modifiers.html %}
+{% include subnav/subnav-modifiers.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/modifiers/responsive-helpers.html

@@ -52,7 +52,7 @@ doc-subtab: responsive-helpers
 </td>
 {% endcapture %}
 
-{% include subnav-modifiers.html %}
+{% include subnav/subnav-modifiers.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/modifiers/syntax.html

@@ -5,7 +5,7 @@ doc-tab: modifiers
 doc-subtab: syntax
 ---
 
-{% include subnav-modifiers.html %}
+{% include subnav/subnav-modifiers.html %}
 
 {% capture button_example %}
 <a class="button">

docs/documentation/modifiers/typography-helpers.html

@@ -49,7 +49,7 @@ doc-subtab: typography-helpers
 </td>
 {% endcapture %}
 
-{% include subnav-modifiers.html %}
+{% include subnav/subnav-modifiers.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/overview/classes.html

@@ -5,7 +5,7 @@ doc-tab: overview
 doc-subtab: classes
 ---
 
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/overview/colors.html

@@ -16,7 +16,7 @@ colors:
 - danger
 ---
 
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/overview/customize.html

@@ -49,7 +49,7 @@ $colors: map-merge($colors, $addColors);
 @import "../bulma";
 {% endcapture %}
 
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/overview/functions.html

@@ -5,7 +5,7 @@ doc-tab: overview
 doc-subtab: functions
 ---
 
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/overview/mixins.html

@@ -5,7 +5,7 @@ doc-tab: overview
 doc-subtab: mixins
 ---
 
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/overview/modular.html

@@ -5,7 +5,7 @@ doc-tab: overview
 doc-subtab: modular
 ---
 
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/overview/responsiveness.html

@@ -11,7 +11,7 @@ variables_keys:
 - fullhd
 ---
 
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
 
 <section class="section">
   <div class="container">
@@ -34,8 +34,8 @@ variables_keys:
 
     {% include anchor.html name="Breakpoints" %}
 
-    {% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.github %}
-    {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.github %}
+    {% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %}
+    {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}
 
     <div class="content">
       <p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>

docs/documentation/overview/start.html

@@ -5,7 +5,7 @@ doc-tab: overview
 doc-subtab: start
 ---
 
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
 
 <section class="section">
   <div class="container">

docs/documentation/overview/variables.html

@@ -5,7 +5,7 @@ doc-tab: overview
 doc-subtab: variables
 ---
 
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
 
 <section class="section">
   <div class="container">

docs/index.html

@@ -39,7 +39,7 @@ fixed_navbar: true
           <p class="title is-4" style="margin-top: 0.5em;"><strong>Modern</strong></p>
           <p class="subtitle">Built with <strong>Flexbox</strong></p>
         </a>
-        <a class="column has-text-centered" href="{{ site.github }}">
+        <a class="column has-text-centered" href="{{ site.data.meta.github }}">
           <span class="icon is-large">
             <i class="fab fa-3x fa-github"></i>
           </span>
@@ -480,13 +480,13 @@ fixed_navbar: true
   <div class="container">
     <p class="title has-text-centered">Get started</p>
     <div class="hero-buttons">
-      <a class="button is-link is-large" href="{{ site.documentation }}">
+      <a class="button is-link is-large" href="{{ site.data.meta.documentation }}">
         <span class="icon">
           <i class="fas fa-book"></i>
         </span>
         <span>Check the <strong>docs</strong></span>
       </a>
-      <a class="button is-black is-large" href="{{ site.github }}">
+      <a class="button is-black is-large" href="{{ site.data.meta.github }}">
         <span class="icon">
           <i class="fab fa-github"></i>
         </span>

docs/lib/navbar.js

@@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', function () {
   var navbarTopEl = document.getElementById('navbar');
   var navbarBottomEl = document.getElementById('navbarBottom');
   var fixBottomEl = document.getElementById('navbarFixBottom');
-  var fixBottomElIcon = fixBottomEl.querySelector('.fa');
+  var fixBottomElText = document.getElementById('navbarFixBottomText');
   var fixedBottom = false;
 
   fixBottomEl.addEventListener('click', function (event) {
@@ -14,12 +14,12 @@ document.addEventListener('DOMContentLoaded', function () {
 
     if (fixedBottom) {
       fixBottomEl.className = 'button is-success';
-      fixBottomElIcon.className = 'far fa-check-square';
+      fixBottomElText.innerHTML = 'Hide';
       rootEl.classList.add('has-navbar-fixed-bottom');
       navbarBottomEl.classList.remove('is-hidden');
     } else {
       fixBottomEl.className = 'button is-link';
-      fixBottomElIcon.className = 'far fa-square';
+      fixBottomElText.innerHTML = 'Show';
       rootEl.classList.remove('has-navbar-fixed-bottom');
       navbarBottomEl.classList.add('is-hidden');
     }