]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
Add Bulma book
authorJeremy Thomas <bbxdesign@gmail.com>
Mon, 26 Mar 2018 13:46:39 +0000 (14:46 +0100)
committerJeremy Thomas <bbxdesign@gmail.com>
Mon, 26 Mar 2018 13:46:39 +0000 (14:46 +0100)
91 files changed:
docs/_config.yml
docs/_data/meta.json [new file with mode: 0644]
docs/_includes/book-banner.html [new file with mode: 0644]
docs/_includes/book-content.html [new file with mode: 0644]
docs/_includes/book-cover.html [new file with mode: 0644]
docs/_includes/deprecated.html
docs/_includes/elements/responsive-image.html [new file with mode: 0644]
docs/_includes/elements/tw-button.html
docs/_includes/footer.html
docs/_includes/getting-started.html
docs/_includes/head.html
docs/_includes/header.html
docs/_includes/index/intro.html
docs/_includes/navbar.html
docs/_includes/subnav/subnav-columns.html [new file with mode: 0644]
docs/_includes/subnav/subnav-components.html [moved from docs/_includes/subnav-components.html with 100% similarity]
docs/_includes/subnav/subnav-elements.html [moved from docs/_includes/subnav-elements.html with 100% similarity]
docs/_includes/subnav/subnav-form.html [moved from docs/_includes/subnav-form.html with 100% similarity]
docs/_includes/subnav/subnav-grid.html [moved from docs/_includes/subnav-grid.html with 100% similarity]
docs/_includes/subnav/subnav-layout.html [moved from docs/_includes/subnav-layout.html with 100% similarity]
docs/_includes/subnav/subnav-modifiers.html [moved from docs/_includes/subnav-modifiers.html with 100% similarity]
docs/_includes/subnav/subnav-overview.html [moved from docs/_includes/subnav-overview.html with 100% similarity]
docs/_javascript/navbar.js
docs/_layouts/documentation.html
docs/_sass/book.sass [new file with mode: 0644]
docs/alternative-to-bootstrap.html
docs/atom.xml
docs/bulma-docs.sass
docs/css/bulma-docs.css
docs/documentation/columns/basics.html
docs/documentation/columns/gap.html
docs/documentation/columns/nesting.html
docs/documentation/columns/options.html
docs/documentation/columns/responsiveness.html
docs/documentation/columns/sizes.html
docs/documentation/components/breadcrumb.html
docs/documentation/components/card.html
docs/documentation/components/dropdown.html
docs/documentation/components/menu.html
docs/documentation/components/message.html
docs/documentation/components/modal.html
docs/documentation/components/nav.html
docs/documentation/components/navbar.html
docs/documentation/components/pagination.html
docs/documentation/components/panel.html
docs/documentation/components/tabs.html
docs/documentation/elements/box.html
docs/documentation/elements/button.html
docs/documentation/elements/content.html
docs/documentation/elements/delete.html
docs/documentation/elements/icon.html
docs/documentation/elements/image.html
docs/documentation/elements/notification.html
docs/documentation/elements/progress.html
docs/documentation/elements/table.html
docs/documentation/elements/tag.html
docs/documentation/elements/title.html
docs/documentation/form/checkbox.html
docs/documentation/form/file.html
docs/documentation/form/general.html
docs/documentation/form/input.html
docs/documentation/form/radio.html
docs/documentation/form/select.html
docs/documentation/form/textarea.html
docs/documentation/grid/columns.html
docs/documentation/grid/tiles.html
docs/documentation/layout/container.html
docs/documentation/layout/footer.html
docs/documentation/layout/hero.html
docs/documentation/layout/level.html
docs/documentation/layout/media-object.html
docs/documentation/layout/section.html
docs/documentation/layout/tiles.html
docs/documentation/modifiers/helpers.html
docs/documentation/modifiers/responsive-helpers.html
docs/documentation/modifiers/syntax.html
docs/documentation/modifiers/typography-helpers.html
docs/documentation/overview/classes.html
docs/documentation/overview/colors.html
docs/documentation/overview/customize.html
docs/documentation/overview/functions.html
docs/documentation/overview/mixins.html
docs/documentation/overview/modular.html
docs/documentation/overview/responsiveness.html
docs/documentation/overview/start.html
docs/documentation/overview/variables.html
docs/images/book/book-cover.png [new file with mode: 0644]
docs/images/book/book-cover@2x.png [new file with mode: 0644]
docs/images/hab/lightpaperfibers_@2X.png [new file with mode: 0644]
docs/index.html
docs/lib/navbar.js

