Merge pull request #17 from Netcentric/16-ui-updates

Updates breakpoints and spaces
Netcentric · Dec 9, 2024 · 36a9cf8 · 36a9cf8
2 parents d77c934 + cfcdc34
commit 36a9cf8
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 63 deletions.
diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
@@ -19,7 +19,7 @@
   display: block;
 }
 
-@media (min-width: 900px) {
+@media (min-width: 768px) {
   .columns > div {
     align-items: center;
     flex-direction: unset;

diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -6,16 +6,11 @@ footer {
 
 footer .footer > div {
   margin: auto;
-  max-width: 1200px;
-  padding: 40px 24px 24px;
+  max-width: var(--content-max-width);
+  padding-block: 40px;
+  padding-inline: var(--content-padding-inline);
 }
 
 footer .footer p {
   margin: 0;
 }
-
-@media (min-width: 900px) {
-  footer .footer > div {
-    padding: 40px 32px 24px;
-  }
-}
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -7,17 +7,16 @@ header .nav-wrapper {
 }
 
 header nav {
-  box-sizing: border-box;
   display: grid;
   grid-template:
     'hamburger brand tools' var(--nav-height)
     'sections sections sections' 1fr / auto 1fr auto;
   align-items: center;
   gap: 0 24px;
   margin: auto;
-  max-width: 1248px;
+  max-width: var(--content-max-width);
   height: var(--nav-height);
-  padding: 0 24px;
+  padding-inline: var(--content-padding-inline);
   font-family: var(--body-font-family);
 }
 
@@ -30,13 +29,11 @@ header nav[aria-expanded='true'] {
   min-height: 100dvh;
 }
 
-@media (min-width: 900px) {
+@media (min-width: 1280px) {
   header nav {
     display: flex;
     justify-content: space-between;
     gap: 0 32px;
-    max-width: 1264px;
-    padding: 0 32px;
   }
 
   header nav[aria-expanded='true'] {
@@ -128,7 +125,7 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after {
   transform: rotate(-45deg);
 }
 
-@media (min-width: 900px) {
+@media (min-width: 1280px) {
   header nav .nav-hamburger {
     display: none;
     visibility: hidden;
@@ -182,7 +179,7 @@ header nav .nav-sections ul > li > ul > li {
   font-weight: 400;
 }
 
-@media (min-width: 900px) {
+@media (min-width: 1280px) {
   header nav .nav-sections {
     display: block;
     visibility: visible;

diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -1,8 +1,8 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
-// media query match that indicates mobile/tablet width
-const isDesktop = window.matchMedia('(min-width: 900px)');
+// media query match that indicates desktop width
+const isDesktop = window.matchMedia('(min-width: 1280px)');
 
 function closeOnEscape(e) {
   if (e.code === 'Escape') {

diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -5,12 +5,13 @@
 
 .hero {
   position: relative;
-  padding: 40px 24px;
+  padding-block: 40px;
+  padding-inline: var(--content-padding-inline);
   min-height: 300px;
 }
 
 .hero h1 {
-  max-width: 1200px;
+  max-width: var(--content-max-width);
   margin-left: auto;
   margin-right: auto;
   color: var(--background-color);
@@ -29,9 +30,3 @@
   width: 100%;
   height: 100%;
 }
-
-@media (min-width: 900px) {
-  .hero {
-    padding: 40px 32px;
-  }
-}
diff --git a/styles/styles.css b/styles/styles.css
@@ -12,14 +12,10 @@
 
 :root {
   /* Breakpoints */
-  --b-print: 'only print';
-
+
   /* 
-  xs: 400px;
-  sm: 768px;
-  md: 1024px;
-  lg: 1280px;
-  xl: 1440px;
+  sm: 768px
+  lg: 1280px
   */
 
   /* fonts */
@@ -59,27 +55,20 @@
     --hl18-font-size: 40px;
     --hl21-font-size: 20px;
   }
-
-  @media (min-width: 1024px) {
-    --hl19-font-size: 32px;
-    --txt201-font-size: 14px;
-  }
-
+
   @media (min-width: 1280px) {
+    --hl19-font-size: 32px;
     --hl20-font-size: 24px;
     --hl20-line-height: 150%;
     --hl22-font-size: 18px;
     --hl22-line-height: 161%;
     --txt150-font-size: 16px;
     --txt150-line-height: 112%;
+    --txt201-font-size: 17px;
     --txt204-font-size: 16px;
     --txt204-line-height: 150%;
   }
 
-  @media (min-width: 1440px) {
-    --txt201-font-size: 17px;
-  }
-
   /* nav height */
   --nav-height: 64px;
 
@@ -106,13 +95,16 @@
   --col-neutral90: #1C1C1C;
 
   /* Spacing */
-  --grid-max-width: 1290px;
-  --grid-container-width-xs: 20px;
-  --grid-container-width-sm: 42px;
-  --grid-container-width-xl: 75px;
-  --spacing-component-main-xs: 20px;
-  --spacing-component-main-sm: 32px;
-  --spacing-component-main-xl: 40px;
+  --content-max-width: 1290px;
+  --content-padding-inline: 20px;
+
+  @media (min-width: 768px) {
+    --content-padding-inline: 42px;
+  }
+
+  @media (min-width: 1280px) {
+    --content-padding-inline: 75px;
+  }
 
   /* Shadows */
   --box-shadow: 0 1px 2px 0 rgba(var(--col-neutral50), 0.34), 0 0 13px 0 var(var(--col-neutral10));
@@ -405,9 +397,9 @@ main {
     }
 
     & > div {
-      max-width: 1200px;
+      max-width: var(--content-max-width);
       margin: auto;
-      padding: 0 24px;
+      padding-inline: var(--content-padding-inline);
     }
 
     /* section metadata */
@@ -418,14 +410,4 @@ main {
       padding: 40px 0;
     }
   }
-}
-
-@media (min-width: 900px) {
-  main {
-    & > .section {
-      & > div {
-        padding: 0 32px;
-      }
-    }
-  }
 }