site/layouts/partials/about.html

@@ -1,5 +1,5 @@
 <article id="about" class="l-relative l-screen-min-full">
-  <div class="l-section-pad l-wrapper">
+  <div class="l-wrapper">
     <div>
       <h2>About Heading</h2>
       <p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>

site/layouts/partials/contact.html

@@ -1,5 +1,5 @@
 <article id="contact" class="l-relative l-screen-min-full contact-bg">
-  <div class="l-section-pad l-wrapper">
+  <div class="l-wrapper">
     <h2>Contact</h2>
     <form action="https://mailthis.to/remailthis" method="POST" encType="multipart/form-data">
       <ul class="u-no-list">

site/layouts/partials/footer.html

@@ -1,40 +1,8 @@
-<footer class="footer transition-fade">
+<footer class="transition-fade">
-  <div class="l-underlay footer-bg"></div>
+  <div class="l-wrapper">
-  <div class="l-wrapper l-section-pad l-section-pad--pb-reduce">
+    <ul class="u-no-list l-flex l-flex-row">
-    <ul class="l-flex-list-row footer__body">
+      <li><a href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
-      <li class="footer__body-section footer__body-section--m-left-align">
+      <li><a href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
-        <h3 class="footer__heading">Let's keep in touch!</h3>
-        <p>Find us on any of these platforms. We respond in 1-2 business days.</p>
-        <ul class="l-flex-list-row footer__social-list">
-          <li><span class="social-icon"></span></li>
-          <li><span class="social-icon"></span></li>
-          <li><span class="social-icon"></span></li>
-          <li><span class="social-icon"></span></li>
     </ul>
-      </li>
-      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow">
-        <h3 class="footer__heading--small footer__heading">Useful Links</h3>
-        <ul class="l-list-bare">
-          <li><a class="footer__link" href="#">Link One</a></li>
-          <li><a class="footer__link" href="#">Link Two</a></li>
-          <li><a class="footer__link" href="#">Link Three</a></li>
-          <li><a class="footer__link" href="#">Link Four</a></li>
-        </ul>
-      </li>
-      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow">
-        <h3 class="footer__heading--small footer__heading">Other Resources</h3>
-        <ul class="l-list-bare">
-          <li><a class="footer__link" href="#">Link One</a></li>
-          <li><a class="footer__link" href="#">Link Two</a></li>
-          <li><a class="footer__link" href="#">Link Three</a></li>
-          <li><a class="footer__link" href="#">Link Four</a></li>
-        </ul>
-      </li>
-    </ul>
-    <ul class="l-flex-list-row footer__footer">
-      <li class="footer__term"><a class="footer__link" href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
-      <li class="footer__term"><a class="footer__link" href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
-    </ul>
-    <p class="footer__attr">Copyright &copy; <span id="js-copy-date">2020</span> &dash; <a class="footer__link" rel="nofollow" href="https://rayelliott.dev">rayelliott.dev</a></p>
   </div>
 </footer>

site/layouts/partials/header.html

@@ -1,8 +1,8 @@
 <header class="header">
-  <div class="l-underlay body-bg header-bg"></div>
+  <div class="l-underlay page-bg header-bg"></div>
   <div class="l-wrapper">
     <nav class="nav">
-      <ul class="l-flex-list-row">
+      <ul class="l-flex-list-row nav__item">
         <li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
       </ul>
       <ul class="l-flex-list-row nav__item">

site/layouts/partials/services.html

@@ -1,5 +1,5 @@
 <article id="services" class="l-relative l-screen-min-full services-bg">
-  <div class="l-section-pad l-wrapper">
+  <div class="l-wrapper">
     <h2>Services</h2>
     <ul>
       <li>

src/css/imports/base.scss

@@ -1,12 +1,6 @@
 body {
-  @include font-body;
+  font-family: "Montserrat", sans-serif;
   color: var(--color__body);
-  background-color: var(--color-bg);
+  background-color: var(--color__bg);
-
-  font-size: 0.9em;
-
-  @media (min-width: $bp-xs) {
-    font-size: 1em;
-  }
 }
 

src/css/imports/layout.scss

@@ -1,31 +1,10 @@
 .l-wrapper {
   width: 100%;
-  max-width: 70rem;
+  max-width: 90rem;
   margin-left: auto;
   margin-right: auto;
 }
 
-.l-section-pad {
-  padding: 24px 8px;
-
-  @media (min-width: $bp-m) {
-    padding: 32px 32px;
-  }
-
-  @media (min-width: $bp-l) {
-    padding: 48px 32px;
-  }
-
-  // reduce padding bottom
-  &--pb-reduce {
-    padding-bottom: 8px;
-
-    @media (min-width: $bp-m) {
-      padding-bottom: 16px;
-    }
-  }
-}
-
 // #position
 
 .l-absolute {
@@ -90,12 +69,9 @@
   justify-content: center;
   padding-left: 0;
   list-style: none;
-  margin: 0;
+
-}
+  > li {
-
+    margin-bottom: 0;
-.l-list-bare {
+  }
-  list-style: none;
-  padding-left: 0;
-  margin: 0;
 }
 

src/css/imports/mixins.scss

@@ -1,17 +1,7 @@
-@mixin font-body($weight: normal) {
-  font-family: "Montserrat", sans-serif;
-  font-weight: $weight;
-}
-
-@mixin font-link($weight: normal) {
-  font-family: "Montserrat", sans-serif;
-  font-weight: $weight;
-}
-
 @mixin abs-full {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
-  top: 0;
+  right: 0;
 }

src/css/imports/variables.scss

@@ -1,11 +1,3 @@
-$bp-xs: 28em;
-$bp-s: 40em;
-$bp-m: 50em;
-$bp-l: 80em;
-
-$bp-footer-s: 28em;
-$bp-footer-m: 60em;
-
 $z-index__header: 100;
 
 :root {
@@ -50,6 +42,6 @@ $z-index__header: 100;
   // --accent-quaternary-100: #fffcf4;
   // --accent-quinary-100: #ffeefc;
 
+  --color__bg: var(--neutral-100);
   --color__body: var(--neutral-600);
-  --color-bg: var(--neutral-100);
 }

src/css/main.css

@@ -5,10 +5,10 @@
 
 @import "milligram/src/milligram.scss";
 
-@import "imports/mixins.scss";
 @import "imports/base.scss";
 @import "imports/layout.scss";
 @import "imports/utility.scss";
+@import "imports/mixins.scss";
 @import "imports/blocks.scss";
 
 @import "mapbox-gl/dist/mapbox-gl.css";
@@ -64,121 +64,7 @@ html.is-animating .transition-fade {
   }
 }
 
-// footer
+.nav-item {
-
-.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 {
-  justify-content: center;
-}
-
-.footer__link {
-  color: var(--neutral-200);
-  text-decoration: none;
-  @include font-link(bold);
-
-  &:focus,
-  &:hover {
-    color: var(--neutral-400);
-  }
-}
-
-.social-icon {
-  display: block;
-  width: 3em;
-  height: 3em;
-  background-color: red;
-  margin: 0 0.25em;
-  border-radius: 50%;
 }
 
 // hero
@@ -205,8 +91,8 @@ html.is-animating .transition-fade {
   text-transform: capitalize;
 }
 
-.body-bg {
+.page-bg {
-  background-color: var(--color-bg);
+  background-color: var(--color__bg);
 }
 
 // vim:set filetype=scss:

src/css/milligram

@@ -1 +1 @@
-Subproject commit aa63878e1cd82f40ea590bc607313f5ec6a701ff
+Subproject commit 0b46c4eef2df813bfa136f12cfbf332ae60ffa13