index dddc81b2abfcd006b85df25d331c25d31131bf3a..2b84565e42568f255bec7882b8a6f1382eddbde0 100644 (file)
@@ -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
diff --git a/docs/_data/meta.json b/docs/_data/meta.json
new file mode 100644 (file)
index 0000000..add9f18
--- /dev/null
@@ -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"
+}
\ No newline at end of file
diff --git a/docs/_includes/book-banner.html b/docs/_includes/book-banner.html
new file mode 100644 (file)
index 0000000..5e94afa
--- /dev/null
@@ -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>
\ No newline at end of file
diff --git a/docs/_includes/book-content.html b/docs/_includes/book-content.html
new file mode 100644 (file)
index 0000000..04e4a7a
--- /dev/null
@@ -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>
diff --git a/docs/_includes/book-cover.html b/docs/_includes/book-cover.html
new file mode 100644 (file)
index 0000000..dc065dd
--- /dev/null
@@ -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>
\ No newline at end of file
index 8b23887663ff44249e76e6988105d088fcf83adc..c307b3d0f1c501e16fdefc7f04298c91a44da75e 100644 (file)
@@ -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>
diff --git a/docs/_includes/elements/responsive-image.html b/docs/_includes/elements/responsive-image.html
new file mode 100644 (file)
index 0000000..0b2283d
--- /dev/null
@@ -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 }}">
index 4e1b89a835434c99b53f27d2577ef6bbecb1d3d0..d48f4f9bafe8712e0e3df153751b41746fd5fab7 100644 (file)
@@ -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>
index b9381c2ec91bb8912d1ce38d4c01aa4181fe7198..453ebd2d3e76fb17c2265fed671bddf1dd6c0463 100644 (file)
@@ -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>
 
index 872f20889c13049a2c1ac2c043e580a5f62ea60d..e89d30669ba0d8c6259eec52b08830e7ed7fda94 100644 (file)
@@ -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>
index 3c3d98be3248e8abbb128459543dbfe79af644ae..83a879175dc08b4e9f30e8621f3bddc46c4fa03d 100644 (file)
@@ -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 %}
index 78e9a75c59ba20bfd1560912d8e4db68a1a575f9..fa63e9dbca82767df51bc4e208eee3835290b5b0 100644 (file)
@@ -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>
index 35bb993761531e623eea6c3cc09b91026478f62a..25e9b0493e4f8c90ab7aee90ba04023b09d422e0 100644 (file)
             <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>
index d8558c6c03a382d4d6bc85e7fdb8204e4e513431..2214c3924d2615591c8dc64f66c3f2f78951c073 100644 (file)
@@ -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>
   <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>
     </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>
             {% 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>
diff --git a/docs/_includes/subnav/subnav-columns.html b/docs/_includes/subnav/subnav-columns.html
new file mode 100644 (file)
index 0000000..3542fff
--- /dev/null
@@ -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>
index 4d3b21474c9614b40e6b242c43f6a0ac4291d82c..3d26478d422b3b525a75efafc6830e81fa20be90 100644 (file)
@@ -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');
     }
index 28fc1b41569319682c79f583bf1697a7d4ffc666..fd8a5184d427cf9ef27e40adc2a0570e1edf121b 100644 (file)
@@ -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>
diff --git a/docs/_sass/book.sass b/docs/_sass/book.sass
new file mode 100644 (file)
index 0000000..b1cbedb
--- /dev/null
@@ -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
index 0d4ae4dec05a8682327ff7296fa9dd376740b3b4..85f848e5a3ce25cb58e2e3eb2607817c2d62e6dd 100644 (file)
@@ -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">
index eadd91894e379b13adc3db3d6a935a636ec7913b..487feb38062d3dec597da78ca34734b67ba8963f 100644 (file)
@@ -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" />
index 96a1f27ebfcbbaa3411020888c8cc69d2be23da0..e7453b083ea72b6832ad14dfe71235bccd2fbac8 100644 (file)
@@ -26,3 +26,4 @@ $fortyfour: #5f45bb
 @import "./_sass/klmn"
 @import "./_sass/patreon"
 @import "./_sass/sponsors"
