SCSS: Move faqcontact and footer media queries into their respective …

…section files. Delete unused media query file.
wikjoh · Oct 5, 2024 · 281ebbb · 281ebbb
1 parent af9096a
commit 281ebbb
Show file tree

Hide file tree

Showing 7 changed files with 290 additions and 538 deletions.
diff --git a/css/main.css b/css/main.css
@@ -872,20 +872,93 @@ section#reviews {
   display: grid;
   grid-template-columns: 1fr;
 }
+@media (width >= 1400px) {
+  .faq-contact-container {
+    margin-top: 7rem;
+    display: grid;
+    grid-template-columns: 0.6fr 1fr;
+    grid-template-rows: auto 1fr;
+    -moz-column-gap: 8rem;
+         column-gap: 8rem;
+    grid-template-areas: "header faq-accordion" "contact faq-accordion" "subscribe subscribe";
+    align-items: start;
+  }
+}
+@media (width >= 768px) {
+  .faq-contact-container .header {
+    justify-self: center;
+    width: 60%;
+  }
+}
+@media (width >= 1400px) {
+  .faq-contact-container .header {
+    grid-area: header;
+    justify-self: left;
+    width: 100%;
+  }
+}
 .faq-contact-container .header h2 {
   margin-top: 3rem;
   font-size: var(--fs-h4);
   font-weight: var(--fw-extra);
 }
+@media (width >= 768px) {
+  .faq-contact-container .header h2 {
+    font-size: var(--fs-h2);
+    line-height: 1.3;
+  }
+}
+@media (width >= 1400px) {
+  .faq-contact-container .header h2 {
+    text-align: left;
+  }
+}
 .faq-contact-container .header p {
   /* Poor contrast, but according to design */
   color: var(--color-gray-700);
 }
+@media (width >= 768px) {
+  .faq-contact-container .header p {
+    margin-top: 2rem;
+  }
+}
+@media (width >= 1400px) {
+  .faq-contact-container .header p {
+    text-align: left;
+  }
+}
 .faq-contact-container p {
   margin-top: 1rem;
   font-size: var(--fs-body-l);
   line-height: 1.6;
 }
+@media (width >= 1400px) {
+  .faq-contact-container p {
+    margin-top: 2rem;
+  }
+}
+@media (width >= 768px) {
+  .faq-contact-container .faq-accordion {
+    /* Start by removing FAQ borders */
+    --_faq-border: unset;
+  }
+  .faq-contact-container .faq-accordion details {
+    box-shadow: 0px 2px 5px var(--color-faqoutline);
+    border-radius: 8px;
+    /* Apply margin-top to all details-elements except first one */
+  }
+  .faq-contact-container .faq-accordion details p:first-child {
+    margin-top: 0;
+  }
+  .faq-contact-container .faq-accordion details:not(:first-child) {
+    margin-top: 1rem;
+  }
+}
+@media (width >= 1400px) {
+  .faq-contact-container .faq-accordion {
+    grid-area: faq-accordion;
+  }
+}
 .faq-contact-container .faq-accordion p {
   font-size: var(--fs-body-s);
 }
@@ -895,6 +968,17 @@ section#reviews {
   justify-content: center;
   align-items: center;
 }
+@media (width >= 768px) {
+  .faq-contact-container .contact {
+    margin-top: 2rem;
+  }
+}
+@media (width >= 1400px) {
+  .faq-contact-container .contact {
+    grid-area: contact;
+    margin-top: 3rem;
+  }
+}
 .faq-contact-container .contact-cards {
   display: none;
   width: 100%;
@@ -904,6 +988,11 @@ section#reviews {
   /* Make cards take up equal width */
   flex-basis: 100%;
 }
+@media (width >= 768px) {
+  .faq-contact-container .contact-cards {
+    display: flex;
+  }
+}
 .faq-contact-container .contact-card {
   padding: 1.5em 1.5em 2em;
   border: 1px solid var(--color-gray-300);
@@ -914,6 +1003,11 @@ section#reviews {
   line-height: 1.6;
   font-weight: var(--fw-semi);
 }
+@media (width >= 768px) {
+  .faq-contact-container .btn-contanct {
+    display: none;
+  }
+}
 .faq-contact-container .fa-comment-dots {
   /* Flip icon horizontally to match design */
   transform: scaleX(-1);
@@ -947,9 +1041,19 @@ section#reviews {
   font-size: var(--fs-body-s);
   line-height: 1.6;
 }
+@media (width >= 1400px) {
+  .footer {
+    padding: 3rem 0;
+  }
+}
 .footer span {
   color: var(--color-gray-600);
 }
