multiple updates

site/layouts/partials/about.html

@@ -1,5 +1,5 @@
 <article id="about">
-  <div class="l-relative l-screen-min-full">
+  <div class="l-section l-relative l-screen-min-full">
 
     <div class="l-underlay about-bg"></div>
 

site/layouts/partials/contact.html

@@ -1,4 +1,4 @@
-<article id="contact" class="l-relative l-screen-min-full">
+<article id="contact" class="l-section l-relative l-screen-min-full">
 
 	<div class="l-underlay contact-bg"></div>
 

site/layouts/partials/header.html

@@ -1,17 +1,17 @@
-<header class="header">
+<header class="header is-fixed">
   <div class="l-underlay body-bg header-bg"></div>
   <div class="l-wrapper">
     <nav class="nav site-nav">
-      <ul class="l-flex-list-row site-nav__title">
+      <ul class="l-flex-list-row site-nav-title">
         <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>
+      <label class="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">
+      <input id="menu-toggle" class="menu-toggle-input" type="checkbox">
-      <ul class="l-flex-list-row nav__item c-menu-toggle__menu site-nav__nav-list">
+      <ul class="l-flex-list-row nav-item 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="{{ .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="#about">About</a></li>
-        <li><a class="nav__link nav-link" href="#services">Services</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>
+        <li><a class="nav-link nav-link" href="#contact">Contact</a></li>
       </ul>
     </nav>
   </div>

site/layouts/partials/services.html

@@ -1,4 +1,4 @@
-<article id="services" class="l-relative l-screen-min-full">
+<article id="services" class="l-section l-relative l-screen-min-full">
 
     <div class="l-underlay services-bg"></div>
 

src/css/imports/components/base.scss

@@ -1,3 +1,2 @@
-@import "block";
 @import "card";
 @import "menu-toggle";

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

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

src/css/imports/header.scss

@@ -1,14 +1,25 @@
 .header-bg {
+  background-color: rgba(pink, 0.5);
   opacity: 0.6;
 }
 
 .header {
   z-index: $z-index__header;
-
+  position: relative;
-  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
+
+  &.is-fixed {
+    position: fixed;
+
+    .header-bg {
+    }
+  }
+
+  &.is-absolute {
+    position: absolute;
+  }
 }
 
 .nav {
@@ -22,11 +33,11 @@
   }
 }
 
-.nav__item {
+.nav-item {
   margin: 0;
 }
 
-.nav__link {
+.nav-link {
   display: block;
   padding: 0.6em 1.5em;
 
@@ -36,7 +47,7 @@
 }
 
 .site-nav {
-  &__menu-btn {
+  &-menu-btn {
     @media (max-width: $bp-s) {
       margin: 0;
       padding: 6px 0 6px;
@@ -46,7 +57,7 @@
     }
   }
 
-  &__nav-list {
+  &-nav-list {
     @media (max-width: $bp-s) {
       position: fixed;
       top: 4rem;
@@ -65,11 +76,10 @@
 
 .menu-icon {
   display: block;
-  height: 1.1em;
+  height: 1.2em;
-  width: 1.1em;
+  width: 1.2em;
 
   border-radius: 3px;
-  background-color: pink;
+  background-color: currentColor;
-  opacity: 0.5;
 }
 

src/css/imports/layout.scss

@@ -27,6 +27,18 @@
   }
 }
 
+// TODO - need to move .l-section-pad rules into .l-section - so there is
+// only the .l-section rules. Then that needs to be applied ONLY to the actual
+// top level of a page section.
+// then sub sections can have a margin-bottom on them to sort out the margins
+// for them
+// sub sections with individual backgrounds will have a padding applied to them
+// that padding will be top, bottom and left, right
+
+.l-section {
+  padding-top: 3.75rem;
+}
+
 .l-section-pad {
   padding-top: $padding-vertical-xs;
   padding-bottom: $padding-vertical-xs;
@@ -57,6 +69,14 @@
   position: relative;
 }
 
+.l-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
 .l-underlay {
   z-index: -1;
   position: absolute;