+@import "./_sass/book"
index 19b4d0379d1f51c77b003fa1def9de1060ffecd3..6c545975beb851f97180d5bda766f436129a71f4 100644 (file)
@@ -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 */
\ No newline at end of file
index 6eff4442c2ad1721ac151d27f787ff339689e3d2..fcf697420f2058db4535a105072d871f9cb6d871 100644 (file)
@@ -22,7 +22,7 @@ doc-subtab: basics
 </div>
 {% endcapture %}
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">
index 89a838219502a15bfd8069b7f943183b38e56556..7a24977b1bb9ef329b4f2c1b2f718a1f28d248c3 100644 (file)
@@ -79,7 +79,7 @@ doc-subtab: gap
 </div>
 {% endcapture %}
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">
index 68f7f5b835729afefa3683380d041d9b971ca044..7c66cc6ecc909683c6c0a1596425bb3eac0a8110 100644 (file)
@@ -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">
index 2ea140472cb0e6bf1d2efafb9d29f87c7218059f..9662ca208ee76860959ef5c4ca70f94f8a8d30f9 100644 (file)
@@ -83,7 +83,7 @@ doc-subtab: options
 </div>
 {% endcapture %}
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">
index 3e4ec5170316e861eec18ee107e5f3dfb070dde2..c10ebc8ff1ebabebf8d42935efc5f5b9285e0156 100644 (file)
@@ -37,7 +37,7 @@ doc-subtab: responsiveness
 </div>
 {% endcapture %}
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">
index f562c21e8a0dc5227198998d51395a9abc8f23a9..fe47b5632c2914df17f4ba1cf251be019be007da 100644 (file)
@@ -95,7 +95,7 @@ doc-subtab: sizes
 </div>
 {% endcapture %}
 
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
 
 <section class="section">
   <div class="container">
index 46dc70af399a2922e43d398fa5752b571b9270af..974689dbba954cba50b92013d6e2fb7c35690918 100644 (file)
@@ -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">
index 9e253529e263c7aa466e41d17f1fada05e46bc8d..466a12dbb44a15ed812e1d37371e6a3cb59ed7c3 100644 (file)
@@ -89,7 +89,7 @@ doc-subtab: card
 </div>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">
index 5f41a7087d371a9f0e72e5e4e4df7f190059ec8d..a8dd1a0621b8d8df55b5375ccd2bd93944f1e812 100644 (file)
@@ -188,7 +188,7 @@ doc-subtab: dropdown
 </div>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">
index 7a64bd8d6eccfb45ec6b277c42cd66aa414334f6..def25cf233f73d8a63b82301ded9108449f0dd31 100644 (file)
@@ -42,7 +42,7 @@ doc-subtab: menu
 </aside>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">
index c9e7a5750a55f2e6458f626ff6e39ab508cc4121..9e320ed73dfad789bad6373fb749ac446ab57096 100644 (file)
@@ -108,7 +108,7 @@ doc-subtab: message
 {% endfor %}
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">
index 9db2ef731339df6db6843929a64f68b2ec8d47d7..be521f3f8ea2c847d6e6ecc95ab03ee30623e6c3 100644 (file)
@@ -46,7 +46,7 @@ doc-subtab: modal
 </div>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">
index 65df9216549a219385954c948da473d56c8241cd..ebd9349e00935c894e3b07045405c6e412948a26 100644 (file)
@@ -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">
index 576e315e69ede69fd017da770170cc4b5823078a..58a43e7a83b46138c3691f6a53d3a03ceaf9d332 100644 (file)
@@ -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>
 
index 18d2671f5b2605c8cd1314c9084c46410d5484d5..fb17d828a18744901cb36f7ee0ae9963115a92a9 100644 (file)
@@ -149,7 +149,7 @@ doc-subtab: pagination
 </nav>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">
index 87ed8d117a6ca094a1fb38e1e91522d30c3bd831..d468e38071d6f638bacada7a03fe8c50fa21b8be 100644 (file)
@@ -73,7 +73,7 @@ doc-subtab: panel
 </nav>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">
index b5df9f9d6416881344d9056aeba3b75248b90dff..30e7d1032539207e38dbe53aa25282adadd68a02 100644 (file)
@@ -344,7 +344,7 @@ doc-subtab: tabs
 </div>
 {% endcapture %}
 
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
 
 <section class="section">
   <div class="container">
index ca924c5ff595fd121f26fdb460404b7adbfc0ae7..d570b6d9675dab75edcdb3153efbc3a76f966743 100644 (file)
@@ -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">
index 7352e7c4ef4955169c2970c46bafecbaf21113fe..fa1c3d54f811224b57b62c2837d8e73ae5cdeba3 100644 (file)
@@ -448,7 +448,7 @@ doc-subtab: button
 </div>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">
index 2a739ffe006342dfc280f0bae13e0436f7dd681f..60a8713728db512c4ff5f3ad38dba4a172dde0f3 100644 (file)
@@ -101,7 +101,7 @@ doc-subtab: content
 </div>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">
