diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 0d1ff3f..81a5665 100644 --- 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 index 7df90ad..5557b76 100644 --- 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 index e250f52..e30001d 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -7,7 +7,6 @@ header .nav-wrapper { } header nav { - box-sizing: border-box; display: grid; grid-template: 'hamburger brand tools' var(--nav-height) @@ -15,9 +14,9 @@ header nav { 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 index cb2157c..e955fce 100644 --- 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 index 79518ba..caed6ad 100644 --- 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; - } -} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index f017f0c..4355690 100644 --- 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; - } - } - } } \ No newline at end of file