Add nav, Enhance tabs

sass/base/helpers.sass

@@ -101,4 +101,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   margin: 0 !important
 
 .is-unselectable
-  +unselectable
+  @extend .unselectable

sass/components/components.sass

@@ -7,6 +7,7 @@
 @import "menu"
 @import "message"
 @import "modal"
+@import "nav"
 @import "navbar"
 @import "pagination"
 @import "panel"

sass/components/nav.sass

@@ -0,0 +1,104 @@
+.nav
+  align-items: stretch
+  background: $white
+  display: flex
+  min-height: $nav-height
+  position: relative
+  text-align: center
+  z-index: 2
+  & > .container
+    align-items: stretch
+    display: flex
+    min-height: $nav-height
+    width: 100%
+  +tablet
+    & > .container
+      & > .nav-left
+        margin-left: -10px
+      & > .nav-right
+        margin-left: -10px
+
+.nav-toggle
+  @extend .hamburger
+  // Responsiveness
+  +tablet
+    display: none
+
+// Elements
+
+.nav-item
+  align-items: center
+  display: flex
+  justify-content: center
+  padding: 10px
+  a
+    flex-grow: 1
+  img
+    max-height: 24px
+  .button + .button
+    margin-left: 10px
+  .tag
+    &:first-child
+      margin-right: 5px
+    &:last-child
+      margin-left: 5px
+  // Responsiveness
+  +mobile
+    justify-content: flex-start
+
+.nav-item a,
+a.nav-item
+  color: $text
+  &:hover
+    color: $link-hover
+  // Modifiers
+  &.is-active
+    color: $link-active
+
+.nav-tab
+  align-items: center
+  border-bottom: 1px solid transparent
+  color: $text
+  display: block
+  height: $nav-height
+  line-height: 24px
+  padding: 13px 15px
+  &:hover
+    border-bottom: 1px solid $link
+  // Modifiers
+  &.is-active
+    border-bottom: 3px solid $link
+    color: $link
+
+// Containers
+
+.nav-menu
+  // Responsiveness
+  +mobile
+    background: $white
+    box-shadow: 0 4px 7px rgba($black, 0.1)
+    left: 0
+    display: none
+    right: 0
+    top: 100%
+    position: absolute
+    .nav-item
+      border-top: 1px solid rgba($border, 0.5)
+      padding: 10px
+    // Modifiers
+    &.is-active
+      display: block
+
+.nav-left
+  align-items: stretch
+  display: flex
+  flex: 1
+  overflow: hidden
+  overflow-x: auto
+  white-space: nowrap
+
+.nav-right
+  align-items: stretch
+  // Responsiveness
+  +tablet
+    display: flex

sass/components/tabs.sass

@@ -1,5 +1,9 @@
 .tabs
   @extend .block
+  @extend .unselectable
+  align-items: stretch
+  display: flex
+  justify-content: space-between
   line-height: 24px
   overflow: hidden
   overflow-x: auto
@@ -11,78 +15,70 @@
     display: flex
     justify-content: center
     margin-bottom: -1px
-    padding: 5px 0
+    padding: 6px 12px
     vertical-align: top
     &:hover
       border-bottom-color: $text-strong
       color: $text-strong
   li
     display: block
-    vertical-align: top
-    & + li
-      margin-left: 20px
-    // Modifiers
     &.is-active
       a
         border-bottom-color: $link
         color: $link
   ul
+    align-items: center
     border-bottom: 1px solid $border
     display: flex
+    flex: 1
+    justify-content: flex-start
+    &.is-left
+      padding-right: 10px
+    &.is-center
+      flex: none
+      justify-content: center
+      padding-left: 10px
+      padding-right: 10px
+    &.is-right
+      justify-content: flex-end
+      padding-left: 10px
   .icon
     &:first-child
-      margin-right: 5px
+      margin-right: 8px
     &:last-child
-      margin-left: 5px
+      margin-left: 8px
-  // Modifiers
+  // Alignment
+  &.is-centered
+    ul
+      justify-content: center
+  &.is-right
+    ul
+      justify-content: flex-end
+  // Styles
   &.is-boxed
     a
       border: 1px solid transparent
       border-radius: $radius $radius 0 0
