refactor(footer): first pass at Footer refactor

cal-itp · Aug 10, 2023 · cdd9566 · cdd9566
1 parent 2eb1184
commit cdd9566
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
@@ -102,8 +102,8 @@
       {% endblock main-content %}
     </main>
 
-    <footer id="footer">
-      <div class="container">
+    <footer id="footer" class="navbar py-0">
+      <div class="container d-none d-lg-block">
         <ul class="footer-links m-0 p-0 list-unstyled d-lg-flex gap-lg-4">
           <li>
             <a class="m-0 ps-5 ps-lg-0" href="{% url "core:help" %}">{% translate "Help" %}</a>
@@ -113,6 +113,25 @@
           </li>
         </ul>
       </div>
+
+      <div class="d-block d-lg-none container">
+        <ul class="col-12 footer-links ps-0 mb-0">
+          <li>
+            <a href="{% url "core:help" %}">{% translate "Help" %}</a>
+          </li>
+        </ul>
+      </div>
+      <div class="d-block d-lg-none container-fluid p-0">
+        <hr class="border border-white border-1 p-0 m-0 w-100 opacity-100">
+      </div>
+      <div class="d-block d-lg-none container">
+        <ul class="col-12 footer-links ps-0 mb-0">
+          <li>
+            <a href="https://cdt.ca.gov/privacy-policy/" target="_blank" rel="noopener noreferrer" class="">Privacy Policy</a>
+          </li>
+        </ul>
+      </div>
+
     </footer>
 
     {% comment %}

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -285,14 +285,23 @@ main {
   }
 }
 
+/* Custom non-mobile-first code to */
+/* allow the mobile footer to have a */
+/* full-width line beyond container-fluid width */
+@media (max-width: 992px) {
+  footer {
+    margin-top: 64px;
+  }
+}
+
 footer {
   background: var(--footer-background-color);
   margin-top: 64px;
 }
 
-footer .footer-links li {
+/* footer .footer-links li {
   width: var(--footer-link-width);
-}
+} */
 
 footer .footer-links li a {
   color: var(--footer-link-color);
@@ -312,24 +321,6 @@ footer .footer-links li a:visited {
   color: var(--footer-link-visited-color);
 }
 
-/* Custom non-mobile-first code to */
-/* allow the mobile footer to have a */
-/* full-width line beyond container-fluid width */
-@media (max-width: 992px) {
-  footer {
-    margin-top: 64px;
-  }
-
-  footer .container {
-    max-width: 100%;
-    padding: 0;
-  }
-
-  footer .footer-links li:not(:last-child) {
-    border-bottom: 2px solid var(--footer-mobile-underline-color);
-  }
-}
-
 /* Header */
 
 #header-container {