updates

site/layouts/partials/about.html

@@ -3,7 +3,7 @@
 
     <div class="l-underlay about-bg"></div>
 
-    <h2 class="l-section-header">About</h2>
+    <h2 class="section-header">About</h2>
 
     <div class="l-section-pad l-wrapper about-section">
 			An about Section.

site/layouts/partials/contact.html

@@ -2,7 +2,7 @@
 
 	<div class="l-underlay contact-bg"></div>
 
-	<h2 class="l-section-header">Contact Us</h2>
+	<h2 class="section-header">Contact Us</h2>
 
   <div class="l-section-pad l-wrapper contact-section">
     <p class="h5">Complete this form and we will get back to you within one working day.</p>

site/layouts/partials/footer.html

@@ -1,6 +1,6 @@
 <footer class="footer transition-fade">
   <div class="l-underlay footer-bg"></div>
-  <div class="l-wrapper l-section-pad l-section-pad--pb-reduce">
+  <div class="l-wrapper l-section-pad reduce-padding">
     <ul class="l-flex-list-row footer__body">
       <li class="footer__body-section footer__body-section--m-left-align footer-section">
         <h3 class="footer__heading">Let's keep in touch!</h3>

site/layouts/partials/services.html

@@ -2,7 +2,7 @@
 
     <div class="l-underlay services-bg"></div>
 
-    <h2 class="l-section-header">Services</h2>
+    <h2 class="section-header">Services</h2>
 
     <div class="l-section-pad l-wrapper services-section">
 			A Services Section.

src/css/imports/base.scss

@@ -3,10 +3,10 @@ body {
   color: var(--color__body);
   background-color: var(--color-bg);
 
-  font-size: 0.9em;
+  font-size: $font-size-body--xxs;
 
   @media (min-width: $bp-xs) {
-    font-size: 1em;
+    font-size: $font-size-body;
   }
 }
 
@@ -18,6 +18,6 @@ h3,
 h4,
 h5,
 h6 {
-  @include font-title($weight: 300);
+  @include font-title;
 }
 

src/css/imports/components/block.scss

@@ -1,63 +0,0 @@
-// units are the number of units that make up 100% of the container
-// e.g., if there are 4 units then sizes, lengths, can be from 0 to 4
-// corresponding to lengths of 0, 25%, 50%, 75% and 100%.
-$units: 4;
-$unit-size: 100% / $units;
-
-%ab-layout {
-  position: relative;
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: $unit-size;
-    height: $unit-size;
-    transform-origin: 0 0;
-    transition: transform 0.4s ease-in-out;
-  }
-}
-
-// all blocks start out at 1 unit size in length and width.
-// $x, $y are the starting coordinates
-@mixin ab-set-layout($x: 0, $y: 0, $color: rgba(0, 0, 0, 0.5)) {
-  @extend %ab-layout;
-
-  &::before {
-    left: $x * $unit-size;
-    top: $y * $unit-size;
-    background-color: $color;
-  }
-}
-
-@mixin ab-set-state($state-class, $width, $height) {
-  @at-root .state-#{$state-class} &::before {
-    transform: scale($width, $height);
-  }
-}
-
-.block-grid {
-  padding-top: 3rem;
-}
-
-.anim-block {
-  background-color: rgba(blue, 0.06);
-}
-
-.anim-block--1 {
-  @include ab-set-layout(2, 1, blue);
-
-  @include ab-set-state(0, 1, 1);
-  @include ab-set-state(1, 2, 2);
-  @include ab-set-state(2, 2, 3);
-}
-
-.anim-block--2 {
-  @include ab-set-layout(1, 1, red);
-
-  @include ab-set-state(0, 1, 1);
-  @include ab-set-state(1, 2, 2);
-  @include ab-set-state(2, 2, 3);
-}
-
-// vim:set filetype=scss:

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

@@ -1,5 +1,3 @@
-$bp-menu-collpase: $bp-s;
-
 .c-menu-toggle {
   cursor: pointer;
 }

src/css/imports/footer.scss

@@ -67,6 +67,15 @@ $footer-bp-m: 60em;
     }
   }
 }
