1 files changed, 33 insertions, 49 deletions

diff --git a/pages/assets/_leap.scss b/pages/assets/_leap.scss
index 7b961fe..866d79c 100644
--- a/pages/assets/_leap.scss
+++ b/pages/assets/_leap.scss
@@ -6,61 +6,44 @@ a:visited {
 // MASTHEAD
 //
 
-#masthead {
-  width: 100%;
-  margin: 0;
-  background-color: $masthead-bg-color;
-  border-bottom: $masthead-border;
-
-  @include gradient-vertical(lighten($masthead-bg-color,8%),$masthead-bg-color);
-  box-shadow: inset 0 0 8px 1px darken($masthead-bg-color, 8%);
-  box-shadow-top: 0;
-
-  .masthead-inner {
-    height: $masthead-height;
-    @include cutout-menu(
-      $ul-id: top-menu,
-      $active-bg: $cutout-color,
-      $left-indent: $masthead-text-left-margin,
-      $small-left-indent: $masthead-small-text-left-margin,
-      $small-screen: $small-screen);
-    @media (max-width: $small-screen) {
-      height: $masthead-small-height;
+header {
+    grid-area: header;
+    padding: $header-padding;
+    background-color: $header-bg-color;
+    text-align: center;
+
+    @include gradient-vertical(lighten($header-bg-color,8%),$header-bg-color);
+    box-shadow: inset 0 0 8px 1px darken($header-bg-color, 8%);
+    box-shadow-top: 0;
+    
+    > h1 {
+        color: $header-color;
+        font-weight: bold;
+        margin: $header-title-margin;
     }
-  }
-
-  .logo {
-    background: $masthead-bg;
-    @media (max-width: $small-screen) {
-      background: $masthead-small-bg;
-    }
-  }
-
-  h1 {
-    font-weight: bold;
-    white-space: nowrap;
-    margin: 0;
-    color: $masthead-color;
+}
 
-    line-height: $masthead-height;
-    font-size: $masthead-text-size;
-    padding-left: $masthead-text-left-margin - 2px;
+.nav-menu {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     @media (max-width: $small-screen) {
-      line-height: $masthead-small-height;
-      font-size: $masthead-small-text-size;
-      padding-left: $masthead-small-text-left-margin - 2px;
+        flex-direction: $nav-small-direction;
     }
-  }
+}
 
-  #top-menu a.tab {
+// If we don't add the "a" here, on hover styles won't be affected
+a.nav-item {
+    font-size: $nav-item-size;
+    padding: $nav-item-padding;
+    color: $nav-color;
+    background-color: $nav-bg-color;
     font-weight: bold;
-    color: white;
-    background: rgba(0,0,0,0.5);
-    &.active {
-      color: black;
-    }
-  }
+}
 
+a.active {
+    background-color: $nav-color;
+    color: $nav-bg-color;
 }
 
 //
@@ -256,4 +239,5 @@ article.page-summary {
 img.left {
   float:left;
   margin: 7px 14px 0px 0px;
-}
\ No newline at end of file
+}
+