Sort out screen breakpoints

clarin-eric · Jan 20, 2024 · b2452b1 · b2452b1
1 parent d447f87
commit b2452b1
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 31 deletions.
diff --git a/scss/modules/basicpage.scss b/scss/modules/basicpage.scss
@@ -140,7 +140,7 @@
       max-width: 320px;
     }
 
-    @media (min-width: #{$screen-lg-desktop}) {
+    @media (min-width: #{$screen-lg}) {
       max-width: 390px;
     }
   }
@@ -180,7 +180,7 @@
       max-width: 320px;
     }
 
-    @media (min-width: #{$screen-lg-desktop}) {
+    @media (min-width: #{$screen-lg}) {
       max-width: 390px;
     }
   }

diff --git a/scss/modules/impactstories.scss b/scss/modules/impactstories.scss
@@ -20,7 +20,7 @@
     }
   }
 
-  @media (max-width: #{$screen-sr-max}) {
+  @media (max-width: #{$screen-sm-max}) {
     .content {
       margin-left: 50px;
     }

diff --git a/scss/modules/navbar.scss b/scss/modules/navbar.scss
@@ -232,7 +232,7 @@
       }
     }
 
-    @media (min-width: #{$screen-lg-desktop}) {
+    @media (min-width: #{$screen-lg}) {
       li {
         padding: 0 8px;
 
@@ -280,7 +280,7 @@
       max-width: 135px;
     }
 
-    @media (min-width: #{$screen-lg-desktop}) {
+    @media (min-width: #{$screen-lg}) {
       max-width: 153px;
     }
   }

diff --git a/scss/modules/paragraphs.scss b/scss/modules/paragraphs.scss
@@ -261,13 +261,13 @@
   padding-top: 45px;
   position: relative;
 
-  @media (max-width: #{$screen-sr-max}) {
+  @media (max-width: #{$screen-sm-max}) {
     .contextual-region {
       position: unset;
     }
   }
 
-  @media (min-width: #{$screen-sr-min}) {
+  @media (min-width: #{$screen-sm}) {
     align-items: center;
     display: flex;
     font-size: 23px;
@@ -284,7 +284,7 @@
     line-height: 1.12;
     margin-bottom: 20px;
 
-    @media (min-width: #{$screen-sr-min}) {
+    @media (min-width: #{$screen-sm}) {
       font-size: 68px;
       margin-bottom: 35px;
     }

diff --git a/scss/utility/elements.scss b/scss/utility/elements.scss
@@ -75,12 +75,16 @@ h6 {
 
 .container, .container-sm,
 .container-md, .container-lg,
-.container-xl, {
+.container-xl, .container-xxl {
   padding: 0 calc(var(--bs-gutter-x) * 5);
 
     @media (max-width: #{$screen-md-max}) {
       padding: 0 calc(var(--bs-gutter-x) * .5);
-  }
+    }
+
+    @media (max-width: #{$screen-xl-max}) {
+      padding: 0 calc(var(--bs-gutter-x) * 2);
+    }
 }
 
 .row {

diff --git a/scss/utility/variables.scss b/scss/utility/variables.scss
@@ -63,44 +63,40 @@ $input-height: 1rem;
 // Media queries breakpoints
 // --------------------------------------------------
 
-// Extra small screen / phone
-// Note: Deprecated $screen-xs and $screen-phone as of v3.0.1
+// Smaller screen / phablet
 $screen-xs: 480px;
 $screen-xs-min: $screen-xs;
 $screen-phone: $screen-xs-min;
-$phone: 480px;
-
-// Smaller screen / phablet
-$screen-sr: 576px;
-$screen-sr-min: $screen-sr;
-$screen-phablet: $screen-sr-min;
-$phone: 576px;
+$screen-phablet: $screen-xs;
+$phone: $screen-xs;
 
 // Small screen / tablet
 // Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
-$screen-sm: 768px;
+$screen-sm: 576px;
 $screen-sm-min: $screen-sm;
 $screen-tablet: $screen-sm-min;
-$tablet: 768px;
+$tablet: $screen-sm;
 
 // Medium screen / desktop
 // Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
-$screen-md: 992px;
+$screen-md: 768px;
 $screen-md-min: $screen-md;
 $screen-desktop: $screen-md-min;
-$desktop: 992px;
+$desktop: $screen-md;
 
-// Large screen / wide desktop
+// Large screens / wide desktop
 // Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
-$screen-lg: 1200px;
+$screen-lg: 992px;
 $screen-lg-min: $screen-lg;
-$screen-lg-desktop: $screen-lg-min;
-$desktop-large: 1200px;
-$screen-xl: 1500px;
-$screen-xl-custom: 1440px;
+$screen-xl: 1200px;
+$screen-xl-min: $screen-xl;
+$screen-xxl: 1400px;
+$screen-xxl-min: $screen-xxl;
 
 // So media queries don't overlap when required, provide a maximum
-$screen-xs-max: ($screen-sr-min - 1);
-$screen-sr-max: ($screen-sm-min - 1);
+$screen-xxs-max: ($screen-xs-min - 1);
+$screen-xs-max: ($screen-sm-min - 1);
 $screen-sm-max: ($screen-md-min - 1);
 $screen-md-max: ($screen-lg-min - 1);
+$screen-lg-max: ($screen-xl-min - 1);
+$screen-xl-max: ($screen-xxl-min - 1);