Add dropdown

docs/_includes/navbar.html

@@ -1,16 +1,17 @@
+<div class="container">
 <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">
+    <a class="navbar-item is-hidden-desktop">
       <span class="icon">
         <i class="fa fa-github"></i>
       </span>
     </a>
 
-    <a class="navbar-item">
+    <a class="navbar-item is-hidden-desktop">
       <span class="icon">
         <i class="fa fa-twitter"></i>
       </span>
@@ -69,7 +70,7 @@
         <a class="navbar-link">
           Blog
         </a>
-        <div class="navbar-dropdown" style="width: 18rem;">
+        <div class="navbar-dropdown" data-style="width: 18rem;">
           {% for post in site.posts %}
             <a class="navbar-item" href="{{ post.url }}">
               <div class="navbar-content">
@@ -83,7 +84,7 @@
           <hr class="navbar-divider">
           <div class="navbar-item">
             <div class="navbar-content">
-              <div class="level">
+              <div class="level is-mobile">
                 <div class="level-left">
                   <div class="level-item">
                     <strong>Stay up to date!</strong>
@@ -145,3 +146,4 @@
     </div>
   </div>
 </nav>
+</div>

docs/css/bulma-docs.css

@@ -134,6 +134,7 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
+  overflow-x: hidden;
 }
 
 a {
@@ -4380,9 +4381,8 @@ a.nav-item.is-tab.is-active {
 
 .navbar-item,
 .navbar-link {
-  align-items: center;
   color: #4a4a4a;
-  display: flex;
+  display: block;
   line-height: 1.5;
   padding: 0.5rem 1rem;
   position: relative;
@@ -4403,26 +4403,9 @@ a.navbar-item:hover,
 }
 
 .navbar-item.has-dropdown {
-  align-items: stretch;
   padding: 0;
 }
 
-.navbar-item.has-dropdown::after {
-  border: 1px solid #00d1b2;
-  border-right: 0;
-  border-top: 0;
-  content: " ";
-  display: block;
-  height: 0.5em;
-  pointer-events: none;
-  position: absolute;
-  transform: rotate(-45deg);
-  width: 0.5em;
-  margin-top: -0.375em;
-  right: 1.125em;
-  top: 50%;
-}
-
 .navbar-content {
   flex-grow: 1;
   flex-shrink: 1;
@@ -4433,40 +4416,35 @@ a.navbar-item:hover,
 }
 
 .navbar-dropdown {
-  background-color: white;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 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;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
 }
 
 .navbar-dropdown .navbar-item {
-  padding: 0.375rem 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
 .navbar-divider {
   background-color: #dbdbdb;
   border: none;
-  display: block;
+  display: none;
   height: 1px;
-  margin: 0.25rem 0;
+  margin: 0.5rem 0;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 999px) {
+  .navbar-brand .navbar-item {
+    align-items: center;
+    display: flex;
+  }
   .navbar-menu {
-    background-color: whitesmoke;
     padding: 0.5rem 0;
   }
 }
 
-@media screen and (min-width: 769px), print {
+@media screen and (min-width: 1000px) {
   .navbar,
   .navbar-menu,
   .navbar-start,
@@ -4474,9 +4452,38 @@ a.navbar-item:hover,
     align-items: stretch;
     display: flex;
   }
+  .navbar {
+    height: 3.25rem;
+  }
   .navbar-burger {
     display: none;
   }
+  .navbar-item,
+  .navbar-link {
+    align-items: center;
+    display: flex;
+  }
+  .navbar-item.has-dropdown {
+    align-items: stretch;
+  }
+  .navbar-item.has-dropdown::after {
+    border: 1px solid #00d1b2;
+    border-right: 0;
+    border-top: 0;
+    content: " ";
+    display: block;
+    height: 0.5em;
+    pointer-events: none;
+    position: absolute;
+    transform: rotate(-45deg);
+    width: 0.5em;
+    margin-top: -0.375em;
+    right: 1.125em;
+    top: 50%;
+  }
+  .navbar-item.has-dropdown:hover .navbar-dropdown {
+    display: block;
+  }
   .navbar-menu {
     flex-grow: 1;
     flex-shrink: 0;
@@ -4489,6 +4496,31 @@ a.navbar-item:hover,
     justify-content: flex-end;
     margin-left: auto;
   }
+  .navbar-dropdown {
+    background-color: white;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top: 1px solid #dbdbdb;
+    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
+    display: none;
+    font-size: 0.875rem;
+    left: 0;
+    min-width: 100%;
+    position: absolute;
+    top: 100%;
+    z-index: 20;
+  }
+  .navbar-dropdown .navbar-item {
+    padding: 0.375rem 1rem;
+    white-space: nowrap;
+  }
+  .navbar-divider {
+    display: block;
+  }
+  .container > .navbar {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
 }
 
 .pagination {

sass/base/generic.sass

@@ -35,6 +35,7 @@ body
   font-size: 1rem
   font-weight: $weight-normal
   line-height: 1.5
+  overflow-x: hidden
 
 // Inline
 

sass/components/navbar.sass

@@ -20,9 +20,8 @@ $navbar-height: 3.25rem !default
 
 .navbar-item,
 .navbar-link
-  align-items: center
   color: $navbar-color
-  display: flex
+  display: block
   line-height: 1.5
   padding: 0.5rem 1rem
   position: relative
@@ -33,19 +32,12 @@ a.navbar-item,
     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
@@ -55,43 +47,54 @@ a.navbar-item,
   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
+  padding-bottom: 0.5rem
+  padding-top: 0.5rem
   .navbar-item
-    padding: 0.375rem 1rem
+    padding-left: 1.5rem
+    padding-right: 1.5rem
 
 .navbar-divider
   background-color: $border
   border: none
-  display: block
+  display: none
   height: 1px
-  margin: 0.25rem 0
+  margin: 0.5rem 0
 
-+mobile
++touch
+  .navbar-brand
+    .navbar-item
+      align-items: center
+      display: flex
   .navbar-menu
-    background-color: $background
     padding: 0.5rem 0
 
-+tablet
++desktop
   .navbar,
   .navbar-menu,
   .navbar-start,
   .navbar-end
     align-items: stretch
     display: flex
+  .navbar
+    height: $navbar-height
   .navbar-burger
     display: none
+  .navbar-item,
+  .navbar-link
+    align-items: center
+    display: flex
+  .navbar-item
+    &.has-dropdown
+      align-items: stretch
+      &::after
+        +arrow($input-arrow)
+        margin-top: -0.375em
+        right: 1.125em
+        top: 50%
+      &:hover
+        .navbar-dropdown
+          display: block
   .navbar-menu
     flex-grow: 1
     flex-shrink: 0
@@ -100,4 +103,25 @@ a.navbar-item,
     margin-right: auto
   .navbar-end
     justify-content: flex-end
-    margin-left: auto
+    margin-left: auto
+  .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)
+    display: none
+    font-size: 0.875rem
+    left: 0
+    min-width: 100%
+    position: absolute
+    top: 100%
+    z-index: 20
+    .navbar-item
+      padding: 0.375rem 1rem
+      white-space: nowrap
+  .navbar-divider
+    display: block
+  .container > .navbar
+    margin-left: -1rem
+    margin-right: -1rem