From c3a2d4820cc15cd1a33a2a54f42b8cbd3be0b225 Mon Sep 17 00:00:00 2001 From: Andreas Haller Date: Thu, 7 Dec 2023 14:00:07 +0100 Subject: [PATCH] streamline viewport breakpoints according to best practises --- blocks/blog-posts/blog-card.css | 2 +- blocks/blog-posts/blog-posts.css | 2 +- blocks/blog-sidebar/blog-sidebar.css | 2 +- blocks/cards/cards.css | 23 ++++----------- blocks/chapter-cards/chapter-cards.css | 9 ++---- blocks/columns/columns.css | 2 +- blocks/expanding-cards/expanding-cards.css | 25 ++++++---------- .../fixed-social-media/fixed-social-media.css | 2 +- blocks/flip-cards/flip-cards.css | 9 ++---- blocks/footer/footer.css | 11 +++---- blocks/form/gdpr.css | 2 +- blocks/header/header.css | 20 ++++++++----- blocks/header/header.js | 2 +- blocks/hero/hero.css | 2 +- blocks/job-openings/job-openings.css | 2 +- .../leader-profiles-flyout.css | 4 +-- blocks/leader-profiles/leader-profiles.css | 29 +++++++++---------- blocks/leader-profiles/leader-profiles.js | 4 +-- blocks/logos/logos.css | 2 +- blocks/logos/logos.js | 2 +- .../multicolor-accordion.css | 13 +++++---- blocks/offices/offices.css | 2 +- blocks/related-blogs/related-blogs.css | 2 +- blocks/search-results/search-results.css | 2 +- blocks/social/social.css | 4 +-- blocks/spinning-cards/spinning-cards.css | 10 +++---- blocks/testimonial/testimonial.css | 2 +- styles/styles.css | 2 +- styles/two-columns.css | 2 +- 29 files changed, 85 insertions(+), 110 deletions(-) diff --git a/blocks/blog-posts/blog-card.css b/blocks/blog-posts/blog-card.css index ff69d6b9..d32728a7 100644 --- a/blocks/blog-posts/blog-card.css +++ b/blocks/blog-posts/blog-card.css @@ -195,7 +195,7 @@ display: inline-block; } -@media (min-width: 992px) { +@media (min-width: 900px) { .blog-cards-container h2.teaser-description { min-height: 100px; } diff --git a/blocks/blog-posts/blog-posts.css b/blocks/blog-posts/blog-posts.css index ac6949cd..ebc1fe1f 100644 --- a/blocks/blog-posts/blog-posts.css +++ b/blocks/blog-posts/blog-posts.css @@ -78,7 +78,7 @@ } } -@media (min-width: 992px) { +@media (min-width: 900px) { .blog-posts ul.related-list { grid-template-columns: repeat(3, 1fr); } diff --git a/blocks/blog-sidebar/blog-sidebar.css b/blocks/blog-sidebar/blog-sidebar.css index 0f059b2a..d2bd0e90 100644 --- a/blocks/blog-sidebar/blog-sidebar.css +++ b/blocks/blog-sidebar/blog-sidebar.css @@ -43,7 +43,7 @@ width: 42px; } -@media (min-width: 992px) { +@media (min-width: 900px) { :root { --blog-sidebar-margin-width: calc((100vw - var(--section-width)) / 2); } diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 63288363..16bccec0 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -142,7 +142,7 @@ padding: 0; position: relative; list-style: none; - height: 500px; + height: 380px; display: block; } @@ -218,6 +218,7 @@ } .cards.side-by-side > ul > li { + height: 500px; margin: 0; padding: 0; position: relative; @@ -268,18 +269,11 @@ font-size: 32px; margin-top: 180px; } -} - -@media (max-width: 600px) { - .cards.side-by-side > ul > li { - height: 380px; - } - } - +} -@media (min-width: 750px) { +@media (min-width: 900px) { .cards.icon-with-text > ul { - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; } .cards.teaser.background > ul > li > div:nth-last-child(2) { @@ -290,13 +284,6 @@ width: 45%; } - /* cards side-by-side */ - .cards.side-by-side > ul > li > .cards-card-body { - width: 320px; - } -} - -@media (min-width: 992px) { .cards.teaser > ul > li { display: grid; grid-gap: 30px; diff --git a/blocks/chapter-cards/chapter-cards.css b/blocks/chapter-cards/chapter-cards.css index c7094753..e6a92830 100644 --- a/blocks/chapter-cards/chapter-cards.css +++ b/blocks/chapter-cards/chapter-cards.css @@ -3,15 +3,10 @@ margin: 0; padding: 0; display: grid; + grid-template-columns: 1fr; } -@media (max-width: 799px) { - .chapter-cards-wrap { - grid-template-columns: 1fr; - } -} - -@media (min-width: 800px) { +@media (min-width: 900px) { .chapter-cards-wrap { grid-template-columns: 1fr 1fr 1fr; } diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index b57b3e28..f6ddac63 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -165,7 +165,7 @@ } } -@media (min-width: 992px) { +@media (min-width: 900px) { .columns { --column-fb-left: 50%; --column-fb-other: 0%; diff --git a/blocks/expanding-cards/expanding-cards.css b/blocks/expanding-cards/expanding-cards.css index ee153c2d..6765ecb0 100644 --- a/blocks/expanding-cards/expanding-cards.css +++ b/blocks/expanding-cards/expanding-cards.css @@ -1,5 +1,5 @@ .expanding-cards-wrapper * { - color: var(--c-white) + color: var(--c-white); } .expanding-cards-wrapper ul { @@ -11,6 +11,7 @@ .expanding-cards-wrap { margin: 0; gap: 30px; + flex-direction: column; } .expanding-cards-content h6 { @@ -31,6 +32,7 @@ opacity: 0; transition: opacity 0.6s; box-sizing: border-box; + max-width: calc(50% - 15px); } .expanding-cards-item { @@ -71,6 +73,7 @@ transition: opacity 0.6s; pointer-events: none; z-index: 0; + max-width: 50%; } .expanding-cards-nav { @@ -90,7 +93,11 @@ padding: 0; } -@media (min-width: 800px) { +@media (min-width: 900px) { + .expanding-cards-wrap { + flex-direction: unset; + } + .expanding-cards-item-active { flex-basis: 200%; } @@ -105,17 +112,3 @@ background: transparent; border-color: var(--c-black); } - -@media (max-width: 799px) { - .expanding-cards-wrap { - flex-direction: column; - } - - .expanding-cards-text { - max-width: calc(50% - 15px); - } - - .expanding-cards-image { - max-width: 50%; - } -} diff --git a/blocks/fixed-social-media/fixed-social-media.css b/blocks/fixed-social-media/fixed-social-media.css index e1455124..0b63efdc 100644 --- a/blocks/fixed-social-media/fixed-social-media.css +++ b/blocks/fixed-social-media/fixed-social-media.css @@ -2,7 +2,7 @@ display: none; } -@media (min-width: 992px) { +@media (min-width: 900px) { .fixed-social-media-wrapper { display: flex; top: 0; diff --git a/blocks/flip-cards/flip-cards.css b/blocks/flip-cards/flip-cards.css index 67d22b7a..fba04fca 100644 --- a/blocks/flip-cards/flip-cards.css +++ b/blocks/flip-cards/flip-cards.css @@ -4,15 +4,10 @@ padding: 0; display: grid; gap: 30px; + grid-template-columns: 1fr; } -@media (max-width: 799px) { - .flip-cards-wrap { - grid-template-columns: 1fr; - } -} - -@media (min-width: 800px) { +@media (min-width: 900px) { .flip-cards-wrap { grid-template-columns: 1fr 1fr; } diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 0d5275b0..65392210 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -42,17 +42,18 @@ footer > div > div > div:first-child { footer > div > div > div:first-child > ul { padding-inline-start: 0; padding-inline-end: 50px; + min-width: calc(100% - 50px); } -@media(max-width: 600px) { +@media(min-width: 600px) { footer > div > div > div:first-child > ul { - min-width: calc(100% - 50px); + min-width: 40%; } } -@media(min-width: 600px) and (max-width: 900px) { +@media(min-width: 992px) { footer > div > div > div:first-child > ul { - min-width: 40%; + min-width: unset; } } @@ -118,7 +119,7 @@ footer > div > div > div:last-child { } } -@media (min-width: 992px) { +@media (min-width: 900px) { .campaign footer > div > div > div:first-child { order: 1; margin-inline-start: -10%; diff --git a/blocks/form/gdpr.css b/blocks/form/gdpr.css index c3152e06..8d85c836 100644 --- a/blocks/form/gdpr.css +++ b/blocks/form/gdpr.css @@ -62,7 +62,7 @@ } } -@media (min-width: 992px) { +@media (min-width: 900px) { .gdpr form { padding-inline: 10rem; width: var(--section-width); diff --git a/blocks/header/header.css b/blocks/header/header.css index 306bddf2..15b1614c 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -123,11 +123,12 @@ header nav .nav-sections { background-color: var(--overlay-color); flex: 1 1 auto; position: relative; + top: 10%; } -@media (max-width: 600px) { +@media (min-width: 600px) { header nav .nav-sections { - top:10%; + top: unset; } } @@ -181,13 +182,16 @@ header nav .nav-sections li span.icon.icon-chevron-right svg { padding-right: 1.5em; padding-bottom: 1em; background-color: var(--c-dark-plum); + position: fixed; + margin-top: -52em; + top: 58em; } -@media (max-width: 600px) { +@media (min-width: 600px) { .nav-search { - position: fixed; - margin-top: -52em; - top: 58em; + position: unset; + margin-top: unset; + top: unset; } } @@ -204,7 +208,7 @@ header nav[aria-expanded='true'] .nav-search { justify-content: center; } -@media (min-width: 992px) { +@media (min-width: 900px) { .nav-search { display: initial; padding-left: 0; @@ -370,7 +374,7 @@ header nav .nav-sections ul > li.nav-drop[aria-expanded='true'] > .nav-drop-ul-w } /* desktop nav styles */ -@media (min-width: 992px) { +@media (min-width: 900px) { body:has(header nav li.nav-drop[aria-expanded='true']) { overflow: hidden; } diff --git a/blocks/header/header.js b/blocks/header/header.js index ecdb9aa0..83ff12aa 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -1,7 +1,7 @@ import { decorateIcons, getMetadata, getLanguagePath } from '../../scripts/lib-franklin.js'; import { addChevronToButtons } from '../../scripts/scripts.js'; -const mobileBreakpoint = 992; +const mobileBreakpoint = 900; let globalWindowWidth = window.innerWidth; /** diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index a3b48589..b144dca3 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -122,7 +122,7 @@ body.blogpost main .hero p { color: var(--text-color); } -@media (min-width: 992px) { +@media (min-width: 900px) { main .hero a.button { width: unset; } diff --git a/blocks/job-openings/job-openings.css b/blocks/job-openings/job-openings.css index b7ff6502..3ce8aa72 100644 --- a/blocks/job-openings/job-openings.css +++ b/blocks/job-openings/job-openings.css @@ -14,7 +14,7 @@ main .section.job-openings-container .job-openings-wrapper { border: none; } -@media (min-width: 769px) { +@media (min-width: 900px) { .embed-job-openings { height: 2500px; } diff --git a/blocks/leader-profiles/leader-profiles-flyout.css b/blocks/leader-profiles/leader-profiles-flyout.css index f02715e4..e6de2d1f 100644 --- a/blocks/leader-profiles/leader-profiles-flyout.css +++ b/blocks/leader-profiles/leader-profiles-flyout.css @@ -89,7 +89,7 @@ cursor: pointer; } -@media screen and (min-width: 992px) { +@media (min-width: 900px) { .leader-profiles-flyout>div>* { max-width: 600px; } @@ -125,7 +125,7 @@ } } -@media screen and (min-width: 1360px) { +@media (min-width: 1200px) { .leader-profiles-flyout .icon-close { right: unset; left: 597px; diff --git a/blocks/leader-profiles/leader-profiles.css b/blocks/leader-profiles/leader-profiles.css index 706d68de..9572a51f 100644 --- a/blocks/leader-profiles/leader-profiles.css +++ b/blocks/leader-profiles/leader-profiles.css @@ -1,4 +1,4 @@ -.leader-profiles>ul { +.leader-profiles > ul { list-style: none; margin: 0; padding: 0; @@ -6,7 +6,7 @@ grid-template-columns: 1fr 1fr; } -.leader-profiles>ul>li { +.leader-profiles > ul > li { margin: 0 16px; padding: 16px 0; cursor: pointer; @@ -56,18 +56,22 @@ display: none; } -@media (max-width: 600px) { - .leader-profiles.ion>ul { - grid-template-columns: 1fr; - } +.leader-profiles.ion > ul { + grid-template-columns: 1fr; } -@media screen and (min-width: 992px) { - .leader-profiles>ul { +@media (min-width: 600px) { + .leader-profiles.ion > ul { + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 900px) { + .leader-profiles > ul { grid-template-columns: 1fr 1fr 1fr 1fr; } - .leader-profiles>ul>li { + .leader-profiles > ul > li { position: relative; } @@ -89,12 +93,7 @@ justify-content: flex-end; } - /* leader profile with 2 col */ - .leader-profiles.ion>ul { - grid-template-columns: 1fr 1fr; - } - - .leader-profiles.ion>ul>li { + .leader-profiles.ion > ul > li { padding: 0; } diff --git a/blocks/leader-profiles/leader-profiles.js b/blocks/leader-profiles/leader-profiles.js index ec3c7c90..521f6f9b 100644 --- a/blocks/leader-profiles/leader-profiles.js +++ b/blocks/leader-profiles/leader-profiles.js @@ -6,11 +6,11 @@ const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window function getImageWidth(block) { if (block.matches('.ion')) { - if (viewportWidth >= 992) { + if (viewportWidth >= 900) { return 600; // 4 columns } } - if (viewportWidth >= 992) { + if (viewportWidth >= 900) { return 292; // 4 columns } if (viewportWidth >= 600) { diff --git a/blocks/logos/logos.css b/blocks/logos/logos.css index fc60b997..96942121 100644 --- a/blocks/logos/logos.css +++ b/blocks/logos/logos.css @@ -28,7 +28,7 @@ width: 50%; } -@media (min-width: 992px) { +@media (min-width: 900px) { .slider-element { width: 16.6%;; } diff --git a/blocks/logos/logos.js b/blocks/logos/logos.js index ec60deaa..7557a432 100644 --- a/blocks/logos/logos.js +++ b/blocks/logos/logos.js @@ -287,7 +287,7 @@ export default function decorate(block) { elementsPerSlide: 2, responsiveWidth: 'fluid', }, - 992: { + 900: { elementsPerSlide: 6, responsiveWidth: 'static', }, diff --git a/blocks/multicolor-accordion/multicolor-accordion.css b/blocks/multicolor-accordion/multicolor-accordion.css index 1394f915..8eb368c9 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.css +++ b/blocks/multicolor-accordion/multicolor-accordion.css @@ -26,11 +26,11 @@ cursor: pointer; width: 100%; border: none; - padding: 23px 16px; + padding: 23px 7px; } .accordion-trigger div { - font-size: 34px; + font-size: 20px; color: var(--c-white); font-weight: 700; } @@ -53,6 +53,7 @@ font-size: 15px; border: 1px solid var(--c-light-teal); transition: background-color 0.5s, color 0.5s; + display: none; } .accordion-trigger .details-button { @@ -74,16 +75,16 @@ padding: 0 16px; } -@media (max-width: 600px) { +@media (min-width: 600px) { .accordion-trigger div { - font-size: 20px; + font-size: 34px; } .accordion-trigger .btn { - display: none; + display: unset; } .accordion-trigger { - padding: 23px 7px; + padding: 23px 16px; } } diff --git a/blocks/offices/offices.css b/blocks/offices/offices.css index f21a9b59..b0246223 100644 --- a/blocks/offices/offices.css +++ b/blocks/offices/offices.css @@ -51,7 +51,7 @@ } } -@media (min-width: 992px) { +@media (min-width: 900px) { .offices > div { flex-basis: 20%; } diff --git a/blocks/related-blogs/related-blogs.css b/blocks/related-blogs/related-blogs.css index 1e063125..42814a47 100644 --- a/blocks/related-blogs/related-blogs.css +++ b/blocks/related-blogs/related-blogs.css @@ -49,7 +49,7 @@ body.blogpost .related-blogs-container a.button.secondary:hover { border-color: #77bad7; } -@media (min-width: 992px) { +@media (min-width: 900px) { .related-blogs-container .related-list-item { width: 30%; } diff --git a/blocks/search-results/search-results.css b/blocks/search-results/search-results.css index 95ebafe0..667472d3 100644 --- a/blocks/search-results/search-results.css +++ b/blocks/search-results/search-results.css @@ -10,7 +10,7 @@ height: auto; } -@media (min-width: 992px) { +@media (min-width: 900px) { .search-results-content { padding: 0 5em; } diff --git a/blocks/social/social.css b/blocks/social/social.css index 13b1bdbc..982eca6b 100644 --- a/blocks/social/social.css +++ b/blocks/social/social.css @@ -81,13 +81,13 @@ --fg-color: var(--bg-text-social); } -@media screen and (min-width: 600px) { +@media (min-width: 600px) { .social>ul { grid-template-columns: 1fr 1fr 1fr; } } -@media screen and (min-width: 992px) { +@media (min-width: 900px) { .social>ul>li { padding: 0; } diff --git a/blocks/spinning-cards/spinning-cards.css b/blocks/spinning-cards/spinning-cards.css index 5cca9e16..eae9fbac 100644 --- a/blocks/spinning-cards/spinning-cards.css +++ b/blocks/spinning-cards/spinning-cards.css @@ -1,6 +1,6 @@ .spinning-cards-grid { display: grid; - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr; gap: 30px; margin: 0; padding: 0; @@ -10,7 +10,7 @@ height: 250px; perspective: 1000px; list-style: none; - margin-top: 20px; + margin-top: 35px; } .spinning-cards-inner { @@ -62,12 +62,12 @@ margin-top: -35px; } -@media (max-width: 768px) { +@media (min-width: 900px) { .spinning-cards-grid { - grid-template-columns: 1fr; + grid-template-columns: 1fr 1fr 1fr; } .spinning-cards-item { - margin-top: 35px; + margin-top: 20px; } } \ No newline at end of file diff --git a/blocks/testimonial/testimonial.css b/blocks/testimonial/testimonial.css index 5dc7d02b..3d802b1b 100644 --- a/blocks/testimonial/testimonial.css +++ b/blocks/testimonial/testimonial.css @@ -56,7 +56,7 @@ } -@media (min-width: 992px) { +@media (min-width: 900px) { .testimonial ul { flex-direction: row; } diff --git a/styles/styles.css b/styles/styles.css index a44fea43..68d90737 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -398,7 +398,7 @@ main .columns-wrapper img { width: auto; } -@media (min-width: 992px) { +@media (min-width: 900px) { :root { /* font sizes */ --heading-font-size-xxl: 60px; diff --git a/styles/two-columns.css b/styles/two-columns.css index e53e6a98..87920614 100644 --- a/styles/two-columns.css +++ b/styles/two-columns.css @@ -13,7 +13,7 @@ width: 100%; } -@media (min-width: 992px) { +@media (min-width: 900px) { :root { --first-ratio: 50%; --second-ratio: var(--first-ratio);