Init navbar

docs/_includes/blog-hero.html

@@ -1,6 +1,4 @@
-<div class="container">
-  {% include header.html %}
-</div>
+{% include navbar.html %}
 
 <section class="hero is-primary">
   <div class="hero-body">
@@ -21,7 +19,7 @@
           </a>
         </div>
         <div class="column is-narrow">
-          {% include carbon.html %}
+          <!-- {% include carbon.html %} -->
         </div>
       </div>
     </div>

docs/_includes/navbar.html

@@ -0,0 +1,147 @@
+<nav class="navbar">
+  <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">
+      <span class="icon">
+        <i class="fa fa-github"></i>
+      </span>
+    </a>
+
+    <a class="navbar-item">
+      <span class="icon">
+        <i class="fa fa-twitter"></i>
+      </span>
+    </a>
+
+    <div class="navbar-burger">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+
+  <div class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item">
+        Home
+      </a>
+      <div class="navbar-item has-dropdown">
+        <a class="navbar-link">
+          Docs
+        </a>
+        <div class="navbar-dropdown">
+          <a class="navbar-item">
+            Overview
+          </a>
+          <a class="navbar-item">
+            Modifiers
+          </a>
+          <a class="navbar-item">
+            Grid
+          </a>
+          <a class="navbar-item">
+            Elements
+          </a>
+          <a class="navbar-item">
+            Components
+          </a>
+          <a class="navbar-item">
+            Layout
+          </a>
+          <hr class="navbar-divider">
+          <div class="navbar-item">
+            <div>version <p class="has-text-info">{{ site.version }}</p></div>
+          </div>
+          <!-- <div class="navbar-item">
+            <a class="button is-primary" href="{{ site.download }}">
+              <span class="icon">
+                <i class="fa fa-download"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </div> -->
+        </div>
+      </div>
+      <div class="navbar-item has-dropdown">
+        <a class="navbar-link">
+          Blog
+        </a>
+        <div class="navbar-dropdown" style="width: 18rem;">
+          {% for post in site.posts %}
+            <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 %}
+          <hr class="navbar-divider">
+          <div class="navbar-item">
+            <div class="navbar-content">
+              <div class="level">
+                <div class="level-left">
+                  <div class="level-item">
+                    <strong>Stay up to date!</strong>
+                  </div>
+                </div>
+                <div class="level-right">
+                  <div class="level-item">
+                    <a class="button is-warning is-small" href="{{ site.download }}">
+                      <span class="icon is-small">
+                        <i class="fa fa-rss"></i>
+                      </span>
+                      <span>Subscribe</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a class="navbar-item">
+        More
+      </a>
+    </div>
+
+    <div class="navbar-end">
+      <a class="navbar-item">
+        Github
+      </a>
+      <a class="navbar-item">
+        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>
+  </div>
+</nav>

docs/_layouts/default.html

@@ -3,6 +3,5 @@
   {% include head.html %}
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
     {{ content }}
-    {% include footer.html %}
   </body>
 </html>

sass/components/_all.sass

@@ -8,6 +8,7 @@
 @import "message.sass"
 @import "modal.sass"
 @import "nav.sass"
+@import "navbar.sass"
 @import "pagination.sass"
 @import "panel.sass"
 @import "tabs.sass"

sass/components/navbar.sass

@@ -0,0 +1,103 @@
+$navbar-color: $grey-dark !default
+$navbar-background: $white !default
+$navbar-dropdown-background: $white !default
+
+$navbar-height: 3.25rem !default
+
+.navbar
+  background-color: $navbar-background
+  min-height: $navbar-height
+  position: relative
+
+.navbar-brand
+  align-items: stretch
+  height: $navbar-height
+  display: flex
+
+.navbar-burger
+  +hamburger($navbar-height)
+  margin-left: auto
+
+.navbar-item,
+.navbar-link
+  align-items: center
+  color: $navbar-color
+  display: flex
+  line-height: 1.5
+  padding: 0.5rem 1rem
+  position: relative
+
+a.navbar-item,
+.navbar-link
+  &:hover
+    background-color: $background
+
+.navbar-item
+  // border-right: 1px solid $border
+  flex-grow: 0
+  flex-shrink: 0
+  img
+    max-height: 1.75rem
+  &.has-dropdown
+    align-items: stretch
+    padding: 0
+    &::after
+      +arrow($input-arrow)
+      margin-top: -0.375em
+      right: 1.125em
+      top: 50%
+
+.navbar-content
+  flex-grow: 1
+  flex-shrink: 1
+
+.navbar-link
+  padding-right: 2.5em
+
+.navbar-dropdown
+  background-color: $navbar-dropdown-background
+  border-bottom-left-radius: $radius-large
+  border-bottom-right-radius: $radius-large
+  // border-top: 1px solid $border
+  box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+  font-size: 0.875rem
+  left: 0
+  min-width: 100%
+  padding-bottom: 0.25rem
+  padding-top: 0.25rem
+  position: absolute
+  top: 100%
+  z-index: 20
+  .navbar-item
+    padding: 0.375rem 1rem
+
+.navbar-divider
+  background-color: $border
+  border: none
+  display: block
+  height: 1px
+  margin: 0.25rem 0
+
++mobile
+  .navbar-menu
+    background-color: $background
+    padding: 0.5rem 0
+
++tablet
+  .navbar,
+  .navbar-menu,
+  .navbar-start,
+  .navbar-end
+    align-items: stretch
+    display: flex
+  .navbar-burger
+    display: none
+  .navbar-menu
+    flex-grow: 1
+    flex-shrink: 0
+  .navbar-start
+    justify-content: flex-start
+    margin-right: auto
+  .navbar-end
+    justify-content: flex-end
+    margin-left: auto