+@media (width >= 768px) {
+  .footer .footer-splitter {
+    display: none;
+  }
+}
 
 a {
   color: var(--color-primary);
@@ -1022,6 +1126,11 @@ a:hover {
   line-height: 1.6;
   padding: 1em 2em;
 }
+@media (width >= 768px) {
+  .btn-contact {
+    display: none;
+  }
+}
 
 .btn-dl {
   /* Give buttons a higher z-index to make sure they aren't covered
@@ -1333,20 +1442,61 @@ a:hover {
   display: flex;
   flex-direction: column;
 }
+@media (width >= 768px) {
+  .subscribe {
+    margin-top: 2rem;
+    padding: 3rem 1rem;
+    flex-direction: row;
+  }
+}
+@media (width >= 1400px) {
+  .subscribe {
+    grid-area: subscribe;
+    margin-top: 6rem;
+    padding: 4rem 6rem;
+  }
+}
 .subscribe .cta {
   display: flex;
   align-items: center;
 }
+@media (width >= 768px) {
+  .subscribe .cta {
+    flex-basis: 50%;
+    justify-content: center;
+    margin-right: 3rem;
+  }
+}
 .subscribe .cta h2 {
   font-size: 1.375rem;
   line-height: 1.35;
 }
 .subscribe .cta h2.desktop-text {
   display: none;
 }
+@media (width >= 1400px) {
+  .subscribe .cta h2.desktop-text {
+    display: block;
+  }
+}
+@media (width >= 1400px) {
+  .subscribe .cta h2 {
+    display: none;
+  }
+}
 .subscribe .cta img {
   margin-right: 1rem;
 }
+@media (width >= 768px) {
+  .subscribe .cta img {
+    margin-right: 2rem;
+  }
+}
+@media (width >= 768px) {
+  .subscribe .email-form {
+    flex-basis: 50%;
+  }
+}
 .subscribe .input-container {
   margin-top: 2.5rem;
   margin-bottom: 2rem;
@@ -1608,108 +1758,4 @@ a:hover {
   #darkmode-switch-whitebg {
     display: none;
   }
-}
-@media (768px <= width) {
-  /* How does it work-section */
-  /* FAQ-Contact section */
-  .faq-contact-container .header {
-    justify-self: center;
-    width: 60%;
-  }
-  .faq-contact-container .header h2 {
-    font-size: var(--fs-h2);
-    line-height: 1.3;
-  }
-  .faq-contact-container .header p {
-    margin-top: 2rem;
-  }
-  .faq-contact-container .faq-accordion {
-    /* Start by removing FAQ borders */
-    --_faq-border: unset;
-  }
-  .faq-contact-container .faq-accordion details {
-    box-shadow: 0px 2px 5px var(--color-faqoutline);
-    border-radius: 8px;
-    /* Apply margin-top to all details-elements except first one */
-  }
-  .faq-contact-container .faq-accordion details p:first-child {
-    margin-top: 0;
-  }
-  .faq-contact-container .faq-accordion details:not(:first-child) {
-    margin-top: 1rem;
-  }
-  .faq-contact-container .btn-contact {
-    /* Hide contact button and show contact cards */
-    display: none;
-  }
-  .faq-contact-container .contact-cards {
-    display: flex;
-  }
-  .faq-contact-container .contact {
-    margin-top: 2rem;
-  }
-  .faq-contact-container .subscribe {
-    margin-top: 2rem;
-    padding: 3rem 1rem;
-    flex-direction: row;
-  }
-  .faq-contact-container .subscribe .cta, .faq-contact-container .subscribe .email-form {
-    flex-basis: 50%;
-  }
-  .faq-contact-container .subscribe .cta {
-    justify-content: center;
-    margin-right: 3rem;
-  }
-  .faq-contact-container .subscribe .cta img {
-    margin-right: 2rem;
-  }
-  .footer .footer-splitter {
-    display: none;
-  }
-}
-@media (1400px <= width) {
-  /* How does it work-section */
-  /* FAQ-contact section */
-  .faq-contact-container {
-    margin-top: 7rem;
-    display: grid;
-    grid-template-columns: 0.6fr 1fr;
-    grid-template-rows: auto 1fr;
-    -moz-column-gap: 8rem;
-         column-gap: 8rem;
-    grid-template-areas: "header faq-accordion" "contact faq-accordion" "subscribe subscribe";
-    align-items: start;
-  }
-  .faq-contact-container .header {
-    grid-area: header;
-    justify-self: left;
-    width: 100%;
-  }
-  .faq-contact-container .header h2, .faq-contact-container .header p {
-    text-align: left;
-  }
-  .faq-contact-container p {
-    margin-top: 2rem;
-  }
-  .faq-contact-container .faq-accordion {
-    grid-area: faq-accordion;
-  }
-  .faq-contact-container .contact {
-    grid-area: contact;
-    margin-top: 3rem;
-  }
-  .faq-contact-container .subscribe {
-    grid-area: subscribe;
-    margin-top: 6rem;
-    padding: 4rem 6rem;
-  }
-  .faq-contact-container .subscribe h2 {
-    display: none;
-  }
-  .faq-contact-container .subscribe .cta h2.desktop-text {
-    display: block;
-  }
-  .footer {
-    padding: 3rem 0;
-  }
 }