Merge pull request #403 from Netcentric/streamline-breakpoints

streamline viewport breakpoints according to best practises
Netcentric · Dec 14, 2023 · 3256239 · 3256239
2 parents f7d2eac + c3a2d48
commit 3256239
Show file tree

Hide file tree

Showing 29 changed files with 85 additions and 110 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,12 +1,12 @@
-.leader-profiles>ul {
+.leader-profiles > ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   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;
   }