Add navbar component, Fix JS highlight

docs/_includes/blog-hero.html

@@ -1,4 +1,6 @@
-{% include navbar.html %}
+<div class="container">
+  {% include navbar.html %}
+</div>
 
 <section class="hero is-primary">
   <div class="hero-body">

docs/_includes/navbar.html

@@ -1,99 +1,97 @@
-<div class="container">
-  <nav class="navbar {% if include.transparent %}is-transparent{% endif %}">
-    <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">
-      </a>
+<nav class="navbar {% if include.transparent %}is-transparent{% endif %}">
+  <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">
+    </a>
 
-      <a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank">
-        <span class="icon" style="color: #333;">
-          <i class="fa fa-github"></i>
-        </span>
-      </a>
+    <a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank">
+      <span class="icon" style="color: #333;">
+        <i class="fa fa-github"></i>
+      </span>
+    </a>
 
-      <a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
-        <span class="icon" style="color: #55acee;">
-          <i class="fa fa-twitter"></i>
-        </span>
-      </a>
+    <a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
+      <span class="icon" style="color: #55acee;">
+        <i class="fa fa-twitter"></i>
+      </span>
+    </a>
 
-      <div id="navBurger" class="navbar-burger">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
+    <div id="navBurger" class="navbar-burger">
+      <span></span>
+      <span></span>
+      <span></span>
     </div>
+  </div>
 
-    <div id="navMenu" class="navbar-menu">
-      <div class="navbar-start">
-        <a class="navbar-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
-          Home
+  <div id="navMenu" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
+        Home
+      </a>
+      <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 }}">
+          Docs
         </a>
-        <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 }}">
-            Docs
+        <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 }}">
+            Overview
           </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 }}">
-              Overview
-            </a>
-            <a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
-              Modifiers
-            </a>
-            <a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
-              Grid
-            </a>
-            <a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
-              Elements
-            </a>
-            <a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
-              Components
-            </a>
-            <a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
-              Layout
-            </a>
-            <hr class="navbar-divider">
-            <div class="navbar-item">
-              <div>version <p class="has-text-info">{{ site.version }}</p></div>
-            </div>
+          <a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
+            Modifiers
+          </a>
+          <a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
+            Grid
+          </a>
+          <a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
+            Elements
+          </a>
+          <a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
+            Components
+          </a>
+          <a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
+            Layout
+          </a>
+          <hr class="navbar-divider">
+          <div class="navbar-item">
+            <div>version <p class="has-text-info">{{ site.version }}</p></div>
           </div>
         </div>
-        <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
-            Blog
-          </a>
-          <div id="blogDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
-            {% for post in site.posts limit:3 %}
-              <a class="navbar-item" href="{{ post.url }}">
-                <div class="navbar-content">
-                  <p>
-                    <small>{{ post.date | date_to_string }}</small>
-                  </p>
-                  <p>{{ post.title }}</p>
-                </div>
-              </a>
-            {% endfor %}
-            <a class="navbar-item" href="{{ site.url }}/blog/">
-              More posts
-            </a>
-            <hr class="navbar-divider">
-            <div class="navbar-item">
+      </div>
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
+          Blog
+        </a>
+        <div id="blogDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
+          {% for post in site.posts limit:3 %}
+            <a class="navbar-item" href="{{ post.url }}">
               <div class="navbar-content">
-                <div class="level is-mobile">
-                  <div class="level-left">
-                    <div class="level-item">
-                      <strong>Stay up to date!</strong>
-                    </div>
+                <p>
+                  <small>{{ post.date | date_to_string }}</small>
+                </p>
+                <p>{{ post.title }}</p>
+              </div>
+            </a>
+          {% endfor %}
+          <a class="navbar-item" href="{{ site.url }}/blog/">
+            More posts
+          </a>
+          <hr class="navbar-divider">
+          <div class="navbar-item">
+            <div class="navbar-content">
+              <div class="level is-mobile">
+                <div class="level-left">
+                  <div class="level-item">
+                    <strong>Stay up to date!</strong>
                   </div>
-                  <div class="level-right">
-                    <div class="level-item">
-                      <a class="button is-rss is-small" href="{{ site.url }}/atom.xml">
-                        <span class="icon is-small">
-                          <i class="fa fa-rss"></i>
-                        </span>
-                        <span>Subscribe</span>
-                      </a>
-                    </div>
+                </div>
+                <div class="level-right">
+                  <div class="level-item">
+                    <a class="button is-rss is-small" href="{{ site.url }}/atom.xml">
+                      <span class="icon is-small">
+                        <i class="fa fa-rss"></i>
+                      </span>
+                      <span>Subscribe</span>
+                    </a>
                   </div>
                 </div>
               </div>
