Simplify

assets/css/components/header.css

@@ -0,0 +1,256 @@
+
+.gh-head {
+    padding: 20px 4vw;
+    font-size: 1.6rem;
+    line-height: 1.3em;
+}
+
+.gh-head a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.gh-head .gh-container {
+    display: grid;
+    grid-gap: 40px;
+    grid-template-columns: 1fr auto 1fr;
+    grid-auto-flow: row dense;
+}
+
+.gh-head-menu {
+    display: flex;
+    align-items: center;
+}
+
+.gh-head-menu .nav {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+}
+
+.gh-head-menu .nav li {
+    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 currentcolor inset;
+}
+
+.gh-head-brand {
+    grid-column-start: 2;
+    display: flex;
+    align-items: center;
+    max-width: 200px;
+    text-align: center;
+    word-break: break-all;
+}
+
+.gh-head-logo {
+    display: block;
+    padding: 10px 0;
+    font-weight: 600;
+    font-size: 2.2rem;
+    line-height: 1.2em;
+}
+
+.gh-head-logo img {
+    max-height: 40px;
+}
+
+.gh-head-actions {
+    display: flex;
+    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;
+}
+
+
+/* Menu
+/* ---------------------------------------------------------- */
+
+.gh-burger {
+    position: relative;
+    display: none;
+    cursor: pointer;
+}
+
+.gh-burger-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 33px;
+    height: 33px;
+}
+
+.gh-burger-inner {
+    width: 100%;
+    height: 100%;
+}
+
+.gh-burger-box::before {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: #fff;
+    transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
+    will-change: transform, width;
+}
+
+.gh-burger-inner::before,
+.gh-burger-inner::after {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: #fff;
+    transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
+    will-change: transform, width;
+}
+
+.gh-burger-inner::before {
+    transform: translatey(-6px);
+}
+.gh-burger-inner::after {
+    transform: translatey(6px);
+}
+
+body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
+    transform: translatey(-8px);
+}
+body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
+    transform: translatey(8px);
+}
+
+.gh-head-open .gh-burger-box::before {
+    width: 0;
+    transform: translatex(19px);
+    transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
+}
+
+.gh-head-open .gh-burger-inner::before {
+    width: 26px;
+    transform: translatex(6px) rotate(135deg);
+}
+
+.gh-head-open .gh-burger-inner::after {
+    width: 26px;
+    transform: translatex(6px) rotate(-135deg);
+}
+
+
+@media (max-width: 900px) {
+    .gh-burger {
+        display: inline-block;
+    }
+    .gh-head {
+        transition: all 0.4s ease-out;
+        overflow: hidden;
+    }
+    .gh-head .gh-container {
+        height: 100%;
+        grid-template-columns: 1fr;
+    }
+    .gh-head-brand {
+        position: relative;
+        z-index: 10;
+        grid-column-start: auto;
+        max-width: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        user-select: none;
+    }
+    .gh-head-menu {
+        align-self: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        margin: 0 0 10vh;
+        font-weight: 300;
+        font-size: 3.6rem;
+        line-height: 1.1em;
+    }
+     .gh-head-menu .nav li {
+        margin: 5px 0;
+    }
+    .gh-head-menu .nav a {
+        padding: 8px 0;
+    }
+    .gh-head-menu .nav {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .gh-head-actions {
+        padding: 20px 0;
+        justify-content: center;
+        text-align: left;
+    }
+    .gh-head-actions a {
+        margin: 0 10px;
+    }
+    /* Hide collapsed content */
+    .gh-head-actions,
+    .gh-head-menu {
+        display: none;
+    }
+    /* Open the menu */
+    .gh-head-open {
+        overflow: hidden;
+        height: 100vh;
+    }
+    .gh-head-open .gh-head {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow-y: scroll;
+    }
+    .gh-head-open .gh-head .gh-container {
+        grid-template-rows: auto 1fr auto;
+    }
+    .gh-head-open .gh-head-actions,
+    .gh-head-open .gh-head-menu {
+        display: flex;
+    }
+}
+@media (max-width: 600px) {
+    .gh-head-menu {
+        font-size: 6vmin;
+    }
+}

assets/css/screen.css

@@ -13,6 +13,7 @@ production stylesheet in assets/built/screen.css using: gulp dev
 @import "components/global.css";
 
 /* Ghost components */
+@import "components/header.css";
 @import "components/content.css";
 @import "components/members.css";
 
@@ -35,277 +36,20 @@ production stylesheet in assets/built/screen.css using: gulp dev
     padding: 0 4vw;
 }
 
