Simplify media queries, better group things together and add comments

Spencer14420 · Nov 1, 2024 · 5d2f5ba · 5d2f5ba
1 parent 00647d3
commit 5d2f5ba
Showing 1 changed file with 52 additions and 69 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -135,7 +135,9 @@ p, ul {
   font-size: 1.25rem;
 }
 
-/* Media Queries */
+/* #### Media Queries ##### */
+
+/* Top panel text adjustments */
 @media (max-width: 1200px) {
   #mantra, #companyname {
     font-size: 3.7rem !important;
@@ -157,12 +159,6 @@ p, ul {
   }
 }
 
-@media (min-height: 1000px) {
-  footer {
-    margin-top: 350px;
-  }
-}
-
 @media (max-width: 800px) {
   #mantra, #companyname {
     font-size: 3rem !important;
@@ -187,21 +183,28 @@ p, ul {
   }
 }
 
-/* Top paragraph box */
-@media (min-width: 1901px) and (max-height: 800px),
-  (min-width: 1501px) and (max-width: 1900px) and (max-height: 700px),
-  (min-width: 1201px) and (max-width: 1500px) and (max-height: 650px),
-  (min-width: 801px) and (max-width: 1200px) and (max-height: 590px),
-  (min-width: 701px) and (max-width: 800px) and (max-height: 510px),
-  (min-width: 601px) and (max-width: 700px) and (max-height: 480px),
-  (max-width: 600px) and (max-height: 525px) {
-  #openingpara {
-    background-color: rgba(255, 255, 255, 0.85);
-    border: 2px solid black;
+@media (max-width: 481px) {
+  #mantra {
+    font-size: 1.8rem !important;
+  }
+}
+
+@media (max-width: 438px) {
+  #mantra {
+    font-size: 1.6rem !important;
+  }
+}
+@media (max-width: 370px) {
+  #mantra {
+    font-size: 1.4rem !important;
+  }
+}
+@media (max-width: 327px) {
+  #mantra {
+    font-size: 1.2rem !important;
   }
 }
 
-/* If #companyname and #mantra are above non-white space */
 @media (min-width: 1901px) and (max-height: 660px),
   (min-width: 1501px) and (max-width: 1900px) and (max-height: 590px),
   (min-width: 1201px) and (max-width: 1500px) and (max-height: 460px),
@@ -215,7 +218,22 @@ p, ul {
   }
 }
 
-/* Single column */
+/* Adds a white background to the opening paragraph on specific screen sizes 
+when the text overlaps a complex part of the image, improving readability. */
+@media (min-width: 1901px) and (max-height: 800px),
+  (min-width: 1501px) and (max-width: 1900px) and (max-height: 700px),
+  (min-width: 1201px) and (max-width: 1500px) and (max-height: 650px),
+  (min-width: 801px) and (max-width: 1200px) and (max-height: 590px),
+  (min-width: 701px) and (max-width: 800px) and (max-height: 510px),
+  (min-width: 601px) and (max-width: 700px) and (max-height: 480px),
+  (max-width: 600px) and (max-height: 525px) {
+  #openingpara {
+    background-color: rgba(255, 255, 255, 0.85);
+    border: 2px solid black;
+  }
+}
+
+/* Single column layout and additional adjustments for screens up to 600px wide */
 @media (max-width: 600px) {
   #mantra, #companyname {
     font-size: 2rem !important;
@@ -244,9 +262,11 @@ p, ul {
   }
 }
 
-@media (max-width: 575px) or (max-height: 600px) {
+/* Contact modal adjustments */
+@media (max-width: 575px), (max-height: 600px) {
   div:has(> .contact-info) {
     align-items: center;
+    margin-bottom: -17px !important;
   }
   .contact-info {
     width: max-content;
@@ -260,26 +280,25 @@ p, ul {
   }
 }
 
-@media (max-width: 575px) {
+@media (max-width: 430px) {
   div:has(> .contact-info) {
-    margin-bottom: -17px !important;
+    flex-direction: column !important;
+  }
+  .contact-info:first-of-type {
+    margin-bottom: 2px;
+    flex-direction: row-reverse;
   }
 }
 
-@media (max-height: 530px) {
+/* Logo size adjustment for short height or very small screens */
+@media (max-height: 530px), (max-width: 450px) {
   #logo {
     width: 180px;
     height: 52px;
   }
 }
 
-@media (max-width: 481px) {
-  #mantra {
-    font-size: 1.8rem !important;
-  }
-}
-
-/* Hide button in top panel */
+/* Hide button in top panel for small screen sizes */
 @media (max-width: 600px) and (max-height: 410px),
   (min-width: 601px) and (max-width: 700px) and (max-height: 440px),
   (min-width: 701px) and (max-height: 475px) {
@@ -288,53 +307,17 @@ p, ul {
   }
 }
 
-@media (max-width: 450px) {
-  .px-5 {
-    padding: 0.25rem !important;
-  }
-  #logo {
-    width: 180px;
-    height: 52px;
-  }
-}
-
-@media (max-width: 430px) {
-  div:has(> .contact-info) {
-    flex-direction: column !important;
-  }
-  .contact-info:first-of-type {
-    margin-bottom: 2px;
-    flex-direction: row-reverse;
-  }
-}
-
+/* Remove padding on the top panel for very small screens */
 @media (max-width: 394px) {
   .top-panel .container-lg {
     padding: 0;
   }
 }
 
-@media (max-width: 438px) {
-  #mantra {
-    font-size: 1.6rem !important;
-  }
-}
-
-@media (max-width: 370px) {
-  #mantra {
-    font-size: 1.4rem !important;
-  }
-}
-
+/* Logo size adjustment for very small screens */
 @media (max-width: 350px) {
   #logo {
     width: 162px;
     height: 46px;
   }
 }
-
-@media (max-width: 327px) {
-  #mantra {
-    font-size: 1.2rem !important;
-  }
-}