Add level, Finish nav, Fix hero

CHANGELOG.md

@@ -4,6 +4,11 @@
 
 * Added: `.modal-card`
 * Added: display responsive utilites
+* Added: `.nav-center`
+* Added: `.tabs ul` left center right
+* Changed: `.navbar` renamed to `.level`
+* Changed: `.header` renamed to `.nav`
+* Fixed: `.hero` layout
 
 ## 0.0.25
 

sass/components/components.sass

@@ -3,12 +3,12 @@
 @import "card"
 @import "grid"
 @import "highlight"
+@import "level"
 @import "media"
 @import "menu"
 @import "message"
 @import "modal"
 @import "nav"
-@import "navbar"
 @import "pagination"
 @import "panel"
 @import "tabs"

sass/components/level.sass

@@ -0,0 +1,57 @@
+.level-item
+  .title,
+  .subtitle
+    margin-bottom: 0
+  // Responsiveness
+  +mobile
+    &:not(:last-child)
+      margin-bottom: 10px
+
+.level-left,
+.level-right
+  .level-item
+    &:not(:last-child)
+      margin-right: 10px
+    // Modifiers
+    &.is-flexible
+      flex: 1
+
+.level-left
+  // Responsiveness
+  +mobile
+    & + .level-right
+      margin-top: 20px
+  +tablet
+    align-items: center
+    display: flex
+
+.level-right
+  // Responsiveness
+  +tablet
+    align-items: center
+    display: flex
+    justify-content: flex-end
+
+.level
+  @extend .block
+  align-items: center
+  justify-content: space-between
+  code
+    border-radius: $radius
+  img
+    display: inline-block
+    vertical-align: top
+  // Modifiers
+  &.is-mobile
+    display: flex
+    & > .level-item
+      &:not(:last-child)
+        margin-bottom: 0
+      &:not(.is-narrow)
+        flex: 1
+  // Responsiveness
+  +tablet
+    display: flex
+    & > .level-item
+      &:not(.is-narrow)
+        flex: 1

sass/components/nav.sass

@@ -11,12 +11,9 @@
     display: flex
     min-height: $nav-height
     width: 100%
-  +tablet
+  // Modifiers
-    & > .container
+  &.has-shadow
-      & > .nav-left
+    box-shadow: 0 2px 3px rgba($black, 0.1)
-        margin-left: -10px
-      & > .nav-right
-        margin-left: -10px
 
 .nav-toggle
   @extend .hamburger
@@ -54,10 +51,22 @@ a.nav-item
   // Modifiers
   &.is-active
     color: $link-active
+  &.is-tab
+    border-bottom: 1px solid transparent
+    border-top: 1px solid transparent
+    padding-left: 12px
+    padding-right: 12px
+    &:hover
+      border-bottom: 1px solid $link
+      border-top: 1px solid transparent
+    &.is-active
+      border-bottom: 3px solid $link
+      border-top: 3px solid transparent
+      color: $link
 
 .nav-tab
   align-items: center
-  border-bottom: 1px solid transparent
+  border: 1px solid transparent
   color: $text
   display: block
   height: $nav-height
@@ -85,7 +94,6 @@ a.nav-item
     .nav-item
       border-top: 1px solid rgba($border, 0.5)
       padding: 10px
-    // Modifiers
     &.is-active
       display: block
 
@@ -93,12 +101,20 @@ a.nav-item
   align-items: stretch
   display: flex
   flex: 1
+  justify-content: flex-start
   overflow: hidden
   overflow-x: auto
   white-space: nowrap
 
-.nav-right
+.nav-center
   align-items: stretch
+  display: flex
+  justify-content: center
+
+.nav-right
   // Responsiveness
   +tablet
+    align-items: stretch
     display: flex
+    flex: 1
+    justify-content: flex-end

sass/components/tabs.sass

@@ -69,7 +69,7 @@
         a
           background: $white
           border-color: $border
-          border-bottom-color: transparent
+          border-bottom-color: transparent !important
   &.is-fullwidth
     li
       flex: 1

sass/elements/content.sass

@@ -1,6 +1,9 @@
 .content
   @extend .block
   // Inline
+  a
+    &:visited
+      color: $link-visited
   li + li
     margin-top: 0.25em
   // Block

sass/layout/hero.sass

@@ -55,11 +55,8 @@
   justify-content: space-between
   .nav
     background: none
-    & > .container
+    box-shadow: 0 1px 0 rgba($border, 0.3)
-      box-shadow: 0 1px 0 rgba($border, 0.3)
   .tabs
-    a
-      border: none
     ul
       border-bottom: none
   // Colors
@@ -80,8 +77,10 @@
         strong
           color: $color-invert
       .nav
-        & > .container
+        box-shadow: 0 1px 0 rgba($color-invert, 0.2)
-          box-shadow: 0 1px 0 rgba($color-invert, 0.2)
+      .nav-menu
+        +mobile
+          background: $color
       a.nav-item,
       .nav-item a:not(.button)
         color: rgba($color-invert, 0.5)
@@ -107,6 +106,7 @@
             &,
             &:hover
               background: $color-invert
+              border-color: $color-invert
               color: $color
       // Modifiers
       &.is-bold
@@ -140,9 +140,11 @@
   &.is-fullheight
     min-height: 100vh
     .hero-body
-      align-items: stretch
+      align-items: center
       display: flex
-      flex-direction: column
+      & > .container
-      justify-content: center
+        align-items: stretch
-      padding-bottom: 240px
+        display: flex
-      padding-top: 240px
+        flex: 1
+        flex-direction: column
+        justify-content: center

sass/layout/layout.sass

@@ -1,6 +1,5 @@
 @charset "utf-8"
 
-@import "header"
 @import "hero"
 @import "section"
 @import "footer"