add basic header styling

site/layouts/partials/header.html

@@ -1,11 +1,15 @@
-<header>
+<header class="header">
+  <div class="l-underlay page-bg header-bg"></div>
   <div class="l-wrapper">
-    <nav>
+    <nav class="nav">
-      <ul class="u-no-list l-flex l-flex-row">
+      <ul class="l-flex-list-row nav__item">
-        <li><a href="{{ .Site.BaseURL }}">Home</a></li>
+        <li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
-        <li><a href="#about">About</a></li>
+      </ul>
-        <li><a href="#services">Services</a></li>
+      <ul class="l-flex-list-row nav__item">
-        <li><a href="#contact">Contact</a></li>
+        <li><a class="nav__link nav-link" href="{{ .Site.BaseURL }}">Home</a></li>
+        <li><a class="nav__link nav-link" href="#about">About</a></li>
+        <li><a class="nav__link nav-link" href="#services">Services</a></li>
+        <li><a class="nav__link nav-link" href="#contact">Contact</a></li>
       </ul>
     </nav>
   </div>

src/css/imports/layout.scss

@@ -15,6 +15,15 @@
   position: relative;
 }
 
+.l-underlay {
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
 // #sizes
 
 .l-screen-min-full {
@@ -54,3 +63,15 @@
   flex-wrap: wrap;
 }
 
+.l-flex-list-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding-left: 0;
+  list-style: none;
+
+  > li {
+    margin-bottom: 0;
+  }
+}
+

src/css/imports/variables.scss

@@ -0,0 +1,5 @@
+$z-index__header: 100;
+
+:root {
+  --color__bg: #eee;
+}

src/css/main.css

@@ -1,6 +1,8 @@
 @import "imports/reset.css";
 @import "milligram";
 
+@import "imports/variables.scss";
+
 @import "imports/layout.scss";
 @import "imports/utility.scss";
 @import "imports/mixins.scss";
@@ -29,4 +31,52 @@ html.is-animating .transition-fade {
   height: 30em;
 }
 
+// header
+
+.header-bg {
+  opacity: 0.6;
+}
+
+.header {
+  z-index: $z-index__header;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav__item {
+  margin: 0;
+}
+
+.nav__link {
+  display: block;
+  padding: 0.6em 1.5em;
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+.nav-item {
+}
+
+// global
+
+.site-title {
+  text-transform: capitalize;
+}
+
+.page-bg {
+  background-color: var(--color__bg);
+}
+
 // vim:set filetype=scss: