Add spaced navbar

docs/_includes/global/navbar.html

@@ -1,4 +1,4 @@
-<nav id="navbar" class="navbar">
+<nav id="navbar" class="navbar is-spaced">
   <div class="container">
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">
@@ -47,7 +47,7 @@
         <a class="navbar-link" href="{{ site.url }}{{ link.path }}">
           {{ link.name }}
         </a>
-        <div id="moreDropdown" class="navbar-dropdown is-boxed">
+        <div id="moreDropdown" class="navbar-dropdown">
           {% for link_id in site.data.links.more %}
             {% assign link = site.data.links.by_id[link_id] %}
             <a class="navbar-item {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}/{{ link.path }}">

docs/_includes/global/scripts.html

@@ -6,11 +6,11 @@
   <script src="https://player.vimeo.com/api/player.js" ></script>
   <script type="text/javascript" src="{{ site.url }}/lib/index.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
   <script>
-    WebFont.load({
+    WebFontConfig = {
       google: {
         families: ['Nunito:400,700']
       }
-    });
+    };
     (function(d) {
       var wf = d.createElement('script'), s = d.scripts[0];
       wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';

docs/css/bulma-docs.css

@@ -6496,7 +6496,6 @@ body.has-navbar-fixed-bottom {
 
 a.navbar-item,
 .navbar-link {
-  border-radius: 4px;
   cursor: pointer;
 }
 
@@ -6631,13 +6630,23 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar-menu,
   .navbar-start,
   .navbar-end {
-    align-items: center;
+    align-items: stretch;
     display: flex;
   }
   .navbar {
     min-height: 3.25rem;
+  }
+  .navbar.is-spaced {
     padding: 1rem 2rem;
   }
+  .navbar.is-spaced .navbar-start,
+  .navbar.is-spaced .navbar-end {
+    align-items: center;
+  }
+  .navbar.is-spaced a.navbar-item,
+  .navbar.is-spaced .navbar-link {
+    border-radius: 4px;
+  }
   .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active,
   .navbar.is-transparent .navbar-link:hover,
   .navbar.is-transparent .navbar-link.is-active {
@@ -6672,7 +6681,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
     transform: rotate(135deg) translate(0.25em, -0.25em);
   }
   .navbar-item.has-dropdown-up .navbar-dropdown {
-    border-bottom: 1px solid #dbdbdb;
+    border-bottom: 2px solid #dbdbdb;
     border-radius: 6px 6px 0 0;
     border-top: none;
     bottom: 100%;
@@ -6682,7 +6691,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
     display: block;
   }
-  .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
+  .navbar.is-spaced .navbar-item.is-active .navbar-dropdown, .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
     opacity: 1;
     pointer-events: auto;
     transform: translateY(0);
@@ -6708,7 +6717,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
     background-color: white;
     border-bottom-left-radius: 6px;
     border-bottom-right-radius: 6px;
-    border-top: 1px solid #dbdbdb;
+    border-top: 2px solid #dbdbdb;
     box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
     display: none;
     font-size: 0.875rem;
@@ -6733,7 +6742,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
     background-color: whitesmoke;
     color: #3273dc;
   }
-  .navbar-dropdown.is-boxed {
+  .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed {
     border-radius: 6px;
     border-top: none;
     box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);

sass/components/navbar.sass

@@ -1,5 +1,8 @@
 $navbar-background-color: $white !default
+$navbar-box-shadow-size: 0 2px 0 0 !default
+$navbar-box-shadow-color: $background !default
 $navbar-height: 3.25rem !default
+$navbar-padding: 1rem 2rem !default
 $navbar-z: 30 !default
 $navbar-fixed-z: 30 !default
 
@@ -19,7 +22,7 @@ $navbar-tab-active-border-bottom-style: solid !default
 $navbar-tab-active-border-bottom-width: 3px !default
 
 $navbar-dropdown-background-color: $white !default
-$navbar-dropdown-border-top: 1px solid $border !default
+$navbar-dropdown-border-top: 2px solid $border !default
 $navbar-dropdown-offset: -4px !default
 $navbar-dropdown-arrow: $link !default
 $navbar-dropdown-radius: $radius-large !default
@@ -44,7 +47,7 @@ $navbar-divider-height: 2px !default
 
 .navbar
   background-color: $navbar-background-color
-  box-shadow: 0 2px 0 0 $background
+  box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
   min-height: $navbar-height
   position: relative
   z-index: $navbar-z
@@ -153,7 +156,7 @@ body
 
 a.navbar-item,
 .navbar-link
-  border-radius: $radius
+  // background-color: coral
   cursor: pointer
   &:hover,
   &.is-active
@@ -254,11 +257,18 @@ a.navbar-item,
   .navbar-menu,
   .navbar-start,
   .navbar-end
-    align-items: center
+    align-items: stretch
     display: flex
   .navbar
     min-height: $navbar-height
-    padding: 1rem 2rem
+    &.is-spaced
+      padding: $navbar-padding
+      .navbar-start,
+      .navbar-end
+        align-items: center
+      a.navbar-item,
+      .navbar-link
+        border-radius: $radius
     &.is-transparent
       a.navbar-item,
       .navbar-link
@@ -302,6 +312,7 @@ a.navbar-item,
     &.is-hoverable:hover
       .navbar-dropdown
         display: block
+        .navbar.is-spaced &,
         &.is-boxed
           opacity: 1
           pointer-events: auto
@@ -344,6 +355,7 @@ a.navbar-item,
       &.is-active
         background-color: $navbar-dropdown-item-active-background-color
         color: $navbar-dropdown-item-active-color
+    .navbar.is-spaced &,
     &.is-boxed
       border-radius: $navbar-dropdown-boxed-radius
       border-top: none