From a079e45840b95990406b8c673d02b40e952799ea Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 22 Sep 2022 15:05:58 -0400
Subject: [PATCH] Footer <576px optimization

---
 src/layouts/partials/footer.html |   2 +-
 src/static/css/footer.css        | 436 +++++++++++++++++++++++++++----
 2 files changed, 381 insertions(+), 57 deletions(-)

diff --git a/src/layouts/partials/footer.html b/src/layouts/partials/footer.html
index 4808026..12ca151 100644
--- a/src/layouts/partials/footer.html
+++ b/src/layouts/partials/footer.html
@@ -5,7 +5,7 @@
         <div class="col-lg-8 footer-content">
           <h4>Equitable open-source for <span id="cycle">web3</span></h4>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-          <img src="/Images/footer-grid-element.svg" alt="tea.grid">
+          <img class="footer-grid" src="/Images/footer-grid-element.svg" alt="tea.grid">
         </div>
         <div class="col-lg-4">
           <div class="card social-box" style="width: 100%; float:right;">
diff --git a/src/static/css/footer.css b/src/static/css/footer.css
index 5eb54a4..87a2971 100644
--- a/src/static/css/footer.css
+++ b/src/static/css/footer.css
@@ -1,72 +1,396 @@
 /* Footer Styling */
 