+//
+// reduce padding bottom
+.reduce-padding {
+  padding-bottom: 8px;
+
+  @media (min-width: $bp-m) {
+    padding-bottom: 16px;
+  }
+}
 
 .footer__footer {
   position: relative;

src/css/imports/layout.scss

@@ -1,66 +1,50 @@
 .l-wrapper {
   width: 100%;
-  max-width: 80rem;
+  max-width: $wrapper-max-width;
   margin-left: auto;
   margin-right: auto;
 
-  padding-left: 8px;
+  padding-left: $padding-horizontal-xs;
-  padding-right: 8px;
+  padding-right: $padding-horizontal-xs;
 
   @media (min-width: $bp-s) {
-    padding-left: 32px;
+    padding-left: $padding-horizontal-s;
-    padding-right: 32px;
+    padding-right: $padding-horizontal-s;
   }
 
   @media (min-width: $bp-m) {
-    padding-left: 64px;
+    padding-left: $padding-horizontal-m;
-    padding-right: 64px;
+    padding-right: $padding-horizontal-m;
   }
 
   @media (min-width: $bp-l) {
-    padding-left: 96px;
+    padding-left: $padding-horizontal-l;
-    padding-right: 96px;
+    padding-right: $padding-horizontal-l;
   }
 
   &--wide {
-    max-width: 110rem;
+    max-width: $wrapper-max-width--wide;
   }
 }
 
 .l-section-pad {
-  padding-top: 24px;
+  padding-top: $padding-vertical-xs;
-  padding-bottom: 24px;
+  padding-bottom: $padding-vertical-xs;
 
   @media (min-width: $bp-s) {
-    padding-top: 32px;
+    padding-top: $padding-vertical-s;
-    padding-bottom: 32px;
+    padding-bottom: $padding-vertical-s;
   }
 
   @media (min-width: $bp-m) {
-    padding-top: 64px;
+    padding-top: $padding-vertical-m;
-    padding-bottom: 64px;
+    padding-bottom: $padding-vertical-m;
   }
 
   @media (min-width: $bp-l) {
-    padding-top: 96px;
+    padding-top: $padding-vertical-l;
-    padding-bottom: 96px;
+    padding-bottom: $padding-vertical-l;
   }
-
-  // reduce padding bottom
-  &--pb-reduce {
-    padding-bottom: 8px;
-
-    @media (min-width: $bp-m) {
-      padding-bottom: 16px;
-    }
-  }
-}
-
-.l-section-header {
-  font-size: 2.875rem;
-  line-height: 1.2;
-  text-align: center;
-  margin-bottom: 3.75rem;
 }
 
 // #position
@@ -155,10 +139,6 @@
   margin: 0;
 }
 
-.l-flex-list-col,
-.l-flex-list-row {
-}
-
 .l-list-bare {
   list-style: none;
   padding-left: 0;

src/css/imports/variables.scss

@@ -1,10 +1,31 @@
+// breakpoints
 $bp-xs: 28em;
 $bp-s: 40em;
 $bp-m: 50em;
 $bp-l: 80em;
+// header menu collapse
+$bp-menu-collpase: $bp-s;
 
 $z-index__header: 100;
 
+$wrapper-max-width: 80rem;
+$wrapper-max-width--wide: 110rem;
+
+$font-size-body: 1em;
+$font-size-body--xxs: 0.9em;
+
+// lerft, right padding of sections
+$padding-horizontal-xs: 8px;
+$padding-horizontal-s: 32px;
+$padding-horizontal-m: 64px;
+$padding-horizontal-l: 96px;
+
+// top, bottom padding of sections
+$padding-vertical-xs: 24px;
+$padding-vertical-s: 32px;
+$padding-vertical-m: 64px;
+$padding-vertical-l: 96px;
+
 $color-primary-100: #eff8ff;
 $color-primary-200: #aad4f5;
 $color-primary-300: #63a2d8;

src/css/main.css

@@ -15,6 +15,8 @@
 @import "imports/hero.scss";
 @import "imports/about.scss";
 @import "imports/services.scss";
+@import "imports/contact.scss";
+@import "imports/footer.scss";
 
 @import "mapbox-gl/dist/mapbox-gl.css";
 
@@ -28,132 +30,19 @@ html.is-animating .transition-fade {
   opacity: 0;
 }
 
+.section-header {
+  font-size: 2.875rem;
+  line-height: 1.2;
+  text-align: center;
+  margin-bottom: 3.75rem;
+}
+
 // mapbox
 
 .mapboxgl-map {
   height: 30em;
 }
 
-// footer
-
-.footer {
-  position: relative;
-  font-size: 0.9rem;
-  color: var(--neutral-100);
-}
-
-.footer-bg {
-  background-color: var(--neutral-700);
-}
-
-.footer__term {
-  margin: 0 0.5em;
-}
-
-.footer__attr {
-  text-align: center;
-  margin-bottom: 0;
-  font-size: 0.8em;
-}
-
-.footer__body {
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  text-align: center;
-}
-
-.footer__body-section {
-  flex: 0 0 100%;
-  margin-bottom: 1.6rem;
-
-  @media (min-width: $bp-footer-s) {
-    &--narrow {
-      flex: 0 0 50%;
-    }
-  }
-
-  @media (min-width: $bp-footer-m) {
-    flex: 0 0 60%;
-    margin-bottom: 0;
-    padding: 0 0.8rem;
-
-    &:first-child {
-      padding-left: 0;
-    }
-
-    &:last-child {
-      padding-right: 0;
-    }
-
-    &--narrow {
-      flex: 0 1 20%;
-    }
-
-    &--m-left-align {
-      text-align: left;
-
-      .footer__social-list {
-        justify-content: left;
-      }
-    }
-  }
-}
-
-.footer__footer {
-  position: relative;
-  font-size: 0.9em;
-  margin-top: 2.4rem;
-
-  &::before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 1px;
-    left: 0;
-    top: -1.2rem;
-    background-color: var(--neutral-400);
-    opacity: 0.2;
-  }
-}
-
-.footer__heading {
-  font-size: 2.25em;
-
-  &--small {
-    @include font-body(bold);
-    font-size: 1em;
-    text-transform: uppercase;
-  }
-}
-
-.footer__social-list {
-  font-size: 3em;
-  justify-content: center;
-}
-
-.footer__link {
-  color: var(--neutral-200);
-  text-decoration: none;
-  @include font-link(bold);
-
-  &:focus,
-  &:hover {
-    color: var(--neutral-400);
-  }
-}
-
-// contact
-
-.contact-bg {
-  background-color: var(--primary-100);
-}
-
-.contact-heading {
-  text-align: left;
-  margin-bottom: 1.25rem;
-}
-
 .social-icon {
   display: block;
   width: 1em;