site/layouts/partials/components/block.html

@@ -1,8 +0,0 @@
-<!-- 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

@@ -1,15 +0,0 @@
-<!-- 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,13 +1,11 @@
 <header class="header">
   <div class="l-underlay body-bg header-bg"></div>
   <div class="l-wrapper">
-    <nav class="nav site-nav">
+    <nav class="nav">
-      <ul class="l-flex-list-row site-nav__title">
+      <ul class="l-flex-list-row">
         <li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
       </ul>
-      <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>
+      <ul class="l-flex-list-row nav__item">
-      <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/blocks.scss

@@ -201,7 +201,32 @@ $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/base.scss

@@ -1,3 +1,75 @@
-@import "block";
+// a card
-@import "card";
+.c-img-card {
-@import "menu-toggle";
+  $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/card.scss

@@ -1,74 +0,0 @@
-.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

@@ -1,33 +0,0 @@
-$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,13 +155,6 @@
   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,6 +9,7 @@
 @import "imports/base.scss";
 @import "imports/layout.scss";
 @import "imports/utility.scss";
+@import "imports/blocks.scss";
 
 @import "imports/components/base.scss";
 
@@ -65,47 +66,6 @@ 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 {
@@ -379,35 +339,6 @@ 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 {