Updates

assets/css/components/global.css

@@ -37,6 +37,8 @@ ol,
 li,
 dl,
 dd,
+pre,
+video,
 figure,
 figcaption,
 blockquote {

assets/css/screen.css

@@ -27,7 +27,7 @@ production stylesheet in assets/built/screen.css using: gulp dev
 /* Global */
 .gh-container {
     width: 100%;
-    max-width: 1100px;
+    max-width: 1200px;
     margin: 0 auto;
 }
 
@@ -35,19 +35,21 @@ production stylesheet in assets/built/screen.css using: gulp dev
 .gh-head {
     padding: 20px 4vw;
     color: #fff;
+    font-size: 1.5rem;
+    line-height: 1.3em;
     background: var(--color-base);
 }
 
 .gh-head a {
     color: #fff;
-    line-height: 1.2em;
     text-decoration: none;
 }
 
 .gh-head .gh-container {
     display: grid;
-    grid-gap: 30px;
+    grid-gap: 40px;
     grid-template-columns: 1fr auto 1fr;
+    grid-auto-flow: row dense;
 }
 
 .gh-head-menu {
@@ -56,17 +58,30 @@ production stylesheet in assets/built/screen.css using: gulp dev
 }
 
 .gh-head-menu .nav {
-    display: flex;
+    display: inline-flex;
+    flex-wrap: wrap;
     align-items: center;
     list-style: none;
 }
 
 .gh-head-menu .nav li {
-    margin: 0 10px 0 0;
+    margin: 0 1.5vw 0 0;
     padding: 0;
 }
 
+.gh-head-menu .nav a {
+    display: inline-block;
+    padding: 5px 0;
+}
+
+.gh-head-menu .nav-current a {
+    box-shadow: 0 -1px 0 0 #fff inset;
+}
+
 .gh-head-brand {
+    grid-column-start: 2;
+    display: flex;
+    align-items: center;
     max-width: 200px;
     text-align: center;
     word-break: break-all;
@@ -74,6 +89,10 @@ production stylesheet in assets/built/screen.css using: gulp dev
 
 .gh-head-logo {
     display: block;
+    padding: 10px;
+    font-weight: 600;
+    font-size: 2.2rem;
+    line-height: 1.2em;
 }
 
 .gh-head-logo img {
@@ -85,6 +104,20 @@ production stylesheet in assets/built/screen.css using: gulp dev
     justify-content: flex-end;
     align-items: center;
     list-style: none;
+    text-align: right;
+}
+
+.gh-head-actions-list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.gh-head-actions-list a {
+    display: inline-block;
+    margin: 0 0 0 1.5vw;
+    padding: 5px 0;
 }
 
 /* Footer */

default.hbs

@@ -17,9 +17,7 @@
 
 <header class="gh-head">
     <nav class="gh-container">
-        <div class="gh-head-menu">
+
-            {{navigation}}
-        </div>
         <div class="gh-head-brand">
             <a class="gh-head-logo" href="{{@site.url}}">
                 {{#if @site.logo}}
@@ -29,6 +27,9 @@
                 {{/if}}
             </a>
         </div>
+        <div class="gh-head-menu">
+            {{navigation}}
+        </div>
         <div class="gh-head-actions">
             <div class="gh-head-actions-list">
                 {{#if @site.facebook}}