Footer responsive to screen size

osuosl · Aug 28, 2024 · f9cefe2 · f9cefe2
1 parent 4280528
commit f9cefe2
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 4 deletions.
diff --git a/themes/osuosl/assets/css/style.css b/themes/osuosl/assets/css/style.css
@@ -803,7 +803,7 @@ textarea {
     body {
         width: 100%;
     }
-    
+
     .mobile-carousel {
         padding-top: 20px;
     }
@@ -856,4 +856,62 @@ textarea {
         padding-top: 5px;
         padding-bottom: 5px;
     }
+
+    .footer {
+        background: #e5e2dd;
+        color: #252525;
+    }
+
+    .footer a {
+        color: #252525;
+    }
+
+    .footer_menu_container {
+        flex-direction: column;
+        background: #292929;
+        border-radius: 5px;
+        padding-bottom: 15px;
+    }
+
+    .footer_menu_container a {
+        color: #fff;
+    }
+
+    .footer_menu_link_container {
+        padding: 0;
+        margin: 0;
+        margin-top: 10px;
+    }
+
+    .footer_menu_link_container:last-child {
+        padding-bottom: 5px;
+    }
+
+    .submenu_footer_link_container {
+        padding-left: 10px;
+        padding-top: 5px;
+        background-color: #545454;
+        max-width: 100%;
+    }
+
+    .submenu_footer_link_container a {
+        margin: 0;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 10px;
+    }
+
+    .submenu_footer_link_container a:hover {
+        text-decoration: none;
+        background-color: #686868;
+        border-radius: 5px;
+    }
+
+    .footer_links {
+        margin-left: 10px;
+    }
+
+    .footer__container {
+        margin-bottom: 20px;
+    }
 }
diff --git a/themes/osuosl/layouts/partials/footer.html b/themes/osuosl/layouts/partials/footer.html
@@ -32,7 +32,7 @@
                 <div class="footer_menu_link_container"><a class="footer_links">HOME</a></div>
                 <div class="footer_menu_link_container">
                     <a href="/about" class="footer_links">ABOUT</a>
-                    <div class="footer_link_container">
+                    <div class="footer_link_container submenu_footer_link_container">
                         <a href="/about">About OSL</a>
                         <a href="/faq">FAQ</a>
                         <a href="/contact">Contact Us</a>
@@ -43,7 +43,7 @@
                 </div>
                 <div class="footer_menu_link_container">
                     <a href="/services" class="footer_links">SERVICES</a>
-                    <div class="footer_link_container">
+                    <div class="footer_link_container submenu_footer_link_container">
                         <a href="/services/hosting">Hosting</a>
                         <a href="/services/aarch64">AARCH64 Development Hosting</a>
                         <a href="/services/powerdev">POWERLinux/OpnePOWER Development Hosting</a>
@@ -52,7 +52,7 @@
                 </div>
                 <div class="footer_menu_link_container">
                     <a href="/students" class="footer_links">STUDENT EXPERIENCE</a>
-                    <div class="footer_link_container">
+                    <div class="footer_link_container submenu_footer_link_container">
                         <a href="/about/employement">Employement</a>
                         <a href="/about/education">Education</a>
                         <a href="/student-stories">Student Stories</a>