Mobile: New footer design and text colors (#629)

cal-itp · Jun 7, 2022 · a4884f0 · a4884f0
2 parents 1bc86c0 + 04b487f
commit a4884f0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 12 deletions.
diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
@@ -61,14 +61,14 @@
 
         <footer id="footer" class="global-footer">
             <div class="container">
-                <div class="row">
-                    <div class="col-sm-12">
-                        <ul class="footer-links">
-                            <li><a href="{% url "core:help" %}">{% translate "core.buttons.help" %}</a></li>
-                            <li><a href="https://www.dmv.ca.gov/portal/privacy-and-security/" target="_blank" rel="noopener noreferrer">{% translate "core.buttons.privacy" %}</a></li>
-                        </ul>
-                    </div>
-                </div>
+                <ul class="footer-links">
+                    <li>
+                        <a href="{% url "core:help" %}">{% translate "core.buttons.help" %}</a>
+                    </li>
+                    <li>
+                        <a href="https://www.dmv.ca.gov/portal/privacy-and-security/" target="_blank" rel="noopener noreferrer">{% translate "core.buttons.privacy" %}</a>
+                    </li>
+                </ul>
             </div>
         </footer>
 

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -86,8 +86,15 @@ footer {
   padding-bottom: 1rem;
 }
 
-footer .footer-links a {
+footer.global-footer .footer-links a {
   font-size: 16px;
+  color: #0590cd;
+}
+
+footer.global-footer .footer-links a:hover,
+footer.global-footer .footer-links a:focus,
+footer.global-footer .footer-links a:active {
+  color: #9b74d7;
 }
 
 /* class styles */
@@ -419,7 +426,7 @@ footer .footer-links a {
 /* Header */
 
 .navbar.navbar-expand-sm.navbar-dark.bg-primary {
-  padding: 8.5px 1rem;
+  padding: 14.5px 1rem;
 }
 
 .navbar-brand {
@@ -536,9 +543,33 @@ footer .footer-links a {
 
 @media (max-width: 767px) {
   /* xs and sm */
+  .global-footer {
+    padding: 0;
+  }
+
+  .global-footer .container {
+    padding: 0;
+    max-width: 100%;
+  }
+
+  .global-footer ul.footer-links {
+    margin: 0 !important;
+    padding: 0;
+  }
 
-  .global-footer ul li {
-    text-align: center;
+  .global-footer ul.footer-links li {
+    width: 100%;
+    line-height: 50px;
+    margin-left: 0;
+  }
+
+  .global-footer ul.footer-links li:not(:last-child) {
+    border-bottom: 2px solid white;
+  }
+
+  .global-footer ul.footer-links li a {
+    padding-left: 30px;
+    margin: 0;
   }
 
   .radio-container {