SCSS: Refactor how-does-it-work section media queries, move them into…

… its section file
wikjoh · Oct 5, 2024 · 61646d2 · 61646d2
1 parent 0154e58
commit 61646d2
Show file tree

Hide file tree

Showing 3 changed files with 285 additions and 164 deletions.
diff --git a/css/main.css b/css/main.css
@@ -620,34 +620,138 @@ section#how {
 .how-container .tablet, .how-container .desktop {
   display: none;
 }
+@media (width >= 768px) {
+  .how-container .mobile, .how-container .desktop {
+    display: none;
+  }
+  .how-container .tablet {
+    display: block;
+  }
+}
+@media (width >= 1400px) {
+  .how-container .mobile, .how-container .tablet {
+    display: none;
+  }
+  .how-container .desktop {
+    display: block;
+  }
+}
 .how-container h2 {
   font-size: 1.75rem;
   margin-top: 4rem;
 }
+@media (width >= 768px) {
+  .how-container h2 {
+    font-size: 2.125rem;
+  }
+}
+@media (width >= 1400px) {
+  .how-container h2 {
+    margin-top: 5rem;
+    font-size: var(--fs-h1);
+    line-height: 1.3;
+  }
+}
 .how-container .images-container {
   display: flex;
   margin-top: 2rem;
 }
 .how-container .images-container img {
   max-width: 100%;
 }
+@media (width >= 768px) {
+  .how-container .images-container {
+    margin-top: 3rem;
+    /* Increase spacing between images as container grows in width */
+    width: 100%;
+    max-width: 900px;
+  }
+  .how-container .images-container .mobile.img, .how-container .images-container .desktop.img {
+    display: none;
+  }
+  .how-container .images-container .tablet.img {
+    display: block;
+    flex-shrink: 0;
+    flex-grow: 1;
+  }
+  .how-container .images-container .img.left {
+    text-align: right;
+  }
+  .how-container .images-container .img.right {
+    text-align: left;
+  }
+}
+@media (width >= 1400px) {
+  .how-container .images-container {
+    /* Increase spacing between images as container grows in width */
+    max-width: unset;
+  }
+  .how-container .images-container .mobile.img, .how-container .images-container .tablet.img {
+    display: none;
+  }
+  .how-container .images-container .desktop.img {
+    display: block;
+    flex-grow: 1;
+  }
+  .how-container .images-container .img.left, .how-container .images-container .img.right {
+    text-align: center;
+  }
+}
 .how-container .image-description {
   margin-top: 1.5rem;
 }
+@media (width >= 768px) {
+  .how-container .image-description {
+    margin-top: 2.5rem;
+    width: 65%;
+    max-width: 550px;
+  }
+}
+@media (width >= 1400px) {
+  .how-container .image-description {
+    width: 65%;
+    max-width: 550px;
+  }
+}
 .how-container .image-description h3 {
   display: inline-block;
   font-size: 1.375rem;
   font-weight: var(--fw-extra);
   line-height: 1.4;
   width: 85%;
 }
+@media (width >= 768px) {
+  .how-container .image-description h3 {
+    width: 100%;
+    font-size: 1.4rem;
+    line-height: 1.4;
+  }
+}
+@media (width >= 1400px) {
+  .how-container .image-description h3 {
+    width: 100%;
+    font-size: 1.44rem;
+    line-height: 1.4;
+  }
+}
 .how-container .image-description p {
   font-size: var(--fs-body-m);
   margin-top: 1rem;
   margin-bottom: 4rem;
   /* Poor contrast, but according to design */
   color: var(--color-gray-700);
 }
+@media (width >= 768px) {
+  .how-container .image-description p {
+    line-height: 1.625;
+  }
+}
+@media (width >= 1400px) {
+  .how-container .image-description p p {
+    margin-bottom: 6rem;
+    line-height: 1.625;
+  }
+}
 
 section#payment {
   display: none;
@@ -1497,48 +1601,6 @@ a:hover {
 }
 @media (768px <= width) {
   /* How does it work-section */
-  .how-container h2 {
-    font-size: 2.125rem;
-  }
-  .how-container .mobile, .how-container .desktop {
-    display: none;
-  }
-  .how-container .tablet {
-    display: block;
-  }
-  .how-container .images-container {
-    margin-top: 3rem;
-    /* Increase spacing between images as container grows in width */
-    width: 100%;
-    max-width: 900px;
-  }
-  .how-container .images-container .mobile.img, .how-container .images-container .desktop.img {
-    display: none;
-  }
-  .how-container .images-container .tablet.img {
-    display: block;
-    flex-shrink: 0;
-    flex-grow: 1;
-  }
-  .how-container .images-container .img.left {
-    text-align: right;
-  }
-  .how-container .images-container .img.right {
-    text-align: left;
-  }
-  .how-container .image-description {
-    margin-top: 2.5rem;
-    width: 65%;
-    max-width: 550px;
-  }
-  .how-container .image-description h3 {
-    width: 100%;
-    font-size: 1.4rem;
-    line-height: 1.4;
-  }
-  .how-container .image-description p {
-    line-height: 1.625;
-  }
   /* FAQ-Contact section */
   .faq-contact-container .header {
     justify-self: center;
@@ -1597,44 +1659,6 @@ a:hover {
 }
 @media (1400px <= width) {
   /* How does it work-section */
-  .how-container h2 {
-    margin-top: 5rem;
-    font-size: var(--fs-h1);
-    line-height: 1.3;
-  }
-  .how-container .mobile, .how-container .tablet {
-    display: none;
-  }
-  .how-container .desktop {
-    display: block;
-  }
-  .how-container .images-container {
-    /* Increase spacing between images as container grows in width */
-    max-width: unset;
-  }
-  .how-container .images-container .mobile.img, .how-container .images-container .tablet.img {
-    display: none;
-  }
-  .how-container .images-container .desktop.img {
-    display: block;
-    flex-grow: 1;
-  }
-  .how-container .images-container .img.left, .how-container .images-container .img.right {
-    text-align: center;
-  }
-  .how-container .image-description {
-    width: 65%;
-    max-width: 550px;
-  }
-  .how-container .image-description h3 {
-    width: 100%;
-    font-size: 1.44rem;
-    line-height: 1.4;
-  }
-  .how-container .image-description p {
-    margin-bottom: 6rem;
-    line-height: 1.625;
-  }
   /* Payment section */
   section#payment {
     display: block;