From de1aa40c3e7b13d98a330b1bdfffecab5668bb74 Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Mon, 20 Apr 2020 18:13:38 +0000
Subject: [PATCH] add footer section

---
 site/layouts/partials/footer.html |  6 +-
 src/css/imports/footer.scss       | 99 +++++++++++++++++++++++++++++++
 2 files changed, 102 insertions(+), 3 deletions(-)
 create mode 100644 src/css/imports/footer.scss

diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 3f88c40..007468b 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -2,7 +2,7 @@
   <div class="l-underlay footer-bg"></div>
   <div class="l-wrapper l-section-pad l-section-pad--pb-reduce">
     <ul class="l-flex-list-row footer__body">
-      <li class="footer__body-section footer__body-section--m-left-align">
+      <li class="footer__body-section footer__body-section--m-left-align footer-section">
         <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">
@@ -12,7 +12,7 @@
           <li><span class="social-icon"></span></li>
         </ul>
       </li>
-      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow">
+      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow footer-section">
         <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>
@@ -21,7 +21,7 @@
           <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">
+      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow footer-section">
         <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>
diff --git a/src/css/imports/footer.scss b/src/css/imports/footer.scss
new file mode 100644
index 0000000..eca4659
--- /dev/null
+++ b/src/css/imports/footer.scss
@@ -0,0 +1,99 @@
+.footer {
+  position: relative;
+  font-size: 0.9rem;
+}
+
+.footer-bg {
+  background-color: rgba(indigo, 0.5);
+}
+
+.footer-section {
+  background-color: rgba(indigo, 0.5);
+}
+
+.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: currentColor;
+    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;
+}
+