-      padding: 5px 15px
+      padding-bottom: 5px
+      padding-top: 5px
       &:hover
         background: $background
         border-bottom-color: $border
     li
-      & + li
-        margin-left: 5px
-      // Modifiers
       &.is-active
         a
           background: $white
           border-color: $border
           border-bottom-color: transparent
-    // Modifiers
-    &.is-centered
-      li
-        &,
-        & + li
-          margin: 0 2px
-  &.is-centered
-    a
-      padding: 5px 10px
-    li
-      & + li
-        margin-left: 0
-    ul
-      justify-content: center
-      text-align: center
   &.is-fullwidth
     li
       flex: 1
-      & + li
-        margin-left: 0
-    ul
-      justify-content: center
-      text-align: center
-  &.is-right
-    ul
-      justify-content: flex-end
   &.is-toggle
     a
       border: 1px solid $border
       margin-bottom: 0
-      padding: 5px 10px
+      padding-bottom: 5px
+      padding-top: 5px
       position: relative
       &:hover
         background: $background
@@ -95,7 +91,6 @@
         border-radius: $radius 0 0 $radius
       &:last-child a
         border-radius: 0 $radius $radius 0
-      // Modifiers
       &.is-active
         a
           background: $primary
@@ -104,3 +99,31 @@
           z-index: 1
     ul
       border-bottom: none
+  // Sizes
+  &.is-small
+    font-size: $size-small
+    a
+      padding: 2px 8px
+    &.is-boxed,
+    &.is-toggle
+      a
+        padding-bottom: 1px
+        padding-top: 1px
+  &.is-medium
+    font-size: $size-medium
+    a
+      padding: 10px 16px
+    &.is-boxed,
+    &.is-toggle
+      a
+        padding-bottom: 9px
+        padding-top: 9px
+  &.is-large
+    font-size: $size-large
+    a
+      padding: 14px 20px
+    &.is-boxed,
+    &.is-toggle
+      a
+        padding-bottom: 13px
+        padding-top: 13px

sass/elements/button.sass

@@ -18,7 +18,7 @@
 
 .button
   +control
-  +unselectable
+  @extend .unselectable
   justify-content: center
   padding-left: 10px
   padding-right: 10px
@@ -95,8 +95,6 @@
   &[disabled],
   &.is-disabled
     opacity: 0.5
-  &.is-flexible
-    height: auto
   &.is-fullwidth
     display: block
     width: 100%

sass/elements/other.sass

@@ -1,5 +1,5 @@
 .delete
-  +unselectable
+  @extend .unselectable
   -moz-appearance: none
   -webkit-appearance: none
   background: rgba($black, 0.2)
@@ -56,9 +56,9 @@
 .hamburger
   cursor: pointer
   display: block
-  height: 50px
+  height: $nav-height
   position: relative
-  width: 50px
+  width: $nav-height
   span
     background: $text
     display: block
@@ -92,9 +92,6 @@
         margin-left: -5px
         transform: rotate(-45deg)
         transform-origin: left bottom
-  +tablet
-    height: $header-height
-    width: $header-height
 
 .heading
   display: block
@@ -180,3 +177,11 @@
     .delete
       margin-left: 4px
       margin-right: -8px
+
+.unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+

sass/layout/header.sass

@@ -3,16 +3,18 @@
   background: $white
   display: flex
   line-height: 24px
+  min-height: $header-height
   position: relative
   text-align: center
   z-index: 2
   .container
     align-items: stretch
     display: flex
+    min-height: $header-height
     width: 100%
   // Modifiers
   &.has-shadow
-    box-shadow: 0 1px 2px rgba($black, 0.1)
+    box-shadow: 0 2px 3px rgba($black, 0.1)
   // Responsiveness
   +mobile
     .container
@@ -62,13 +64,6 @@ a.header-item
   &.is-active
     color: $link-active
 
-.header-icon
-  +fa(14px, 24px)
-  color: $text
-  margin: 0 5px
-  &:hover
-    color: $link-hover
-
 .header-tab
   align-items: center
   border-bottom: 1px solid transparent

sass/layout/hero.sass

@@ -1,3 +1,5 @@
+// Components
+
 .hero-video
   +overlay
   overflow: hidden
@@ -15,18 +17,12 @@
   +mobile
     display: none
 
-.hero-content
-  padding: 40px 20px
-  // Responsiveness
-  +desktop
-    padding: 40px 0
-
 .hero-buttons
   margin-top: 20px
   // Responsiveness
   +mobile
     .button
-      display: block
+      display: flex
       &:not(:last-child)
         margin-bottom: 10px
   +tablet
@@ -35,21 +31,37 @@
     .button:not(:last-child)
       margin-right: 20px
 
+// Containers
+
+.hero-head,
+.hero-foot
+  flex-shrink: 0
+
+.hero-body
+  flex: 1
+  padding: 40px 20px
+  // Responsiveness
+  +desktop
+    padding-left: 0
+    padding-right: 0
+
+// Main container
+
 .hero
+  align-items: stretch
   background: $white
-  .header
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  .nav
     background: none
-    .container
+    & > .container
       box-shadow: 0 1px 0 rgba($border, 0.3)
   .tabs
     a
       border: none
     ul
       border-bottom: none
-    // Modifiers
-    &.is-boxed
-      a
-        padding: 8px 15px
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -67,11 +79,11 @@
         a,
         strong
           color: $color-invert
-      .header .container
+      .nav
-        box-shadow: 0 1px 0 rgba($color-invert, 0.2)
+        & > .container
-      .header-icon,
+          box-shadow: 0 1px 0 rgba($color-invert, 0.2)
-      a.header-item,
+      a.nav-item,
-      .header-item > a:not(.button)
+      .nav-item a:not(.button)
         color: rgba($color-invert, 0.5)
         &:hover,
         &.is-active
@@ -82,8 +94,9 @@
           opacity: 0.5
           &:hover
             opacity: 1
-        li.is-active a
+        li
-          opacity: 1
+          &.is-active a
+            opacity: 1
         &.is-boxed,
         &.is-toggle
           a
@@ -102,7 +115,7 @@
         background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
       // Responsiveness
       +mobile
-        .header-toggle
+        .nav-toggle
           span
             background: $color-invert
           &:hover
@@ -110,46 +123,26 @@
           &.is-active
             span
               background: $color-invert
-        .header-menu
+        .nav-menu
-          .header-item
+          .nav-item
             border-top-color: rgba($color-invert, 0.2)
   // Sizes
-  &.is-fullheight,
-  &.is-large
-    // Responsiveness
-    +tablet
-      .tabs
-        font-size: $size-medium
   &.is-medium
-    // Responsiveness
     +tablet
-      .hero-content
+      .hero-body
-        padding: 120px 20px
+        padding-bottom: 120px
-    +desktop
+        padding-top: 120px
-      .hero-content
+  &.is-large
-        padding: 120px 0
+    +tablet
+      .hero-body
+        padding-bottom: 240px
+        padding-top: 240px
   &.is-fullheight
-    align-items: stretch
-    display: flex
-    flex-direction: column
-    justify-content: space-between
     min-height: 100vh
-    .tabs
+    .hero-body
-      a
+      align-items: stretch
-        padding: 15px 20px
-    .hero-content
       display: flex
-      flex: 1
       flex-direction: column
       justify-content: center
-  &.is-large
+      padding-bottom: 240px
-    .tabs
+      padding-top: 240px
-      a
-        padding: 10px 15px
-    // Responsiveness
-    +tablet
-      .hero-content
-        padding: 240px 20px
-    +desktop
-      .hero-content
-        padding: 240px 0

sass/utilities/mixins.sass

@@ -55,13 +55,6 @@
   text-indent: -290486px
   width: $width
 
-=unselectable
-  -webkit-touch-callout: none
-  -webkit-user-select: none
-  -moz-user-select: none
-  -ms-user-select: none
-  user-select: none
-
 =from($device)
   @media screen and (min-width: $device)
     @content

sass/utilities/variables.sass

@@ -49,6 +49,8 @@ $column-gap: 20px !default
 
 $header-height: 50px !default
 
+$nav-height: 50px !default
+
 // Miscellaneous
 
 $easing: ease-out !default