add styling for mobile navigation menu

site/layouts/partials/components/block.html

@@ -0,0 +1,8 @@
+<!-- TODO convert to proper template -->
+<div class="js-block c-block c-block--4 c-block-br block-styles">
+  <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+</div>
+
+<div class="js-block c-block c-block--5 block-sans-image-styles">
+</div>
+

site/layouts/partials/components/card.html

@@ -0,0 +1,15 @@
+<!-- TODO convert to proper template -->
+<div class="card-layout">
+  <div class="c-img-card about-card">
+    <div class="c-img-card__header background-image"></div>
+    <div class="c-img-card__body">
+      <div class="c-img-card__body-bg body-background"></div>
+      <h3>Card Heading</h3>
+      <p>
+        Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
+      </p>
+    </div>
+  </div>
+</div>
+</div>
+

site/layouts/partials/header.html

@@ -1,11 +1,13 @@
 <header class="header">
   <div class="l-underlay body-bg header-bg"></div>
   <div class="l-wrapper">
-    <nav class="nav">
+    <nav class="nav site-nav">
-      <ul class="l-flex-list-row">
+      <ul class="l-flex-list-row site-nav__title">
         <li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
       </ul>
-      <ul class="l-flex-list-row nav__item">
+      <label class="c-menu-toggle site-nav__menu-btn" for="menu-toggle"><span class="site-nav__menu-btn-text menu-text a">Menu</span><span class="menu-icon"></span></label>
+      <input id="menu-toggle" class="c-menu-toggle__toggle" type="checkbox">
+      <ul class="l-flex-list-row nav__item c-menu-toggle__menu site-nav__nav-list">
         <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>

src/css/imports/components/base.scss

@@ -1,75 +1,3 @@
-// a card
+@import "block";
-.c-img-card {
+@import "card";
-  $bp-collapse: $bp-s;
+@import "menu-toggle";
-
-  z-index: 1;
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-
-  &__body {
-    padding: 32px 48px;
-  }
-
-  &__body-bg {
-    z-index: -1;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-
-  @media (max-width: $bp-collapse) {
-    &__header,
-    &__body,
-    &__body-bg {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-    }
-
-    &__header {
-      z-index: -1;
-    }
-
-    &__body {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-    }
-
-    &__body-bg {
-      opacity: 0.6;
-    }
-  }
-
-  @media (min-width: $bp-collapse) {
-    display: flex;
-    flex-direction: column;
-
-    &__header,
-    &__body {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    &__header {
-      flex: 0 1 50%;
-    }
-
-    &__body {
-      position: relative;
-      flex: 1 0 50%;
-    }
-
-    &__body-bg {
-      opacity: 1;
-    }
-  }
-}

src/css/imports/components/block.scss

@@ -201,32 +201,7 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
     }
   }
 }
-
+//
-.block-container {
+//
-  position: relative;
+//
-  width: 100%;
-  max-width: 110rem;
-  height: 100%;
-  margin-left: auto;
-  margin-right: auto;
-
-  background-color: rgba(#000, 0.1);
-}
-
-.block-grid {
-  display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
-  grid-template-columns: 1fr 1fr 1fr;
-
-  .c-block-tr {
-    grid-column: 3/4;
-    grid-row: 1/3;
-  }
-
-  .c-block-br {
-    grid-column: 2/4;
-    grid-row: 3/3;
-  }
-}
-
 // vim:set filetype=scss:

src/css/imports/components/card.scss

@@ -0,0 +1,74 @@
+.c-img-card {
+  $bp-collapse: $bp-s;
+
+  z-index: 1;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &__body {
+    padding: 32px 48px;
+  }
+
+  &__body-bg {
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  @media (max-width: $bp-collapse) {
+    &__header,
+    &__body,
+    &__body-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+
+    &__header {
+      z-index: -1;
+    }
+
+    &__body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+
+    &__body-bg {
+      opacity: 0.6;
+    }
+  }
+
+  @media (min-width: $bp-collapse) {
+    display: flex;
+    flex-direction: column;
+
+    &__header,
+    &__body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &__header {
+      flex: 0 1 50%;
+    }
+
+    &__body {
+      position: relative;
+      flex: 1 0 50%;
+    }
+
+    &__body-bg {
+      opacity: 1;
+    }
+  }
+}

src/css/imports/components/menu-toggle.scss

@@ -0,0 +1,33 @@
+$bp-menu-collpase: $bp-s;
+
+.c-menu-toggle {
+  cursor: pointer;
+}
+
+input.c-menu-toggle__toggle[type="checkbox"],
+input.c-menu-toggle__toggle[type="radio"] {
+  display: none;
+}
+
+@media (max-width: $bp-menu-collpase) {
+  .c-menu-toggle {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .c-menu-toggle__menu {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .c-menu-toggle__toggle:checked ~ .c-menu-toggle__menu {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (min-width: $bp-menu-collpase) {
+  .c-menu-toggle {
+    display: none;
+  }
+}

src/css/imports/layout.scss

@@ -155,6 +155,13 @@
   margin: 0;
 }
 
+.l-flex-list-col,
+.l-flex-list-row {
+  > li {
+    margin: 0;
+  }
+}
+
 .l-list-bare {
   list-style: none;
   padding-left: 0;

src/css/main.css

@@ -9,7 +9,6 @@
 @import "imports/base.scss";
 @import "imports/layout.scss";
 @import "imports/utility.scss";
-@import "imports/blocks.scss";
 
 @import "imports/components/base.scss";
 
@@ -66,6 +65,47 @@ html.is-animating .transition-fade {
   }
 }
 
+.site-nav {
+  &__title {
+  }
+
+  &__menu-btn {
+    @media (max-width: $bp-s) {
+      margin: 0;
+      padding: 6px 0 6px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &__nav-list {
+    @media (max-width: $bp-s) {
+      position: fixed;
+      top: 4rem;
+      bottom: 2rem;
+      left: 2rem;
+      right: 2rem;
+
+      background-color: #fff;
+    }
+  }
+}
+
+.menu-text {
+  margin-right: 0.5rem;
+}
+
+.menu-icon {
+  display: block;
+  height: 1.1em;
+  width: 1.1em;
+
+  border-radius: 3px;
+  background-color: blue;
+  opacity: 0.5;
+}
+
 // footer
 
 .footer {
@@ -339,6 +379,35 @@ html.is-animating .transition-fade {
   margin-bottom: 1.25rem;
 }
 
+// hero
+
+.block-container {
+  position: relative;
+  width: 100%;
+  max-width: 110rem;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+
+  background-color: rgba(#000, 0.1);
+}
+
+.block-grid {
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  .c-block-tr {
+    grid-column: 3/4;
+    grid-row: 1/3;
+  }
+
+  .c-block-br {
+    grid-column: 2/4;
+    grid-row: 3/3;
+  }
+}
+
 // global
 
 .site-title {