add footer styles

site/layouts/partials/footer.html

@@ -1,40 +1,40 @@
 <footer class="footer transition-fade">
-  <div class="l-underlay body-bg"></div>
+  <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="l-flex-list-row">
+    <ul class="l-flex-list-row footer__body">
-      <li>
+      <li class="footer__body-section footer__body-section--m-left-align">
-        <h3>Let's keep in touch!</h3>
+        <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>
+        <p>Find us on any of these platforms. We respond in 1-2 business days.</p>
-        <ul class="l-flex-list-row">
+        <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>
+      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow">
-        <h3>Useful Links</h3>
+        <h3 class="footer__heading--small footer__heading">Useful Links</h3>
         <ul class="l-list-bare">
-          <li><a href="#">Link One</a></li>
+          <li><a class="footer__link" href="#">Link One</a></li>
-          <li><a href="#">Link Two</a></li>
+          <li><a class="footer__link" href="#">Link Two</a></li>
-          <li><a href="#">Link Three</a></li>
+          <li><a class="footer__link" href="#">Link Three</a></li>
-          <li><a href="#">Link Four</a></li>
+          <li><a class="footer__link" href="#">Link Four</a></li>
         </ul>
       </li>
-      <li>
+      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow">
-        <h3>Other Resources</h3>
+        <h3 class="footer__heading--small footer__heading">Other Resources</h3>
         <ul class="l-list-bare">
-          <li><a href="#">Link One</a></li>
+          <li><a class="footer__link" href="#">Link One</a></li>
-          <li><a href="#">Link Two</a></li>
+          <li><a class="footer__link" href="#">Link Two</a></li>
-          <li><a href="#">Link Three</a></li>
+          <li><a class="footer__link" href="#">Link Three</a></li>
-          <li><a href="#">Link Four</a></li>
+          <li><a class="footer__link" href="#">Link Four</a></li>
         </ul>
       </li>
     </ul>
-    <ul class="l-flex-list-row">
+    <ul class="l-flex-list-row footer__footer">
-      <li class="footer__term"><a href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
+      <li class="footer__term"><a class="footer__link" href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
-      <li class="footer__term"><a><a href="{{ "privacy-policy" | relURL }}">Privacy Policy</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 rel="nofollow" href="https://rayelliott.dev">rayelliott.dev</a></p>
+    <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>

src/css/imports/base.scss

@@ -1,5 +1,5 @@
 body {
-  font-family: "Montserrat", sans-serif;
+  @include font-body;
   color: var(--color__body);
   background-color: var(--color-bg);
 

src/css/imports/variables.scss

@@ -3,6 +3,9 @@ $bp-s: 40em;
 $bp-m: 50em;
 $bp-l: 80em;
 
+$bp-footer-s: 28em;
+$bp-footer-m: 60em;
+
 $z-index__header: 100;
 
 :root {

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";
@@ -69,6 +69,11 @@ html.is-animating .transition-fade {
 .footer {
   position: relative;
   font-size: 0.9rem;
+  color: var(--neutral-100);
+}
+
+.footer-bg {
+  background-color: var(--neutral-700);
 }
 
 .footer__term {
@@ -77,8 +82,94 @@ html.is-animating .transition-fade {
 
 .footer__attr {
   text-align: center;
-  font-size: 0.9em;
   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 {