@@ -101,41 +99,41 @@
           </div>
         </div>
       </div>
+    </div>
 
-      <div class="navbar-end">
-        <a class="navbar-item" href="{{ site.github }}" target="_blank">
-          Github
-        </a>
-        <a class="navbar-item" href="{{ site.twitter }}" target="_blank">
-          Twitter
-        </a>
-        <div class="navbar-item">
-          <div class="field is-grouped">
-            <p class="control">
-              <a id="twitter"
-                class="button"
-                data-social-network="Twitter"
-                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">
-                <span class="icon">
-                  <i class="fa fa-twitter"></i>
-                </span>
-                <span>Tweet</span>
-              </a>
-            </p>
-            <p class="control">
-              <a class="button is-primary" href="{{ site.download }}">
-                <span class="icon">
-                  <i class="fa fa-download"></i>
-                </span>
-                <span>Download</span>
-              </a>
-            </p>
-          </div>
+    <div class="navbar-end">
+      <a class="navbar-item" href="{{ site.github }}" target="_blank">
+        Github
+      </a>
+      <a class="navbar-item" href="{{ site.twitter }}" target="_blank">
+        Twitter
+      </a>
+      <div class="navbar-item">
+        <div class="field is-grouped">
+          <p class="control">
+            <a id="twitter"
+              class="button"
+              data-social-network="Twitter"
+              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">
+              <span class="icon">
+                <i class="fa fa-twitter"></i>
+              </span>
+              <span>Tweet</span>
+            </a>
+          </p>
+          <p class="control">
+            <a class="button is-primary" href="{{ site.download }}">
+              <span class="icon">
+                <i class="fa fa-download"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </p>
         </div>
       </div>
     </div>
-  </nav>
-</div>
+  </div>
+</nav>

docs/_javascript/main.js