-/* Header */
-.gh-head {
-    padding: 20px 4vw;
-    color: #fff;
-    font-size: 1.5rem;
-    line-height: 1.3em;
-    background: var(--color-base);
-}
-
-.gh-head a {
-    color: #fff;
-    text-decoration: none;
-}
-
-.gh-head .gh-container {
-    display: grid;
-    grid-gap: 40px;
-    grid-template-columns: 1fr auto 1fr;
-    grid-auto-flow: row dense;
-}
-
-.gh-head-menu {
-    display: flex;
-    align-items: center;
-}
-
-.gh-head-menu .nav {
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    list-style: none;
-}
-
-.gh-head-menu .nav li {
-    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;
-}
-
-.gh-head-logo {
-    display: block;
-    padding: 10px 0;
-    font-weight: 600;
-    font-size: 2.2rem;
-    line-height: 1.2em;
-}
-
-.gh-head-logo img {
-    max-height: 40px;
-}
-
-.gh-head-actions {
-    display: flex;
-    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;
-}
-
-
-/* Menu
-/* ---------------------------------------------------------- */
-
-.gh-burger {
-    position: relative;
-    display: none;
-    cursor: pointer;
-}
-
-.gh-burger-box {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 33px;
-    height: 33px;
-}
-
-.gh-burger-inner {
-    width: 100%;
-    height: 100%;
-}
-
-.gh-burger-box::before {
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    margin: auto;
-    content: '';
-    width: 100%;
-    height: 1px;
-    background: #fff;
-    transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
-    will-change: transform, width;
-}
-
-.gh-burger-inner::before,
-.gh-burger-inner::after {
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    margin: auto;
-    content: '';
-    width: 100%;
-    height: 1px;
-    background: #fff;
-    transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
-    will-change: transform, width;
-}
-
-.gh-burger-inner::before {
-    transform: translatey(-6px);
-}
-.gh-burger-inner::after {
-    transform: translatey(6px);
-}
-
-body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
-    transform: translatey(-8px);
-}
-body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
-    transform: translatey(8px);
-}
-
-.gh-head-open .gh-burger-box::before {
-    width: 0;
-    transform: translatex(19px);
-    transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
-}
-
-.gh-head-open .gh-burger-inner::before {
-    width: 26px;
-    transform: translatex(6px) rotate(135deg);
-}
-
-.gh-head-open .gh-burger-inner::after {
-    width: 26px;
-    transform: translatex(6px) rotate(-135deg);
-}
-
-
-@media (max-width: 900px) {
-    .gh-burger {
-        display: inline-block;
-    }
-    .gh-head {
-        transition: all 0.4s ease-out;
-        overflow: hidden;
-    }
-    .gh-head .gh-container {
-        height: 100%;
-        grid-template-columns: 1fr;
-    }
-    .gh-head-brand {
-        position: relative;
-        z-index: 10;
-        grid-column-start: auto;
-        max-width: none;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        user-select: none;
-    }
-    .gh-head-menu {
-        align-self: center;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        margin: 0 0 10vh;
-        font-weight: 300;
-        font-size: 3.6rem;
-        line-height: 1.1em;
-    }
-     .gh-head-menu .nav li {
-        margin: 5px 0;
-    }
-    .gh-head-menu .nav a {
-        padding: 8px 0;
-    }
-    .gh-head-menu .nav {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-    .gh-head-actions {
-        padding: 20px 0;
-        justify-content: center;
-        text-align: left;
-    }
-    .gh-head-actions a {
-        margin: 0 10px;
-    }
-    /* Hide collapsed content */
-    .gh-head-actions,
-    .gh-head-menu {
-        display: none;
-    }
-    /* Open the menu */
-    .gh-head-open {
-        overflow: hidden;
-        height: 100vh;
-    }
-    .gh-head-open .gh-head {
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        overflow-y: scroll;
-    }
-    .gh-head-open .gh-head .gh-container {
-        grid-template-rows: auto 1fr auto;
-    }
-    .gh-head-open .gh-head-actions,
-    .gh-head-open .gh-head-menu {
-        display: flex;
-    }
-}
-@media (max-width: 600px) {
-    .gh-head-menu {
-        font-size: 6vmin;
-    }
-}
-
 
 /* Footer
 /* ---------------------------------------------------------- */
 .gh-foot {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
-    padding: 20px 4vw;
+    padding: 4vw;
-    color: #fff;
+}
-    background: var(--color-base);
+
+.gh-foot .gh-container {
+    width: auto;
 }
 
 .gh-foot a {
-    color: #fff;
+    color: inherit;
 }

default.hbs

@@ -50,8 +50,10 @@
 </header>
 
 <main class="gh-main">
+
     {{{body}}}
     {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
+
 </main>
 
 <footer class="gh-foot">
@@ -80,7 +82,6 @@ $(document).ready(function () {
 });
 </script>
 
-
 {{{block "scripts"}}}
 {{!-- The #block helper will pull in data from the #contentFor other template files --}}