-.footer-email{
-  font-family: "pp-neue-machina", sans-serif;
-  text-transform: uppercase;
-  font-size: 2.121vw;
-  line-height: 2.121vw;
-  padding: 1.953vw 0vw;
-  background: none;
-  border: none;
+@media only screen and (min-width: 1200px) {
+
+  .footer-email{
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2.121vw;
+    line-height: 2.121vw;
+    padding: 1.953vw 0vw;
+    background: none;
+    border: none;
+  }
+
+  .footer-email:focus{
+    background-color: #1a1a1a;
+    color: #fff;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  .social-box{
+    border-radius: 0px !important;
+    border: 2px solid #949494;
+    background-color: none;
+  }
+
+  .list-group{
+    border-radius: 0px !important;
+  }
+
+  .list-group-item{
+    background-color: #1a1a1a !important;
+    padding: 1.116vw;
+    font-size: 1.562vw;
+    color: #fff;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    border-bottom: 2px solid #949494;
+    transition: 0.2s ease-in-out;
+  }
+
+  .list-group-item:hover{
+    padding-left: 2.232vw;
+    background-color: #00ffd0 !important;
+    box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
+    color: #1a1a1a !important;
+  }
+
+  .footer-content{
+    padding-right: 5.580vw;
+  }
+
+  .email-btn{
+    width: 16%;
+    border-left: 2px solid #949494;
+    border-right: none !important;
+    border-radius: 0px;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2.121vw;
+  }
+
+  .email-btn:hover{
+    background-color: #00ffd0;
+    color: #1a1a1a;
+    box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
+  }
+
+  .social-icon{
+    margin-right: 1.116vw !important;
+    position: relative;
+    top: 0.167vw;
+  }
+
+  .footer-grid{
+    width:50.223vw;
+  }
+
 }
 
-.footer-email:focus{
-  background-color: #1a1a1a;
-  color: #fff;
-  outline: none !important;
-  box-shadow: none !important;
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+
+  .footer-email{
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2.121vw;
+    line-height: 2.121vw;
+    padding: 1.953vw 0vw;
+    background: none;
+    border: none;
+  }
+
+  .footer-email:focus{
+    background-color: #1a1a1a;
+    color: #fff;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  .social-box{
+    border-radius: 0px !important;
+    border: 2px solid #949494;
+    background-color: none;
+  }
+
+  .list-group{
+    border-radius: 0px !important;
+  }
+
+  .list-group-item{
+    background-color: #1a1a1a !important;
+    padding: 1.116vw;
+    font-size: 1.562vw;
+    color: #fff;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    border-bottom: 2px solid #949494;
+    transition: 0.2s ease-in-out;
+  }
+
+  .list-group-item:hover{
+    padding-left: 2.232vw;
+    background-color: #00ffd0 !important;
+    box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
+    color: #1a1a1a !important;
+  }
+
+  .footer-content{
+    padding-right: 5.580vw;
+  }
+
+  .email-btn{
+    width: 16%;
+    border-left: 2px solid #949494;
+    border-right: none !important;
+    border-radius: 0px;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2.121vw;
+  }
+
+  .email-btn:hover{
+    background-color: #00ffd0;
+    color: #1a1a1a;
+    box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
+  }
+
+  .social-icon{
+    margin-right: 1.116vw !important;
+    position: relative;
+    top: 0.167vw;
+  }
+
+  .footer-grid{
+    width:50.223vw;
+  }
+
 }
 
-.social-box{
-  border-radius: 0px !important;
-  border: 2px solid #949494;
-  background-color: none;
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+
+  .footer-email{
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2.121vw;
+    line-height: 2.121vw;
+    padding: 1.953vw 0vw;
+    background: none;
+    border: none;
+  }
+
+  .footer-email:focus{
+    background-color: #1a1a1a;
+    color: #fff;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  .social-box{
+    border-radius: 0px !important;
+    border: 2px solid #949494;
+    background-color: none;
+  }
+
+  .list-group{
+    border-radius: 0px !important;
+  }
+
+  .list-group-item{
+    background-color: #1a1a1a !important;
+    padding: 1.116vw;
+    font-size: 1.562vw;
+    color: #fff;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    border-bottom: 2px solid #949494;
+    transition: 0.2s ease-in-out;
+  }
+
+  .list-group-item:hover{
+    padding-left: 2.232vw;
+    background-color: #00ffd0 !important;
+    box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
+    color: #1a1a1a !important;
+  }
+
+  .footer-content{
+    padding-right: 5.580vw;
+  }
+
+  .email-btn{
+    width: 16%;
+    border-left: 2px solid #949494;
+    border-right: none !important;
+    border-radius: 0px;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2.121vw;
+  }
+
+  .email-btn:hover{
+    background-color: #00ffd0;
+    color: #1a1a1a;
+    box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
+  }
+
+  .social-icon{
+    margin-right: 1.116vw !important;
+    position: relative;
+    top: 0.167vw;
+  }
+
+  .footer-grid{
+    width:50.223vw;
+  }
+
 }
 
-.list-group{
-  border-radius: 0px !important;
+@media only screen and (min-width: 576px) and (max-width: 768px){
+
+  .footer-email{
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2.121vw;
+    line-height: 2.121vw;
+    padding: 1.953vw 0vw;
+    background: none;
+    border: none;
+  }
+
+  .footer-email:focus{
+    background-color: #1a1a1a;
+    color: #fff;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  .social-box{
+    border-radius: 0px !important;
+    border: 2px solid #949494;
+    background-color: none;
+  }
+
+  .list-group{
+    border-radius: 0px !important;
+  }
+
+  .list-group-item{
+    background-color: #1a1a1a !important;
+    padding: 1.116vw;
+    font-size: 1.562vw;
+    color: #fff;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    border-bottom: 2px solid #949494;
+    transition: 0.2s ease-in-out;
+  }
+
+  .list-group-item:hover{
+    padding-left: 2.232vw;
+    background-color: #00ffd0 !important;
+    box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
+    color: #1a1a1a !important;
+  }
+
+  .footer-content{
+    padding-right: 5.580vw;
+  }
+
+  .email-btn{
+    width: 16%;
+    border-left: 2px solid #949494;
+    border-right: none !important;
+    border-radius: 0px;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2.121vw;
+  }
+
+  .email-btn:hover{
+    background-color: #00ffd0;
+    color: #1a1a1a;
+    box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
+  }
+
+  .social-icon{
+    margin-right: 1.116vw !important;
+    position: relative;
+    top: 0.167vw;
+  }
+
+  .footer-grid{
+    width:50.223vw;
+  }
+
 }
 
-.list-group-item{
-  background-color: #1a1a1a !important;
-  padding: 1.116vw;
-  font-size: 1.562vw;
-  color: #fff;
-  font-family: "pp-neue-machina", sans-serif;
-  text-transform: uppercase;
-  border-bottom: 2px solid #949494;
-  transition: 0.2s ease-in-out;
-}
+@media only screen and (max-width: 576px) {
 
-.list-group-item:hover{
-  padding-left: 2.232vw;
-  background-color: #00ffd0 !important;
-  box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
-  color: #1a1a1a !important;
-}
+  .footer-email{
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 4vw;
+    line-height: 2.121vw;
+    padding: 6vw 0vw;
+    background: none;
+    border: none;
+  }
 
-.footer-content{
-  padding-right: 5.580vw;
-}
+  .footer-email:focus{
+    background-color: #1a1a1a;
+    color: #fff;
+    outline: none !important;
+    box-shadow: none !important;
+  }
 
-.email-btn{
-  width: 16%;
-  border-left: 2px solid #949494;
-  border-right: none !important;
-  border-radius: 0px;
-  font-family: "pp-neue-machina", sans-serif;
-  text-transform: uppercase;
-  font-size: 2.121vw;
-}
+  .social-box{
+    border-radius: 0px !important;
+    border: 2px solid #949494;
+    background-color: none;
+  }
 
-.email-btn:hover{
-  background-color: #00ffd0;
-  color: #1a1a1a;
-  box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
-}
+  .list-group{
+    border-radius: 0px !important;
+  }
+
+  .list-group-item{
+    background-color: #1a1a1a !important;
+    padding: 3.5vw;
+    font-size: 4vw;
+    color: #fff;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    border-bottom: 2px solid #949494;
+    transition: 0.2s ease-in-out;
+  }
+
+  .list-group-item:hover{
+    padding-left: 7vw;
+    background-color: #00ffd0 !important;
+    box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
+    color: #1a1a1a !important;
+  }
+
+  .footer-content{
+    padding-right: 5.580vw;
+  }
+
+  .email-btn{
+    width: 16%;
+    border-left: 2px solid #949494;
+    border-right: none !important;
+    border-radius: 0px;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 4vw;
+  }
+
+  .email-btn:hover{
+    background-color: #00ffd0;
+    color: #1a1a1a;
+    box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
+  }
+
+  .social-icon{
+    margin-right: 2vw !important;
+    position: relative;
+    top: 0.167vw;
+  }
+
+  .footer-grid{
+    width:100%;
+  }
 
-.social-icon{
-  margin-right: 1.116vw !important;
-  position: relative;
-  top: 0.167vw;
 }