index 0a87f56a6feff2dc927061ab32382d777ad68f29..d2ba8d721b65e9acae5c8527dd1d0e22b0a9e74a 100644 (file)
@@ -40,7 +40,7 @@ doc-subtab: delete
 </article>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">
index f34c65a2ffb3ddee5595d48bf380baf4563a71e4..970bb3a44bd5d9336ac3b4530f69e6953eca69bc 100644 (file)
@@ -48,7 +48,7 @@ doc-subtab: icon
 </span>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">
index 5f4d38d5b6ea7147f2ad9d8062596df6f59ddf9d..cf7c032868e2b2ce5ca7adf5de941320fd87c612 100644 (file)
@@ -25,7 +25,7 @@ dimensions:
 </figure>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">
index 477ff0a97013cdb0bbfb2f6a4d1392ed48e63653..3078b595715745a05be2e46400fe31502876a454 100644 (file)
@@ -25,7 +25,7 @@ doc-subtab: notification
 {% endfor %}
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">
index 869bd4825032f3d39e10c49df619b351808a614c..7e48d809d723df00de2903172a44ddc2e51453ca 100644 (file)
@@ -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">
index 02b2c1c933741df7d288fe1a00df911d00e0ab90..bfdbfcfa508725acd86a1d1317d080e18bec7b05 100644 (file)
@@ -305,7 +305,7 @@ doc-subtab: table
 </table>
 {% endcapture %}
 
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
 
 <section class="section">
   <div class="container">
index af062837b5dc41f375621a5d4bd52af83f941d61..39582caa152d5c12d7eea4267586640c629badd0 100644 (file)
@@ -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">
index ccc0090502eb85b3392d259ed22f8838a2d77513..d7178f295e0b03fc9dce4a38e140aa62a671e3f2 100644 (file)
@@ -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">
index 6c3032cda5315d48fcca6fa1d189c8fda27ee37a..fd80c329575f75a70a57d5d03895f39b45b40cbe 100644 (file)
@@ -26,7 +26,7 @@ doc-subtab: checkbox
 </label>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">
index bdabaaa05792539661b5946aaa381af0a37540b9..6c44c350ea2345247d522a4b14770f5b252f2f31 100644 (file)
@@ -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>
 
index 569465a288eece694d48a8e035abcb7bcde125f4..392bc8c35f45c8f69c35098e792ab1ce8078a625 100644 (file)
@@ -795,7 +795,7 @@ variables_form_keys:
 </div>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">
index 7fa51dc133ca4d2d17d8b0c907d1ca393275b4ab..d8c0c5ac060ef596df22025e579e215f5621a9b2 100644 (file)
@@ -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>
 
index d8897dadd328505c543e07ce445407a6bf8fca23..378f115d8f9405aba2a5c81bb4a0c2813353a1f2 100644 (file)
@@ -48,7 +48,7 @@ doc-subtab: radio
 </div>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">
index eb9bd04d4a1d5213a360c28707cf05c2a9ab5821..48287be48843778afcda26c49cda88363dc2d84b 100644 (file)
@@ -270,7 +270,7 @@ doc-subtab: select
 </div>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">
index 3f47239f31f4f59b4365011a8eb5b20bbcfc120f..7128f8b8c2c471fe3e711b4463693ab3c8438908 100644 (file)
@@ -123,7 +123,7 @@ doc-subtab: textarea
 </div>
 {% endcapture %}
 
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
 
 <section class="section">
   <div class="container">
index 4757ddd032701065a3e14781abd24b2d0f126be6..4ccd2441450b07aaf865f2eaca8b43a7d77fb3e8 100644 (file)
@@ -327,7 +327,7 @@ doc-subtab: columns
 </div>
 {% endcapture %}
 
-{% include subnav-grid.html %}
+{% include subnav/subnav-grid.html %}
 
 <section class="section">
   <div class="container">
index e626081211dab06226282abfc7d3fb46804cea0e..d42fded00360f36a407006473efb6f32d75620aa 100644 (file)
@@ -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">
index dd398b69022a1a5e6b8795c7af2a420820ed2116..90c099c89b6e8a3dfa6bb8b8db6d4da4cf2582a7 100644 (file)
@@ -38,7 +38,7 @@ doc-subtab: container
 </div>
 {% endcapture %}
 
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
 
 <section class="section">
   <div class="container">
