Navigation bar.

dist/assets.json

@@ -1,5 +1,6 @@
 {
-  "images/banner-one.jpg": "images/banner-one_bcd1d61f.jpg",
+  "images/banner-desktop.jpg": "images/banner-desktop_bcd1d61f.jpg",
+  "images/banner-mobile.jpg": "images/banner-mobile_f655d839.jpg",
   "images/banner-two.jpg": "images/banner-two_a620635c.jpg",
   "images/logo.png": "images/logo_10675684.png",
   "images/logo@2x.png": "images/logo@2x_7d05144c.png",
@@ -9,7 +10,7 @@
   "vendor/fontawesome-webfont.ttf?v=4.7.0": "vendor/fontawesome-webfont_b06871f2.ttf",
   "vendor/fontawesome-webfont.woff2?v=4.7.0": "vendor/fontawesome-webfont_af7ae505.woff2",
   "vendor/fontawesome-webfont.woff?v=4.7.0": "vendor/fontawesome-webfont_fee66e71.woff",
-  "scripts/customizer.js": "scripts/customizer_1001ca05.js",
+  "scripts/customizer.js": "scripts/customizer_66c3aaba.js",
-  "styles/main.css": "styles/main_1001ca05.css",
+  "styles/main.css": "styles/main_66c3aaba.css",
-  "scripts/main.js": "scripts/main_1001ca05.js"
+  "scripts/main.js": "scripts/main_66c3aaba.js"
 }

resources/assets/styles/layouts/_header.scss

@@ -1,6 +1,8 @@
 .banner {
-  background: url('../images/banner-one.jpg');
+  background: url('../images/banner-mobile.jpg');
+  background-size: cover;
   background-repeat: no-repeat;
+  background-position: bottom center;
 
   .container {
     display: flex;
@@ -8,7 +10,7 @@
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    max-width: 1435px;
+    max-width: 1440px;
     height: 560px;
   }
 
@@ -61,13 +63,29 @@
     }
   }
 
+  .brand {
+    display: block;
+    width: 109px;
+    height: 17px;
+    margin: 30px 0 0 17px;
+    align-self: flex-start;
+    background-image: url('../images/logo.png');
+    background-size: 109px 17px;
+    text-indent: -9999em;
+  }
+
   .primary-navigation {
+    position: absolute;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    top: 0;
     width: 100%;
-    margin-top: 30px;
+    height: 560px;
+    margin: 0 0 0 -100%;
     padding: 0 17px;
+    background: transparent;
+    transition: background 0.5s;
 
     a {
       font-family: Karla, sans-serif;
@@ -77,26 +95,17 @@
       line-height: 80px;
       text-decoration: none;
       display: none;
+    }
 
-      &.brand {
+    .sep {
-        display: block;
+      display: none;
-        width: 109px;
-        height: 17px;
-        align-self: flex-start;
-        background-image: url('../images/logo.png');
-        background-size: 109px 17px;
-        text-indent: -9999em;
-      }
     }
 
     &.is-visible {
-      position: absolute;
       z-index: 1;
       background: $brand-primary;
       justify-content: center;
-      height: 560px;
+      margin: 0;
-      top: 0;
-      margin-top: 0;
       padding: 0 52px;
 
       a {
@@ -137,33 +146,79 @@
 }
 
 @media (min-width: $medium) {
-  .banner nav {
+  .banner {
-    width: auto;
+    background-image: url('../images/banner-desktop.jpg');
-    display: flex;
 
-    a {
+    .container {
-      font-size: 18px;
+      margin: 0 auto;
+      height: 880px;
     }
-  }
 
-  .banner .catalog-navigation {
+    .toggle-menu {
-    justify-content: flex-start;
+      display: none;
-  }
+    }
 
-  .banner .meta-navigation {
+    .brand {
-    justify-content: flex-end;
+      align-self: center;
-  }
+      margin-top: 40px;
+      width: 247px;
+      height: 38px;
+      background-size: 247px 38px;
+    }
 
-  .banner h1 {
+    .primary-navigation {
-    font-size: 72px;
+      position: absolute;
-    letter-spacing: 1.8px;
+      width: 100%;
-    line-height: 40px;
+      max-width: 1440px;
-    margin-bottom: 0.5em;
+      height: 38px;
-  }
+      top: 40px;
+      margin: 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+
+      a {
+        font-size: 18px;
+        display: inline-block;
+        line-height: normal;
+        color: $black;
+
+        &:hover,
+        &:focus {
+          color: $brand-primary;
+        }
+
+        &.catalog {
+          margin-right: auto;
+        }
 
-  .banner h2 {
+        &.contact {
-    font-size: 30px;
+          margin: 0 1em 0 auto;
-    letter-spacing: 0.75px;
+        }
-    line-height: 40px;
+      }
+
+      .sep {
+        display: inline-block;
+        margin: 0 0.5em;
+      }
+    }
+
+    .branding {
+      height: 576px;
+    }
+
+    h1 {
+      font-size: 72px;
+      letter-spacing: 1.8px;
+      line-height: 40px;
+      margin-bottom: 0.5em;
+    }
+
+    h2 {
+      font-size: 30px;
+      letter-spacing: 0.75px;
+      line-height: 40px;
+    }
   }
 }

resources/assets/styles/layouts/_pages.scss

@@ -18,10 +18,12 @@
       margin: 0;
 
       &::before {
+        content: "";
         display: block;
+        margin: 0 auto 1em;
         width: 46px;
         height: 5px;
-        color: $brand-primary;
+        background-color: $brand-secondary;
       }
     }
 
@@ -41,6 +43,15 @@
     flex-direction: column;
   }
 
+  .block.two {
+    color: $white;
+    background: $brand-secondary;
+
+    h3::before {
+      background-color: $white;
+    }
+  }
+
   .block.one,
   .block.two,
   .block.three,
@@ -52,6 +63,10 @@
 
 @media (min-width: $medium) {
   .home {
+    .wrap {
+      margin-top: -366px;
+    }
+
     .block {
       width: 775px;
       margin-bottom: 119px;
@@ -60,6 +75,10 @@
       h3 {
         font-size: 48px;
         line-height: 56px;
+
+        &::before {
+          width: 74px;
+        }
       }
 
       p {
@@ -105,11 +124,6 @@
       }
     }
 
-    .block.two {
-      color: $white;
-      background: $brand-secondary;
-    }
-
     .block.three {
       width: 100%;
     }

resources/views/partials/header.blade.php

@@ -1,12 +1,15 @@
 <header class="banner">
   <div class="container">
     <a class="toggle-menu" href="#primary-navigation">Toggle menu<span class="icon"></span></a>
+    <a class="brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a>
     <nav id="primary-navigation" class="primary-navigation">
-        <a class="brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a>
+        <a class="catalog" href="{{ home_url('/catalog') }}">Catalog</a>
-        <a href="{{ home_url('/catalog') }}">Catalog</a>
+        <a class="contact" href="#contact">Contact</a>
-        <a href="#contact">Contact</a>
+        @if(!is_user_logged_in())
-        <a href="{{ wp_login_url() }}">{{ __('Sign in') }}</a>
+          <a class="signin" href="{{ wp_login_url() }}">{{ __('Sign in', 'pressbooks-aldine') }}</a>
-        <a href="{{ network_home_url('/wp-signup.php') }}">{{ __('Sign up') }}</a>
+          <span class="sep">/</span>
+        @endif
+        <a class="signup" href="{{ network_home_url('/wp-signup.php') }}">{{ __('Sign up', 'pressbooks-aldine') }}</a>
     </nav>
     <div class="branding">
       <h1><a href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a></h1>