From 61646d2d6b57371da388b7fd5b8d13d549ebdc6a Mon Sep 17 00:00:00 2001 From: wikai <80284758+wikai@users.noreply.github.com> Date: Sun, 6 Oct 2024 00:41:52 +0200 Subject: [PATCH] SCSS: Refactor how-does-it-work section media queries, move them into its section file --- css/main.css | 184 ++++++++++++++++++-------------- css/scss/base/_media-width.scss | 168 ++++++++++++++--------------- css/scss/sections/_how.scss | 97 +++++++++++++++++ 3 files changed, 285 insertions(+), 164 deletions(-) diff --git a/css/main.css b/css/main.css index 235dd2f..2fab42b 100644 --- a/css/main.css +++ b/css/main.css @@ -620,10 +620,38 @@ 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; @@ -631,9 +659,60 @@ section#how { .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; @@ -641,6 +720,20 @@ section#how { 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; @@ -648,6 +741,17 @@ section#how { /* 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; diff --git a/css/scss/base/_media-width.scss b/css/scss/base/_media-width.scss index 17ae22a..38a8186 100644 --- a/css/scss/base/_media-width.scss +++ b/css/scss/base/_media-width.scss @@ -67,53 +67,53 @@ // } /* How does it work-section */ - .how-container { - h2 { - font-size: 2.125rem; - } + // .how-container { + // // h2 { + // // font-size: 2.125rem; + // // } - .mobile, .desktop { - display: none; - } - .tablet { - display: block; - } + // // .mobile, .desktop { + // // display: none; + // // } + // // .tablet { + // // display: block; + // // } - .images-container { - margin-top: 3rem; - /* Increase spacing between images as container grows in width */ - width: 100%; - max-width: 900px; - .mobile.img, .desktop.img { - display: none; - } - .tablet.img { - display: block; - flex-shrink: 0; - flex-grow: 1; - } - .img.left { - text-align: right; - } - .img.right { - text-align: left; - } - } + // .images-container { + // // margin-top: 3rem; + // // /* Increase spacing between images as container grows in width */ + // // width: 100%; + // // max-width: 900px; + // // .mobile.img, .desktop.img { + // // display: none; + // // } + // // .tablet.img { + // // display: block; + // // flex-shrink: 0; + // // flex-grow: 1; + // // } + // // .img.left { + // // text-align: right; + // // } + // // .img.right { + // // text-align: left; + // // } + // } - .image-description { - margin-top: 2.5rem; - width: 65%; - max-width: 550px; - h3 { - width: 100%; - font-size: 1.4rem; - line-height: 1.4; - } - p { - line-height: 1.625; - } - } - } + // .image-description { + // // margin-top: 2.5rem; + // // width: 65%; + // // max-width: 550px; + // // h3 { + // // width: 100%; + // // font-size: 1.4rem; + // // line-height: 1.4; + // // } + // p { + // line-height: 1.625; + // } + // } + // } /* FAQ-Contact section */ .faq-contact-container { @@ -322,49 +322,49 @@ // } /* How does it work-section */ - .how-container { - h2 { - margin-top: 5rem; - font-size: var(--fs-h1); - line-height: 1.3; - } + // .how-container { + // // h2 { + // // margin-top: 5rem; + // // font-size: var(--fs-h1); + // // line-height: 1.3; + // // } - .mobile, .tablet { - display: none; - } - .desktop { - display: block; - } + // // .mobile, .tablet { + // // display: none; + // // } + // // .desktop { + // // display: block; + // // } - .images-container { - /* Increase spacing between images as container grows in width */ - max-width: unset; - .mobile.img, .tablet.img { - display: none; - } - .desktop.img { - display: block; - flex-grow: 1; - } - .img.left, .img.right { - text-align: center; - } - } + // // .images-container { + // // // /* Increase spacing between images as container grows in width */ + // // // max-width: unset; + // // .mobile.img, .tablet.img { + // // display: none; + // // } + // // .desktop.img { + // // display: block; + // // flex-grow: 1; + // // } + // // .img.left, .img.right { + // // text-align: center; + // // } + // // } - .image-description { - width: 65%; - max-width: 550px; - h3 { - width: 100%; - font-size: 1.44rem; - line-height: 1.4; - } - p { - margin-bottom: 6rem; - line-height: 1.625; - } - } - } + // .image-description { + // // width: 65%; + // // max-width: 550px; + // // h3 { + // // width: 100%; + // // font-size: 1.44rem; + // // line-height: 1.4; + // // } + // p { + // margin-bottom: 6rem; + // line-height: 1.625; + // } + // } + // } /* Payment section */ section#payment { diff --git a/css/scss/sections/_how.scss b/css/scss/sections/_how.scss index 759cf0b..279cd52 100644 --- a/css/scss/sections/_how.scss +++ b/css/scss/sections/_how.scss @@ -1,3 +1,5 @@ +@use '../abstracts/' as *; + section#how { background-color: var(--color-how-bg); } @@ -11,9 +13,35 @@ section#how { display: none; } + @include tablet { + .mobile, .desktop { + display: none; + } + .tablet { + display: block; + } + } + @include desktop { + .mobile, .tablet { + display: none; + } + .desktop { + display: block; + } + } + h2 { font-size: 1.75rem; margin-top: 4rem; + + @include tablet { + font-size: 2.125rem; + } + @include desktop { + margin-top: 5rem; + font-size: var(--fs-h1); + line-height: 1.3; + } } .images-container { @@ -23,17 +51,76 @@ section#how { img { max-width: 100%; } + + @include tablet { + margin-top: 3rem; + /* Increase spacing between images as container grows in width */ + width: 100%; + max-width: 900px; + + .mobile.img, .desktop.img { + display: none; + } + .tablet.img { + display: block; + flex-shrink: 0; + flex-grow: 1; + } + .img.left { + text-align: right; + } + .img.right { + text-align: left; + } + } + @include desktop { + /* Increase spacing between images as container grows in width */ + max-width: unset; + + .mobile.img, .tablet.img { + display: none; + } + .desktop.img { + display: block; + flex-grow: 1; + } + .img.left, .img.right { + text-align: center; + } + } + } .image-description { margin-top: 1.5rem; + @include tablet { + margin-top: 2.5rem; + width: 65%; + max-width: 550px; + } + @include desktop { + width: 65%; + max-width: 550px; + } + h3 { display: inline-block; font-size: 1.375rem; font-weight: var(--fw-extra); line-height: 1.4; width: 85%; + + @include tablet { + width: 100%; + font-size: 1.4rem; + line-height: 1.4; + } + @include desktop { + width: 100%; + font-size: 1.44rem; + line-height: 1.4; + } } p { font-size: var(--fs-body-m); @@ -41,6 +128,16 @@ section#how { margin-bottom: 4rem; /* Poor contrast, but according to design */ color: var(--color-gray-700); + + @include tablet { + line-height: 1.625; + } + @include desktop { + p { + margin-bottom: 6rem; + line-height: 1.625; + } + } } } } \ No newline at end of file