From 9af41fb19476933160037705bd7726ef12c134da Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Mon, 7 Aug 2023 10:49:59 +0200 Subject: [PATCH 1/7] #8 Add v2 hero block --- blocks/v2-hero/v2-hero.css | 82 ++++++++++++++++++++++++++++++++++++++ blocks/v2-hero/v2-hero.js | 31 ++++++++++++++ scripts/scripts.js | 5 +-- styles/styles.css | 45 ++++++++++++++++++--- 4 files changed, 155 insertions(+), 8 deletions(-) create mode 100644 blocks/v2-hero/v2-hero.css create mode 100644 blocks/v2-hero/v2-hero.js diff --git a/blocks/v2-hero/v2-hero.css b/blocks/v2-hero/v2-hero.css new file mode 100644 index 000000000..783893437 --- /dev/null +++ b/blocks/v2-hero/v2-hero.css @@ -0,0 +1,82 @@ +/* stylelint-disable selector-class-pattern */ +.v2-hero { + position: relative; + + /* height: 798px; */ + height: 588px; + overflow: hidden; +} + +.v2-hero__image { + position: absolute; + object-fit: cover; + height: 100%; + object-position: center; + width: 100%; +} + +.v2-hero__content-wrapper { + position: relative; + display: flex; + flex-direction: column; + height: 100%; + justify-content: flex-end; +} + +.v2-hero__content { + padding: 40px 16px; + display: flex; + flex-direction: column; + max-width: 1040px; +} + +.v2-hero__heading { + margin: 24px 0; + color: var(--c-primary-white); + font-family: var(--ff-headline-medium); + font-size: 28px; + font-style: normal; + line-height: 120%; + letter-spacing: -0.56px; + max-width: 600px; +} + +.v2-hero__cta-wrapper { + margin: 0; +} + +.v2-hero .v2-hero__cta:any-link { + margin: 0; + padding: 2px 20px 0; + height: 48px; + display: inline-flex; + align-items: center; + color: var(--c-primary-white); + text-align: center; + font-family: var(--ff-subheadings-medium); + font-size: 14px; + font-style: normal; + line-height: 18px; + letter-spacing: 1.12px; +} + +.v2-hero__separator { + margin: 0; + width: 43px; + height: 0; + border-top: 3px; + border-color: var(--c-accent-red); +} + +@media (min-width: 1200px) { + .v2-hero__content { + max-width: 1040px; + width: 1040px; + margin: 0 auto; + padding: 0 0 78px; + } + + .v2-hero__heading { + margin: 18px 0 41px; + } +} diff --git a/blocks/v2-hero/v2-hero.js b/blocks/v2-hero/v2-hero.js new file mode 100644 index 000000000..685598c0b --- /dev/null +++ b/blocks/v2-hero/v2-hero.js @@ -0,0 +1,31 @@ +export default async function decorate(block) { + const heroClass = 'v2-hero'; + const picture = block.querySelector('picture'); + const img = picture.querySelector('img'); + img.classList.add(`${heroClass}__image`); + + if (picture.parentElement.tagName === 'P') { + picture.parentElement.remove(); + } + + const contentWrapper = block.querySelector(':scope > div'); + contentWrapper.classList.add(`${heroClass}__content-wrapper`); + + const content = block.querySelector(':scope > div > div'); + content.classList.add(`${heroClass}__content`); + + const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6'); + [...headings].forEach((h) => h.classList.add(`${heroClass}__heading`)); + + const ctaButtons = content.querySelectorAll('.button-container > a'); + [...ctaButtons].forEach((b) => { + b.classList.add(`${heroClass}__cta`); + b.parentElement.classList.add(`${heroClass}__cta-wrapper`); + }); + + const hrs = block.querySelectorAll('hr'); + [...hrs].forEach((hr) => hr.classList.add(`${heroClass}__separator`)); + + block.prepend(picture); + block.parentElement.classList.add('full-width'); +} diff --git a/scripts/scripts.js b/scripts/scripts.js index eeefeef31..fdd3b5127 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -181,7 +181,7 @@ export function createElement(tagName, classes = [], props = {}) { function buildHeroBlock(main) { const header = main.querySelector('h1'); const picture = main.querySelector('picture'); - const heroBlock = main.querySelector('.hero'); + const heroBlock = main.querySelector('.hero, .v2-hero'); if (heroBlock) return; // eslint-disable-next-line no-bitwise if (header && picture @@ -627,7 +627,6 @@ allLinks.forEach((link) => { }); /* REDESING CLASS CHECK */ -if (document.querySelector('main').classList.contains('redesign-v2')) { +if (document.querySelector('meta[content="redesign-v2"]')) { document.querySelector('html').classList.add('redesign-v2'); - document.querySelector('main').classList.remove('redesign-v2'); } diff --git a/styles/styles.css b/styles/styles.css index 7e2f2a405..0d69c1652 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -13,7 +13,7 @@ :root { /* Primary colors */ - --c-primary-black: #000; + --c-primary-black: #000; --c-primary-white: #fff; --c-primary-gold: #b3976b; @@ -30,7 +30,7 @@ --c-tertiary-light-warm-gray: #f7f6f3; /* Accent colors */ - --c-accent-red: #cd1a0a; + --c-accent-red: #cd1a0a; --c-accent-copper: #8f654d; /* Applied colors */ @@ -52,7 +52,7 @@ /* Secondary */ --button-secondary-gold-enabled: var(--c-accent-copper); - --button-secondary-gold-hover: #d9b781; + --button-secondary-gold-hover: #d9b781; --button-secondary-gold-pressed: #a18860; --button-secondary-gold-disabled: #e1dfdd; @@ -795,6 +795,41 @@ main .section.responsive-title h1 { } /* REDESIGN GLOBAL STYLES */ -:root.redesign-v2 { +.redesign-v2 { + --v2-space-small: 16px; + font-size: 16px; -} \ No newline at end of file +} + +/* stylelint-disable-next-line no-descending-specificity */ +.redesign-v2 .section { + padding: 40px 0; +} + +/* stylelint-disable-next-line no-descending-specificity */ +.redesign-v2 .section > div { + padding: 0 var(--v2-space-small); + margin: 0 auto; +} + +.redesign-v2 .section > .full-width { + padding: 0; + margin: 0; + width: 100%; + max-width: 100%; +} + +.redesign-v2 main .section.padding-0 { + padding: 0; +} + +@media (min-width: 1040px) { + .redesign-v2 .section { + padding: 80px 0; + } + + .redesign-v2 .section > div { + padding: 0 200px; + margin: 0 auto; + } +} From fee75c3ab367775a7e812f57d3761eb5c4284d62 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 9 Aug 2023 16:26:40 +0200 Subject: [PATCH 2/7] #8 Refactor --- blocks/v2-hero/v2-hero.css | 16 +++++----------- blocks/v2-hero/v2-hero.js | 10 +++++----- styles/styles.css | 15 +++++++++++++++ 3 files changed, 25 insertions(+), 16 deletions(-) diff --git a/blocks/v2-hero/v2-hero.css b/blocks/v2-hero/v2-hero.css index 783893437..4f791f605 100644 --- a/blocks/v2-hero/v2-hero.css +++ b/blocks/v2-hero/v2-hero.css @@ -1,9 +1,7 @@ /* stylelint-disable selector-class-pattern */ .v2-hero { position: relative; - - /* height: 798px; */ - height: 588px; + height: 100vh; overflow: hidden; } @@ -58,14 +56,7 @@ font-style: normal; line-height: 18px; letter-spacing: 1.12px; -} - -.v2-hero__separator { - margin: 0; - width: 43px; - height: 0; - border-top: 3px; - border-color: var(--c-accent-red); + border-radius: 2px; } @media (min-width: 1200px) { @@ -78,5 +69,8 @@ .v2-hero__heading { margin: 18px 0 41px; + line-height: 1.15; + font-size: 45px; + letter-spacing: -0.9px; } } diff --git a/blocks/v2-hero/v2-hero.js b/blocks/v2-hero/v2-hero.js index 685598c0b..435a48416 100644 --- a/blocks/v2-hero/v2-hero.js +++ b/blocks/v2-hero/v2-hero.js @@ -14,8 +14,11 @@ export default async function decorate(block) { const content = block.querySelector(':scope > div > div'); content.classList.add(`${heroClass}__content`); - const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6'); - [...headings].forEach((h) => h.classList.add(`${heroClass}__heading`)); + const headings = [...content.querySelectorAll('h1, h2, h3, h4, h5, h6')]; + headings.forEach((h) => h.classList.add(`${heroClass}__heading`)); + + const firstHeading = headings[0]; + firstHeading.classList.add('with-marker'); const ctaButtons = content.querySelectorAll('.button-container > a'); [...ctaButtons].forEach((b) => { @@ -23,9 +26,6 @@ export default async function decorate(block) { b.parentElement.classList.add(`${heroClass}__cta-wrapper`); }); - const hrs = block.querySelectorAll('hr'); - [...hrs].forEach((hr) => hr.classList.add(`${heroClass}__separator`)); - block.prepend(picture); block.parentElement.classList.add('full-width'); } diff --git a/styles/styles.css b/styles/styles.css index 0d69c1652..a8fd597a4 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -823,6 +823,17 @@ main .section.responsive-title h1 { padding: 0; } +.redesign-v2 .with-marker::before { + content: ''; + margin: 0; + height: 0; + width: 42px; + border-bottom: 4px solid var(--c-accent-red); + display: block; + position: relative; + top: -18px; +} + @media (min-width: 1040px) { .redesign-v2 .section { padding: 80px 0; @@ -832,4 +843,8 @@ main .section.responsive-title h1 { padding: 0 200px; margin: 0 auto; } + + .redesign-v2 .with-marker::before { + width: 65px; + } } From ecc0f9b6f78a5852aedc504e355aec2dd344dedd Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 9 Aug 2023 16:30:35 +0200 Subject: [PATCH 3/7] #8 Change the hero block height --- blocks/v2-hero/v2-hero.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/v2-hero/v2-hero.css b/blocks/v2-hero/v2-hero.css index 4f791f605..382680494 100644 --- a/blocks/v2-hero/v2-hero.css +++ b/blocks/v2-hero/v2-hero.css @@ -1,7 +1,7 @@ /* stylelint-disable selector-class-pattern */ .v2-hero { position: relative; - height: 100vh; + height: calc(100vh - var(--nav-height)); overflow: hidden; } From 39bc9a14c763a82b0f5fcf43b5cfcb31f5f1911b Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 9 Aug 2023 17:42:38 +0200 Subject: [PATCH 4/7] #8 Change marker width on mobile and tablet --- styles/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index a8fd597a4..14c341046 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -827,7 +827,7 @@ main .section.responsive-title h1 { content: ''; margin: 0; height: 0; - width: 42px; + width: 45px; border-bottom: 4px solid var(--c-accent-red); display: block; position: relative; From dc66576150432fcbc198851625b55bbeb9d76d2f Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 9 Aug 2023 17:51:56 +0200 Subject: [PATCH 5/7] #8 Fix CLS issue for hero block --- blocks/v2-hero/v2-hero.css | 2 +- styles/styles.css | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/blocks/v2-hero/v2-hero.css b/blocks/v2-hero/v2-hero.css index 382680494..87014f5ae 100644 --- a/blocks/v2-hero/v2-hero.css +++ b/blocks/v2-hero/v2-hero.css @@ -1,7 +1,7 @@ /* stylelint-disable selector-class-pattern */ .v2-hero { + /* height of the hero block is set in main style to prevent CLS */ position: relative; - height: calc(100vh - var(--nav-height)); overflow: hidden; } diff --git a/styles/styles.css b/styles/styles.css index 14c341046..31a1f9691 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -848,3 +848,8 @@ main .section.responsive-title h1 { width: 65px; } } + +/* CLS OPTIMIZATION */ +.v2-hero { + height: calc(100vh - var(--nav-height)); +} From cdeee37ab746d972e8b603da037fa38fffe61a15 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 10 Aug 2023 08:59:14 +0200 Subject: [PATCH 6/7] #8 Moving the heading height definition to global styles --- blocks/header/header.css | 7 +------ styles/styles.css | 7 +++++++ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 1721bd0b0..51ac0e30a 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -3,7 +3,6 @@ --nav-font-size-m: 16px; --nav-font-size-s: 14px; --nav-font-size-xs: 12px; - --nav-height: var(--nav-height-m); --nav-width: 1376px; --nav-ff: var(--ff-body-bold); } @@ -317,10 +316,6 @@ header .studio-search-widget { @media (min-width: 1140px) { /* header and nav layout */ - :root { - --nav-height: var(--nav-height-l); - } - header nav { display: flex; justify-content: space-between; @@ -475,4 +470,4 @@ header .studio-search-widget { .autosuggest-results-item-highlighted { background-color: #f2f2f2 !important; -} \ No newline at end of file +} diff --git a/styles/styles.css b/styles/styles.css index 31a1f9691..e712a223f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -179,6 +179,13 @@ /* nav sizes */ --nav-height-m: 60px; --nav-height-l: 85px; + --nav-height: var(--nav-height-m); +} + +@media (min-width: 1140px) { + :root { + --nav-height: var(--nav-height-l); + } } *, From 82c7c84ac45bc3db0769003f0d19be535d7cce73 Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 10 Aug 2023 13:12:34 +0200 Subject: [PATCH 7/7] #8 Refactor --- scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index fdd3b5127..082ce419f 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -627,6 +627,6 @@ allLinks.forEach((link) => { }); /* REDESING CLASS CHECK */ -if (document.querySelector('meta[content="redesign-v2"]')) { +if (getMetadata('style') === 'redesign-v2') { document.querySelector('html').classList.add('redesign-v2'); }