updates on the navgation topbar styles and team styling , making them…

… responsive on both mobile and tables (#4)
kkeles · Jan 18, 2024 · 45d0f46 · 45d0f46
1 parent efcdfb2
commit 45d0f46
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 5 deletions.
diff --git a/themes/awsug/assets/css/navigation.css b/themes/awsug/assets/css/navigation.css
@@ -81,7 +81,6 @@ header img {
   position: relative;
   display: flex;
   justify-content: space-around;
-  border-top: 1px solid var(--color-primary-purple);
 }
 
 .footer-line {
@@ -111,7 +110,7 @@ header img {
 }
 
 .footer-column a:hover {
-  color: var(--color-primary-white);
+  color: var(--color-primary-yellow);
 }
 
 .footer-right {
@@ -159,17 +158,148 @@ header img {
   width: 320px; 
 }
 
+
+/* #endregion */
+
 @media (max-width: 600px) {
+  /* header */
+
+  .logo{
+    margin-left: 5px;
+    width: 180px;
+    height: auto;
+  }
+.nav-item a{
+  font-size: 14px;
+}
+
+  /* footer  */
   .footer {
+    display: flex !important;
     flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    padding: 10% 5%; /* Increased vertical padding and reduced horizontal padding */
+    margin-bottom: 20px;
+  }
+
+  .footer-line {
+    width: 90%; /* Increased width for better visibility */
+    top: 3%; /* Adjusted to better fit the new layout */
   }
+
   .footer-column {
-    margin-bottom: 20px;
-    align-items: center;
+    margin-bottom: 20px; /* Increased spacing between columns */
+    align-items: center; /* Center-align items for a cleaner look */
+    width: 100%; /* Full width for each column */
+  }
+
+  .footer-column h3 {
+    margin-bottom: 5px; /* Reduced margin for header */
+    text-decoration: underline; 
+    font-family: 'Courier New', Courier, monospace;
+  }
+
+  .footer-column a {
+    margin-bottom: 5%; /* Reduced space between links */
+    font-size: 13px;
   }
+
   .footer-right {
+    justify-content: center;
     text-align: center;
+    width: 100%; /* Full width */
+  }
+
+  .footer-right img {
+    width: 150px; /* Reduced logo size */
+  }
+
+  .footer-right p {
+    padding: 3px;
+    margin-bottom: 8px ; /* Reduced margin for paragraphs */
+    font-size: 12px;
+  }
+
+  .footer-social-items {
+    width: 60%; /* Adjusted width for social icons */
+    margin-top: 10px; /* Additional spacing above social icons */
+  }
+
+  .footer-social-item {
+    width: 24px; /* Reduced size for icons */
+    height: 24px;
+  }
+
+  .footer-social-item img {
+    width: 16px; /* Reduced image size inside icons */
+    height: 16px;
+  }
+
+  .footer-bg-image {
+    width: auto;
+    margin-top: 15px; /* Hide background image on mobile for cleaner look */
   }
 }
-/* #endregion */
 
+
+
+
+/* tablest */
+
+@media (min-width: 601px) and (max-width: 1024px) {
+  .footer {
+    flex-direction: row; /* Use row layout for larger screens */
+    padding: 3% 5%; /* Adjust padding for tablets */
+    justify-content: space-between; /* Spread out the columns */
+  }
+
+  .footer-line {
+    width: 90%; /* Adjust the line width */
+    top: 5%; /* Adjust position */
+  }
+
+  .footer-column {
+    width: 20%; /* Adjust the width of each column */
+    align-items: flex-start; /* Align items to the start */
+    margin-bottom: 0; /* Remove the bottom margin */
+  }
+
+  .footer-column h3 {
+    margin-bottom: 10px; /* Adjust the margin */
+  }
+
+  .footer-column a {
+    margin-bottom: 3%; /* Adjust the space between links */
+  }
+
+  .footer-right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 30%; /* Adjust width for right column */
+  }
+
+  .footer-right img {
+    width: 180px; /* Adjust logo size */
+  }
+
+  .footer-right p {
+    margin: 10px 0; /* Adjust paragraph margin */
+  }
+
+  .footer-social-items {
+    width: 70%; /* Adjust width of social icons container */
+    justify-content: space-around; /* Space out the icons */
+  }
+
+  .footer-social-item {
+    margin: 0 10px; /* Adjust margin around social icons */
+  }
+
+  .footer-bg-image {
+    display: none;
+  }
+}
diff --git a/themes/awsug/assets/css/team.css b/themes/awsug/assets/css/team.css
@@ -17,3 +17,28 @@
     gap: 1vw;
     padding: 3% 0%;
 }
+
+
+@media screen and (max-width: 768px) {
+    .team-members {
+        grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
+        gap: 2vw; /* Adjust gap if needed */
+        padding: 5% 0;
+    }
+
+    .team-title {
+        font-size: 16px; 
+        margin-top: 5%;
+    }
+
+}
+
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+    .team-members {
+        grid-template-columns: repeat(3, 1fr); 
+    }
+
+    .team-title {
+        font-size: 18px; 
+    }
+}