@@ -15,15 +15,14 @@ document.addEventListener('DOMContentLoaded', () => {
   // Modals
 
   const $html = document.documentElement;
-  const $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0);
-  const $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0);
-  const $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0);
+  const $modals = getAll('.modal');
+  const $modalButtons = getAll('.modal-button');
+  const $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
 
   if ($modalButtons.length > 0) {
     $modalButtons.forEach($el => {
       $el.addEventListener('click', () => {
         const target = $el.dataset.target;
-        console.log('target', target);
         const $target = document.getElementById(target);
         $html.classList.add('is-clipped');
         $target.classList.add('is-active');
@@ -53,4 +52,60 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
+  // Clipboard
+
+  const $highlights = getAll('.highlight');
+  let itemsProcessed = 0;
+
+  if ($highlights.length > 0) {
+    $highlights.forEach($el => {
+      const copy = '<button class="copy">Copy</button>';
+      const expand = '<button class="expand">Expand</button>';
+      $el.insertAdjacentHTML('beforeend', copy);
+
+      if ($el.firstElementChild.scrollHeight > 600) {
+        $el.insertAdjacentHTML('beforeend', expand);
+      }
+
+      itemsProcessed++;
+      if (itemsProcessed === $highlights.length) {
+        addHighlightControls();
+      }
+    });
+  }
+
+  function addHighlightControls() {
+    const $highlightButtons = getAll('.highlight .copy, .highlight .expand');
+
+    $highlightButtons.forEach($el => {
+      $el.addEventListener('mouseenter', () => {
+        $el.parentNode.style.boxShadow = '0 0 0 1px #ed6c63';
+      });
+
+      $el.addEventListener('mouseleave', () => {
+        $el.parentNode.style.boxShadow = 'none';
+      });
+    });
+
+    const $highlightExpands = getAll('.highlight .expand');
+
+    $highlightExpands.forEach($el => {
+      $el.addEventListener('click', () => {
+        $el.parentNode.firstElementChild.style.maxHeight = 'none';
+      });
+    });
+  }
+
+  new Clipboard('.copy', {
+    target: function(trigger) {
+      return trigger.previousSibling;
+    }
+  });
+
+  // Functions
+
+  function getAll(selector) {
+    return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
+  }
+
 });

docs/_layouts/documentation.html

@@ -3,7 +3,9 @@ layout: default
 route: documentation
 ---
 
-{% include navbar.html %}
+<div class="container">
+  {% include navbar.html %}
+</div>
 
 <section class="hero is-primary">
   <div class="hero-body">

docs/_posts/2017-07-02-new-navbar-component.md

@@ -0,0 +1,6 @@
+---
+layout: post
+title: "RIP nav; long live the navbar!"
+published: true
+introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
+---

docs/blog.html

@@ -20,8 +20,8 @@ route: blog
           </h2>
         </div>
         <div class="column is-8">
-          <div class="content">
-            {{ post.content }}
+          <div class="content is-medium">
+            {{ post.introduction }}
           </div>
         </div>
       </div>

docs/bulma-docs.sass

@@ -13,6 +13,10 @@
 @import "./_sass/bsa"
 @import "./_sass/route"
 
+\:root
+  --primary: #{$primary}
+  --gap: 0.75rem
+
 html
   \::-moz-selection
     background: $primary

docs/css/bulma-docs.css

@@ -174,7 +174,7 @@ input[type="radio"] {
 }
 
 small {
-  font-size: 0.8em;
+  font-size: 0.875em;
 }
 
 span {
@@ -1716,14 +1716,12 @@ input[type="submit"].button {
 .content ol {
   list-style: decimal outside;
   margin-left: 2em;
-  margin-right: 2em;
   margin-top: 1em;
 }
 
 .content ul {
   list-style: disc outside;
   margin-left: 2em;
-  margin-right: 2em;
   margin-top: 1em;
 }
 
@@ -4549,6 +4547,9 @@ a.navbar-item.is-active,
     padding: 0.375rem 1rem;
     white-space: nowrap;
   }
+  .navbar-dropdown a.navbar-item {
+    padding-right: 3rem;
+  }
   .navbar-dropdown.is-boxed {
     border-radius: 5px;
     border-top: none;
@@ -8192,6 +8193,11 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   }
 }
 
+:root {
+  --primary: #00d1b2;
+  --gap: 0.75rem;
+}
+
 html ::-moz-selection {
   background: #00d1b2;
   color: #fff;

docs/documentation/components/navbar.html

@@ -6,19 +6,81 @@ doc-subtab: navbar
 
 {% include subnav-components.html %}
 
+{% capture navbar_example %}
+{% include navbar.html %}
+{% endcapture %}
+
 <section class="section">
   <div class="container">
+
     <h1 class="title">Navbar</h1>
     <h2 class="subtitle">
       A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
     </h2>
 
+    <hr>
+
     <div class="message is-success">
       <div class="message-body">
         <p>The new <code>.navbar</code> replaces the old <code>.nav</code> component. You can still access its documentation <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
       </div>
     </div>
 
-    <hr>
+    <div class="content">
+      <p>
+        The <code>.navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
+      </p>
+      <ul>
+        <li>
+          <code>.navbar</code> the <strong>main</strong> container
+          <ul>
+            <li>
+              <code>.navbar-brand</code> the <strong>left side</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
+              <ul>
+                <li>
+                  <code>.navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
+                </li>
+              </ul>
+            </li>
+            <li>
+              <code>.navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
+              <ul>
+                <li>
+                  <code>.navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
+                </li>
+                <li>
+                  <code>.navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
+                  <ul>
+                    <li>
+                      <code>.navbar-item</code> each <strong>single item</strong> of the navbar, which can either be a <code>a</code> or a <code>div</code>
+                      <ul>
+                        <li>
+                          <code>.navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
+                        </li>
+                        <li>
+                          <code>.navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
+                          <ul>
+                            <li>
+                              <code>.navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <div class="example is-paddingless">
+      {{navbar_example}}
+    </div>
+
+    {% highlight html %}{{navbar_example}}{% endhighlight %}
+
   </div>
 </section>

docs/index.html

@@ -3,7 +3,9 @@ layout: default
 route: index
 ---
 
-{% include navbar.html transparent=true boxed=true %}
+<div class="container">
+  {% include navbar.html transparent=true boxed=true %}
+</div>
 
 <section class="hero is-medium has-text-centered">
   <div class="hero-body">

docs/lib/index.js

@@ -4,7 +4,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
   var $grid = document.getElementById('grid');
   var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
-  console.log('$columns', $columns);
   var $markup = document.querySelector('#markup code');
   var $message = document.getElementById('message');
   var $add = document.getElementById('add');

docs/lib/main.js

@@ -17,15 +17,14 @@ document.addEventListener('DOMContentLoaded', function () {
   // Modals
 
   var $html = document.documentElement;
-  var $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0);
-  var $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0);
-  var $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0);
+  var $modals = getAll('.modal');
+  var $modalButtons = getAll('.modal-button');
+  var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
 
   if ($modalButtons.length > 0) {
     $modalButtons.forEach(function ($el) {
       $el.addEventListener('click', function () {
         var target = $el.dataset.target;
-        console.log('target', target);
         var $target = document.getElementById(target);
         $html.classList.add('is-clipped');
         $target.classList.add('is-active');
@@ -54,4 +53,60 @@ document.addEventListener('DOMContentLoaded', function () {
       $el.classList.remove('is-active');
     });
   }
+
+  // Clipboard
+
+  var $highlights = getAll('.highlight');
+  var itemsProcessed = 0;
+
+  if ($highlights.length > 0) {
+    $highlights.forEach(function ($el) {
+      var copy = '<button class="copy">Copy</button>';
+      var expand = '<button class="expand">Expand</button>';
+      $el.insertAdjacentHTML('beforeend', copy);
+
+      if ($el.firstElementChild.scrollHeight > 600) {
+        $el.insertAdjacentHTML('beforeend', expand);
+      }
+
+      itemsProcessed++;
+      if (itemsProcessed === $highlights.length) {
+        addHighlightControls();
+      }
+    });
+  }
+
+  function addHighlightControls() {
+    var $highlightButtons = getAll('.highlight .copy, .highlight .expand');
+
+    $highlightButtons.forEach(function ($el) {
+      $el.addEventListener('mouseenter', function () {
+        $el.parentNode.style.boxShadow = '0 0 0 1px #ed6c63';
+      });
+
+      $el.addEventListener('mouseleave', function () {
+        $el.parentNode.style.boxShadow = 'none';
+      });
+    });
+
+    var $highlightExpands = getAll('.highlight .expand');
+
+    $highlightExpands.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+        $el.parentNode.firstElementChild.style.maxHeight = 'none';
+      });
+    });
+  }
+
+  new Clipboard('.copy', {
+    target: function target(trigger) {
+      return trigger.previousSibling;
+    }
+  });
+
+  // Functions
+
+  function getAll(selector) {
+    return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
+  }
 });

sass/base/generic.sass

@@ -69,7 +69,7 @@ input[type="radio"]
   vertical-align: baseline
 
 small
-  font-size: 0.8em
+  font-size: 0.875em
 
 span
   font-style: inherit

sass/components/navbar.sass

@@ -11,6 +11,7 @@ $navbar-dropdown-border: $border !default
 $navbar-dropdown-offset: -4px !default
 $navbar-dropdown-arrow: $link !default
 $navbar-dropdown-radius: $radius-large !default
+$navbar-dropdown-z: 20 !default
 
 $navbar-dropdown-item-hover-background: $background !default
 $navbar-dropdown-item-active: $primary !default
@@ -156,10 +157,12 @@ a.navbar-item,
     min-width: 100%
     position: absolute
     top: 100%
-    z-index: 20
+    z-index: $navbar-dropdown-z
     .navbar-item
       padding: 0.375rem 1rem
       white-space: nowrap
+    a.navbar-item
+      padding-right: 3rem
     &.is-boxed
       border-radius: $navbar-dropdown-radius
       border-top: none

sass/elements/content.sass

@@ -54,12 +54,10 @@
   ol
     list-style: decimal outside
     margin-left: 2em
-    margin-right: 2em
     margin-top: 1em
   ul
     list-style: disc outside
     margin-left: 2em
-    margin-right: 2em
     margin-top: 1em
     ul
       list-style-type: circle
@@ -67,22 +65,22 @@
       ul
         list-style-type: square
   dd
-    margin-left: 2em
-  figure
-    text-align: center
-    img
-      display: inline-block
-    figcaption
-      font-style: italic
-  pre
+    margin-left: 2em
+  figure
+    text-align: center
+    img
+      display: inline-block
+    figcaption
+      font-style: italic
+  pre
     +overflow-touch
     overflow-x: auto
     padding: 1.25em 1.5em
     white-space: pre
-    word-wrap: normal
-  sup,
-  sub
-    font-size: 70%
+    word-wrap: normal
+  sup,
+  sub
+    font-size: 70%
   table
     width: 100%
     td,