index 7eb2a10532e4147a76b338673e7d6b90cc52faf6..7226647fc30cdc18638a6cd0ed5c5b3733fc23b9 100644 (file)
@@ -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">
index b11797fb2c4c9d0515ce78bdd9915f0f198fe410..63058c43ae3153dcf3f9e3760284c136b1f12c59 100644 (file)
@@ -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">
index c82bc19a8d709613afbe4e96d4dc1212313de1a3..eeb4de7a498a85e19fc70048b1c207fa8087cd8b 100644 (file)
@@ -118,7 +118,7 @@ doc-subtab: level
 </nav>
 {% endcapture %}
 
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
 
 <section class="section">
   <div class="container">
index ec5aed7d0cfe0ebe7dd8627f6ffe49214a8a83f7..805ddc9614fd4f107010a85b08bb259bd5afcb46 100644 (file)
@@ -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">
index a2c35b6cc9a396431cb2c0654a8323f0fa5a2f9c..49c6bd33c2fa642249be08ba9cfeccccc561ef0c 100644 (file)
@@ -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">
index 57af1f9d5cd5730b74b73c04b05ee1c2973a3c6e..3a295c919db6f4e5bac56677ab077ff7580525ff 100644 (file)
@@ -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">
index a29fe36eafa02061f62d3fa6806159fc804f38c3..6a6cad716613544d3f40237dbb3464eee3c597b2 100644 (file)
@@ -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">
index 43620843b73b4d5ece6bda430cd261c56d3b2486..c6990a609cf6181dc8ced6c0150e08dfa93ff981 100644 (file)
@@ -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">
index b9383208f2bcb19e282d268a7603e4dc699ff7d8..0b50526d66d3bebc356a16d202af7510629cfcd6 100644 (file)
@@ -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">
index d7d13c2c00822e5dc3b542fb0036d6c60ae2991c..fbcbd108274e59f1869b430200574090735466e5 100644 (file)
@@ -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">
index 05be9fcfc9ba507c99783bd76934937db907a20e..523d0bcfa6ffa63d907e2616f5bb4e3a62e50c64 100644 (file)
@@ -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">
index a6e70f6f2b39a82782cd5c631ad4d61584d16c55..a0bda48f5f7786b9ca70277a2aebf13aab83e4c4 100644 (file)
@@ -16,7 +16,7 @@ colors:
 - danger
 ---
 
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
 
 <section class="section">
   <div class="container">
index 34d84ab6cc554993133a1daeb9679c67a2159453..0491c67722f23215d172b4c37d4e71a29b358e00 100644 (file)
@@ -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">
index e19f65bc76db46b6cfece01fd9a8ddd1fb02127b..0c02ea6ebf3b02da3407102cd987e565e986ba85 100644 (file)
@@ -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">
index dcc9cebfb71302b912cf480ee187c2a117603203..9d22ed4d76da037788b2b5f77ef7ffc344b897c3 100644 (file)
@@ -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">
index 99261ba872385fda70844c4c4b6a21cddefe45a9..d6e5340c5edbfaa166d7ece51ee196584d47b289 100644 (file)
@@ -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">
index 74cd5643371cc89faf34d5399999d15b9802eabc..6f2dd62cdd347f1432010cb2d4330f7b505e4d20 100644 (file)
@@ -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>
index a5a03d78f5d95176c0ebfe0b269b3b65cd1a90b3..15fa6b775ef925b81035bfcfd79be22d90e7a0df 100644 (file)
@@ -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">
index bd585d6cdfea69e1b95dcd1d6d9302ed2dc5bd87..618015a288defc33f473067ddebbf4a0632c58aa 100644 (file)
@@ -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">
diff --git a/docs/images/book/book-cover.png b/docs/images/book/book-cover.png
new file mode 100644 (file)
index 0000000..5244401
Binary files /dev/null and b/docs/images/book/book-cover.png differ
diff --git a/docs/images/book/book-cover@2x.png b/docs/images/book/book-cover@2x.png
new file mode 100644 (file)
index 0000000..d508dda
Binary files /dev/null and b/docs/images/book/book-cover@2x.png differ
diff --git a/docs/images/hab/lightpaperfibers_@2X.png b/docs/images/hab/lightpaperfibers_@2X.png
new file mode 100644 (file)
index 0000000..0cef956
Binary files /dev/null and b/docs/images/hab/lightpaperfibers_@2X.png differ
index f587c6bfd244f67407a396e2188a34c0dd0e4a6c..746fcc23830a96074d3c4a4b93aede3b17ce05c3 100644 (file)
@@ -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>
index dd33795ef94e372e7ce1fe6fd693c01cd8f416cb..1c4e4130fb1d101a850e50dfeaca178d248e9376 100644 (file)
@@ -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');
     }