From e58179ae4c34d98df1bf0c46a315be5c76030548 Mon Sep 17 00:00:00 2001 From: Anian Weber Date: Thu, 14 Sep 2023 10:28:10 +0200 Subject: [PATCH 01/22] Update pull_request_template.md --- .github/pull_request_template.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 3ee19a6..eea90c0 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -4,5 +4,5 @@ Fix # Test URLs: -- before: https://main--spin-landingpage--spin-dx-lab.hlx.page/ -- after: https://--spin-landingpage--spin-dx-lab.hlx.page/ +- before: https://main--franklin-spin-landingpage--techdivision.hlx.page/ +- after: https://--franklin-spin-landingpage--techdivision.hlx.page/ From 4630397bad032e77bb84420a78a6fa7fef2a0e58 Mon Sep 17 00:00:00 2001 From: Anian Weber Date: Thu, 14 Sep 2023 10:28:24 +0200 Subject: [PATCH 02/22] Update pull_request_template.md --- .github/pull_request_template.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index eea90c0..4f65a56 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,8 +1,3 @@ -Please always provide the [GitHub issue(s)](../issues) your PR is for, as well as test URLs where your change can be observed (before and after): - -Fix # - Test URLs: - - before: https://main--franklin-spin-landingpage--techdivision.hlx.page/ - after: https://--franklin-spin-landingpage--techdivision.hlx.page/ From 9c4560f7b7343df794a94efecb0760fcb9378477 Mon Sep 17 00:00:00 2001 From: Anian Weber Date: Thu, 2 Nov 2023 16:37:05 +0100 Subject: [PATCH 03/22] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1c05f01..218124d 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # SPIN DX ## Environments -- Preview: https://main--franklin-spin-landingpage--techdivision.hlx.page/ -- Live: https://main--franklin-spin-landingpage--techdivision.hlx.live/ +- Preview: https://main--eds-spin-landingpage--techdivision.hlx.page/ +- Live: https://main--eds-spin-landingpage--techdivision.hlx.live/ ## Installation From 41addb784cff6489ccd368be05bb697a37f0f231 Mon Sep 17 00:00:00 2001 From: Anian Weber Date: Thu, 2 Nov 2023 16:38:45 +0100 Subject: [PATCH 04/22] Update pull_request_template.md --- .github/pull_request_template.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 4f65a56..115e067 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,3 +1,3 @@ Test URLs: -- before: https://main--franklin-spin-landingpage--techdivision.hlx.page/ -- after: https://--franklin-spin-landingpage--techdivision.hlx.page/ +- before: https://main--eds-spin-landingpage--techdivision.hlx.page/ +- after: https://--eds-spin-landingpage--techdivision.hlx.page/ From d3a3c81e81f1293c8359a0c98428651bad069bdb Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 10:12:38 +0200 Subject: [PATCH 05/22] SPIN-146 // Fixed font sizes and scalling in quotes element. --- blocks/quotes/quotes.css | 40 ++++++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/blocks/quotes/quotes.css b/blocks/quotes/quotes.css index 11ae456..99bab9a 100644 --- a/blocks/quotes/quotes.css +++ b/blocks/quotes/quotes.css @@ -7,31 +7,29 @@ margin-top: 54px; } +.quotes > div > div::before { + content: "\201C"; + position: absolute; + top: 5%; + text-align: center; + font-size: 30vw; +} + .quotes > div > div { position: relative; aspect-ratio: 1/1; border-radius: 50%; - background: green; display: flex; align-items: center; + justify-content: center; text-align: center; - padding: 1.5vw; + padding: 10%; color: white; - font-size: 30px; + font-size: 5vw; line-height: 1.25; overflow: hidden; } -.quotes > div > div::before { - content: "\201C"; - position: absolute; - top: 5%; - left: 0; - right: 0; - text-align: center; - font-size: 100px; -} - /* every 1/4 quote */ .quotes > div:nth-child(4n+1) > div { background: linear-gradient(217.15deg, #CE2726 13.22%, #FF8C05 102.78%); @@ -53,23 +51,29 @@ } @media (min-width: 600px) { + .quotes { + grid-template-columns: repeat(2, 1fr); + } + .quotes > div > div { font-size: 3vw; - padding: 2.5vw; } - .quotes { - grid-template-columns: repeat(2, 1fr); + .quotes > div > div::before { + font-size: 15vw; } } @media (min-width: 1400px) { .quotes > div > div { - font-size: 1.5vw; - padding: 1.5vw; + font-size: 20px; } .quotes { grid-template-columns: repeat(4, 1fr); } + + .quotes > div > div::before { + font-size: 100px; + } } From ac07bb97fb13b549e02d5832d6c2f87360917e51 Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 10:40:56 +0200 Subject: [PATCH 06/22] SPIN-126 // Fixed footer styling issues --- blocks/footer/footer.css | 4 ++++ styles/styles.css | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 7b1bc1e..e4dae96 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,4 +1,8 @@ footer { + position: fixed; + left: 0; + right: 0; + bottom: 0; padding: 2rem; background-color: var(--background-color-reverse); color: #fff; diff --git a/styles/styles.css b/styles/styles.css index 3efba64..c5e7111 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -53,6 +53,9 @@ /* nav height */ --nav-height: 146px; + /* footer height */ + --footer-height: 250px; + /* content width */ --content-width: 1200px; --section-padding: max(calc(50vw - (var(--content-width) / 2)), 32px); @@ -182,6 +185,9 @@ a.button.secondary, button.secondary { color: var(--text-color) } +main { + margin-bottom: var(--footer-height); +} main input { font-size: 1.25rem; From 5402b585a1d6fe8f8a173ac041b960d69b0a933a Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 10:52:40 +0200 Subject: [PATCH 07/22] SPIN-126 // Fixed size issue with quotes. --- blocks/quotes/quotes.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/quotes/quotes.css b/blocks/quotes/quotes.css index a1771ee..123bfb8 100644 --- a/blocks/quotes/quotes.css +++ b/blocks/quotes/quotes.css @@ -30,9 +30,9 @@ .quotes > div > div { text-align: center; - font-size: 22px; + font-size: 15px; font-weight: 800; - line-height: 28px; + line-height: 20px; } .quotes > div:nth-child(3n+1) { @@ -44,7 +44,7 @@ } .quotes > div > div:last-child { - padding-top: 30px; + padding-top: 15px; font-size: 14px; font-weight: 400; } From 1ec4c10068cd0adb36e339169d72aee63d201413 Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 11:12:09 +0200 Subject: [PATCH 08/22] SPIN-126 // Fixed footer positioning. --- blocks/footer/footer.css | 6 +++++- styles/styles.css | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 9d39912..546bfbf 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,8 +1,12 @@ footer { + position: fixed; + bottom: 0; + left: 0; + right: 0; height: var(--footer-height); padding: var(--footer-padding-horizontal) var(--footer-padding-vertical); - background-color: var(--footer-background-color); font-size: var(--body-font-size-xs); + background-color: var(--footer-background-color); } footer .block { diff --git a/styles/styles.css b/styles/styles.css index 6c0d27c..00ffeca 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -157,6 +157,7 @@ header .logo { main { overflow-x: hidden; + margin-bottom: var(--footer-height); } @supports (overflow-x: clip) { From a58074bddcdb6c4e20181396a70724bc9876a3ac Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 11:21:46 +0200 Subject: [PATCH 09/22] SPIN-146 // Fixed aspect ratio of ready-to-fly img. --- blocks/form/form.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/form/form.css b/blocks/form/form.css index 1d94dac..dd2eebd 100644 --- a/blocks/form/form.css +++ b/blocks/form/form.css @@ -28,12 +28,12 @@ .section-ready-to-fly .columns img { --image-size: 300px; - display: block; max-width: var(--image-size); aspect-ratio: 1/1; border-radius: 500px; position: relative; + object-fit: cover; } .section-ready-to-fly .columns > div > div:first-child h3, From a68119c3a38e30a03524efdec1402a4eada792ea Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 12:03:31 +0200 Subject: [PATCH 10/22] SPIN-146 // Fixed planet-to-background animation. --- blocks/footer/footer.css | 4 ---- styles/styles.css | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 546bfbf..3dc1be5 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,8 +1,4 @@ footer { - position: fixed; - bottom: 0; - left: 0; - right: 0; height: var(--footer-height); padding: var(--footer-padding-horizontal) var(--footer-padding-vertical); font-size: var(--body-font-size-xs); diff --git a/styles/styles.css b/styles/styles.css index 00ffeca..5f7d42f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -157,7 +157,6 @@ header .logo { main { overflow-x: hidden; - margin-bottom: var(--footer-height); } @supports (overflow-x: clip) { @@ -547,6 +546,7 @@ main .section.hero .icon-logo-adobe-techdivision { 100% { transform: translateX(-50%) scale(50); border-radius: 10px; + display: none; } } From 7c0ab92d34580bca5387ee27b332c7857757bfe0 Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 12:59:12 +0200 Subject: [PATCH 11/22] SPIN-146 // Fixed layout-shift in language navigation. --- blocks/header/header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index f17abb2..496d83c 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -28,7 +28,7 @@ header nav ul { } header nav ul .language-navigation { - width: fit-content; + width: 100px; max-height: 10px; } From ab3f3a12e7dc6e607052712f336c0f3ea3876f1b Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 13:49:26 +0200 Subject: [PATCH 12/22] SPIN-146 // Fixed language navigation color in mobile menu --- blocks/header/header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 496d83c..33c7e18 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -211,7 +211,7 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after { margin: var(--nav-list-margin); } - header nav li a:any-link { + .language-navigation-wrapper a:any-link { color: var(--color-purple); } } From ebb894e3dd39dd46efbb7c5049a5df28932feeb9 Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 13:57:32 +0200 Subject: [PATCH 13/22] SPIN-146 // Changed font-size for quotations back and increased instead the size of the bubbles --- blocks/quotes/quotes.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/blocks/quotes/quotes.css b/blocks/quotes/quotes.css index 123bfb8..3f066ad 100644 --- a/blocks/quotes/quotes.css +++ b/blocks/quotes/quotes.css @@ -12,7 +12,7 @@ aspect-ratio: 1/1; border-radius: 500px; background: linear-gradient(135deg, #CE2726 28.77%, #F5760D 75.11%); - height: 322px; + height: 381px; display: flex; flex-direction: column; justify-content: space-between; @@ -30,9 +30,9 @@ .quotes > div > div { text-align: center; - font-size: 15px; + font-size: 22px; font-weight: 800; - line-height: 20px; + line-height: 28px; } .quotes > div:nth-child(3n+1) { @@ -44,7 +44,7 @@ } .quotes > div > div:last-child { - padding-top: 15px; + padding-top: 30px; font-size: 14px; font-weight: 400; } @@ -52,6 +52,5 @@ @media (max-width: 899px) { .quotes > div { padding: 50px; - height: 300px; } } From b83583a6d3b82b442276c94be106494dc3d83252 Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 15:37:18 +0200 Subject: [PATCH 14/22] SPIN-146 // Fixed language navigation and header styling. --- blocks/header/header.css | 192 +++++++++++++++++++++------------------ blocks/header/header.js | 11 ++- 2 files changed, 110 insertions(+), 93 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 33c7e18..ef4e049 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -1,4 +1,3 @@ - header{ padding: 20px; position: relative; @@ -7,8 +6,6 @@ header{ align-items: center; } - - header .block { display: flex; justify-content: space-between; @@ -21,92 +18,49 @@ header .icon-logo-white svg { margin: 0; } -header nav ul { - padding-left: 0; +/* navigation */ +.nav__list { + list-style: none; display: flex; + gap: var(--nav-list-margin); z-index: 1; } -header nav ul .language-navigation { - width: 100px; - max-height: 10px; -} - -header nav ul li .language-navigation-wrapper { - display: flex; - flex-direction: column; - transform: translateY(-15px); -} - -header nav ul li .language-navigation-button { - text-transform: uppercase; +.nav__list-item { display: flex; - padding: 15px 25px; - min-width: 40px; -} - -header nav ul li .language-navigation-symbol { - position: relative; - top: 8px; - left: 10px; -} - -header nav ul .language-navigation-item { - display: none; - padding: 15px 25px; - min-width: 40px; -} - -header nav ul .language-navigation-wrapper:hover .language-navigation-item{ - display: block; -} - -header nav ul .current-language { - font-weight: bolder; - pointer-events: none; + align-items: center; } -header nav ul .current-language::before { - content: '> '; +.nav__list-item a { + color: var(--text-color); + padding: 10px 25px; } -@media (max-width: 899px) { - header nav ul li .language-navigation-wrapper { +@media (max-width: 899px){ + .nav__list{ + transition: transform .3s ease-in-out; display: flex; + position: fixed; + top: var(--nav-height); + bottom: 0; + left: 0; + right: 0; + transform: translateX(100%); + background-color: var(--background-color-reverse); + flex-direction: column; + margin: 0; + padding: 40px; } - header nav ul li .language-navigation-symbol { - filter: none; - display: none; - } - - header nav ul li .language-navigation-item { - filter: none; - display: block; - padding-left: 0; + header nav[aria-expanded="true"] ul { + transform: translateX(0); } - header nav ul li .language-navigation-button { - filter: none; - display: none; + .nav__list-item a { + color: var(--button-color);; } } -header nav li { - margin: 0 var(--nav-list-margin); - list-style: none; - padding: 0; - color: var(--text-color); -} - -header nav li a:any-link { - color: var(--text-color); -} - -header nav li:nth-last-child(2) a { - display: inline; -} - /* hamburger */ header nav .nav-hamburger { grid-area: hamburger; @@ -188,30 +142,90 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after { } } -@media (max-width: 899px){ - header nav ul{ - transition: transform .3s ease-in-out; +/* ==================== language navigation */ +.language-navigation { + position: relative; + text-transform: uppercase; + display: flex; + justify-content: center; + align-items: center; +} + +/* button */ +.language-navigation-button { + padding: 15px 25px; + min-width: 40px; + display: flex; + align-items: center; + gap: 12px; +} + +/* selection */ +.language-navigation-selection { + display: none; + flex-direction: column; + position: absolute; + top: 100%; + right: 18px; +} + +.language-navigation:hover .language-navigation-selection{ + display: flex; +} + +.language-navigation-separator { + display: none; + opacity: 0.8; + color: var(--text-color); +} + +.language-navigation-item { + min-width: 40px; + padding: 15px 25px; + text-align: center; + opacity: 0.8; +} + +.language-navigation-item:any-link { + color: var(--text-color); +} + +.current-language { + display: none; +} + +@media (max-width: 899px) { + .language-navigation { + height: fit-content; + } + + /* selection */ + .language-navigation-selection { display: flex; - position: fixed; - top: var(--nav-height); - bottom: 0; + flex-direction: row; left: 0; - right: 0; - transform: translateX(100%); - background-color: var(--background-color-reverse); - flex-direction: column; - margin: 0; } - header nav[aria-expanded="true"] ul { - transform: translateX(0); + .language-navigation-separator, + .language-navigation-item:any-link { + color: var(--button-color);; + } + + .language-navigation-separator { + margin: 5px; + align-items: center; + display: flex; } - header nav li { - margin: var(--nav-list-margin); + .current-language { + display: block; + font-weight: bolder; + pointer-events: none; + opacity: 1; } - .language-navigation-wrapper a:any-link { - color: var(--color-purple); + /* button */ + .language-navigation-button { + display: none; } } diff --git a/blocks/header/header.js b/blocks/header/header.js index 04b0328..df194ba 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -80,10 +80,11 @@ function buildLanguageNavigation() { + ''; languageNavigation.classList.add('language-navigation'); languageNavigation.innerHTML = ` -
-
${getCurrentLanguage()} ${svgChevron}
- DE - EN +
${getCurrentLanguage()} ${svgChevron}
+
+ DE +

/

+ EN
`; return languageNavigation; @@ -92,12 +93,14 @@ function buildLanguageNavigation() { function buildNavigationWithNavigationItems() { const navNode = document.createElement('nav'); const ulNode = document.createElement('ul'); + ulNode.classList.add('nav__list'); const navigationItems = getOnPageNavigationItems(); navigationItems.forEach((item) => { const liNode = document.createElement('li'); const aNode = document.createElement('a'); aNode.href = `#${toSlug(item)}`; aNode.textContent = item; + liNode.classList.add('nav__list-item'); liNode.appendChild(aNode); aNode.addEventListener('click', () => (!MQ.matches ? toggleMenu(navNode, false) : null)); ulNode.appendChild(liNode); From 6ab8f5df05046fabe9013ae2b17b05a88ba90bed Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 9 Sep 2024 15:56:34 +0200 Subject: [PATCH 15/22] SPIN-146 // Fixed naming of header classes. --- blocks/header/header.css | 10 +++++----- blocks/header/header.js | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index ef4e049..fa004d7 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -19,25 +19,25 @@ header .icon-logo-white svg { } /* navigation */ -.nav__list { +.nav-list { list-style: none; display: flex; gap: var(--nav-list-margin); z-index: 1; } -.nav__list-item { +.nav-list-item { display: flex; align-items: center; } -.nav__list-item a { +.nav-list-item a { color: var(--text-color); padding: 10px 25px; } @media (max-width: 899px){ - .nav__list{ + .nav-list{ transition: transform .3s ease-in-out; display: flex; position: fixed; @@ -56,7 +56,7 @@ header .icon-logo-white svg { transform: translateX(0); } - .nav__list-item a { + .nav-list-item a { color: var(--button-color);; } } diff --git a/blocks/header/header.js b/blocks/header/header.js index df194ba..929450c 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -93,14 +93,14 @@ function buildLanguageNavigation() { function buildNavigationWithNavigationItems() { const navNode = document.createElement('nav'); const ulNode = document.createElement('ul'); - ulNode.classList.add('nav__list'); + ulNode.classList.add('nav-list'); const navigationItems = getOnPageNavigationItems(); navigationItems.forEach((item) => { const liNode = document.createElement('li'); const aNode = document.createElement('a'); aNode.href = `#${toSlug(item)}`; aNode.textContent = item; - liNode.classList.add('nav__list-item'); + liNode.classList.add('nav-list-item'); liNode.appendChild(aNode); aNode.addEventListener('click', () => (!MQ.matches ? toggleMenu(navNode, false) : null)); ulNode.appendChild(liNode); From f765d481db970f766c82cae70bb6cf25e281c315 Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Wed, 11 Sep 2024 08:42:28 +0200 Subject: [PATCH 16/22] SPIN-146 // Fixed lint error. --- blocks/form/form.css | 247 ++++++++++++++++++++++--------------------- 1 file changed, 124 insertions(+), 123 deletions(-) diff --git a/blocks/form/form.css b/blocks/form/form.css index dd2eebd..15c8603 100644 --- a/blocks/form/form.css +++ b/blocks/form/form.css @@ -1,273 +1,274 @@ /* ===================================================================== GENERAL STYLING */ .section-ready-to-fly .columns-wrapper { - margin-top: 50px; + margin-top: 50px; } .section-ready-to-fly h2 { - max-width: 900px; + max-width: 900px; } .section-ready-to-fly > div:first-child > p { - max-width: 550px; + max-width: 550px; } /* ===================================================================== MANAGER */ .section-ready-to-fly .columns > div > div:first-child { - min-height: 850px; - max-width: 50%; - margin: auto; - display: flex; - flex-direction: column; - justify-content: center; + min-height: 850px; + max-width: 50%; + margin: auto; + display: flex; + flex-direction: column; + justify-content: center; } .section-ready-to-fly .columns > div > div:first-child h3, .section-ready-to-fly .columns > div > div:first-child p:nth-child(3) { - margin: 5px 0; + margin: 5px 0; } .section-ready-to-fly .columns img { - --image-size: 300px; - display: block; - max-width: var(--image-size); - aspect-ratio: 1/1; - border-radius: 500px; - position: relative; - object-fit: cover; + --image-size: 300px; + + display: block; + max-width: var(--image-size); + aspect-ratio: 1/1; + border-radius: 500px; + position: relative; + object-fit: cover; } .section-ready-to-fly .columns > div > div:first-child h3, .section-ready-to-fly .columns picture { - position: relative; - z-index: -1; + position: relative; + z-index: -1; } .section-ready-to-fly .columns > div > div:first-child h3::before, .section-ready-to-fly .columns picture::before, .section-ready-to-fly .columns picture::after { - content: ''; - aspect-ratio: 1/1; - position: absolute; - border-radius: 500px; + content: ''; + aspect-ratio: 1/1; + position: absolute; + border-radius: 500px; } .section-ready-to-fly .columns picture::before { - width: 750px; - background: linear-gradient(223deg, #FF8C05 5.54%, #CE2726 36.22%, #626FF0 80.09%); - top: calc(-375px + 150px); /* (negative planet-size / 2) + (image-size /2) */ - left: calc(-375px + 150px); /* (negative planet-size / 2) + (image-size /2) */ - transform: translate(-40%, 0); + width: 750px; + background: linear-gradient(223deg, #FF8C05 5.54%, #CE2726 36.22%, #626FF0 80.09%); + top: calc(-375px + 150px); /* (negative planet-size / 2) + (image-size /2) */ + left: calc(-375px + 150px); /* (negative planet-size / 2) + (image-size /2) */ + transform: translate(-40%, 0); } .section-ready-to-fly .columns > div > div:first-child h3::before { - width: 60px; - background: #FF8C05; - top: calc(-18px + -300px + -120px); - left: 350px; + width: 60px; + background: #FF8C05; + top: calc(-18px + -300px + -120px); + left: 350px; } .section-ready-to-fly .columns picture::after { - width: 90px; - background: #CE2726; - top: calc(-45px + 150px); /* (negative planet-size / 2) + (image-size /2) */ - left: calc(-45px + 150px); /* (negative planet-size / 2) + (image-size /2) */ - transform: translate(80%, 400%); + width: 90px; + background: #CE2726; + top: calc(-45px + 150px); /* (negative planet-size / 2) + (image-size /2) */ + left: calc(-45px + 150px); /* (negative planet-size / 2) + (image-size /2) */ + transform: translate(80%, 400%); } /* ===================================================================== FORMS GENERAL */ form { - display: flex; - flex-direction: column; - gap: 52px; + display: flex; + flex-direction: column; + gap: 52px; } fieldset { - max-width: none !important; /* Override hs styling */ + max-width: none !important; /* Override hs styling */ } .input { - margin-right: 0 !important; /* Override hs styling */ + margin-right: 0 !important; /* Override hs styling */ } :is(.hs-fieldtype-text, .hs-fieldtype-phonenumber, .hs-fieldtype-textarea) .hs-input { - width: 100% !important; /* Override hs styling */ + width: 100% !important; /* Override hs styling */ } .form-columns-2 { - display: grid; - grid-template-columns: 1fr; - column-gap: 16px; - row-gap: 52px; + display: grid; + grid-template-columns: 1fr; + column-gap: 16px; + row-gap: 52px; } @media (min-width: 700px) { - .form-columns-2 { - grid-template-columns: repeat(2, 1fr); - } + .form-columns-2 { + grid-template-columns: repeat(2, 1fr); + } } .form-columns-2 .hs-form-field { - width: 100% !important; /* Override hs styling */ + width: 100% !important; /* Override hs styling */ } .field { - position: relative; + position: relative; } .field input, .field textarea { - margin: 0; - max-width: 100vw; + margin: 0; + max-width: 100vw; } .field textarea { - border: none; - padding: 16px 25px; - border-radius: 15px; - background-color: #382F6F; + border: none; + padding: 16px 25px; + border-radius: 15px; + background-color: #382F6F; } .hs-richtext { - font-size: var(--body-font-size-s); + font-size: var(--body-font-size-s); } .hs-richtext:not(:last-child) { - margin-bottom: 16px; + margin-bottom: 16px; } /* ===================================================================== ERROR */ .hs-error-msgs { - font-size: var(--body-font-size-s); - width: 100%; - grid-column: span 2; - list-style: none; - padding-left: 0; - margin: 0; + font-size: var(--body-font-size-s); + width: 100%; + grid-column: span 2; + list-style: none; + padding-left: 0; + margin: 0; } :is(.hs-fieldtype-text, .hs-fieldtype-phonenumber) .hs-error-msgs { - position: absolute; - left: 0; - right: 0; - top: calc(100% + 8px); + position: absolute; + left: 0; + right: 0; + top: calc(100% + 8px); } .hs-error-msgs label { - --background-color: transparent; + --background-color: transparent; - color: var(--error-color) !important; /* Override hs style */ + color: var(--error-color) !important; /* Override hs style */ } .error, .error + label { - --text-color: var(--error-color); + --text-color: var(--error-color); - color: var(--error-color); + color: var(--error-color); } /* ===================================================================== CHECKBOX */ .hs-fieldtype-booleancheckbox { - display: grid; - grid-template-columns: 25px 1fr; - gap: 8px 30px; - margin-bottom: 16px !important; /* Override hs styling */ + display: grid; + grid-template-columns: 25px 1fr; + gap: 8px 30px; + margin-bottom: 16px !important; /* Override hs styling */ } .hs-fieldtype-booleancheckbox label { - font-size: var(--body-font-size-s); + font-size: var(--body-font-size-s); } .hs-fieldtype-booleancheckbox input { - --checkbox-size: 25px; + --checkbox-size: 25px; - position: relative; - width: var(--checkbox-size); - min-width: var(--checkbox-size); - height: var(--checkbox-size); - min-height: var(--checkbox-size); - visibility: hidden; + position: relative; + width: var(--checkbox-size); + min-width: var(--checkbox-size); + height: var(--checkbox-size); + min-height: var(--checkbox-size); + visibility: hidden; } .hs-fieldtype-booleancheckbox input::before, .hs-fieldtype-booleancheckbox input::after { - box-sizing: border-box; - content: ''; - display: inline-block; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - border: 1px solid white; + box-sizing: border-box; + content: ''; + display: inline-block; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + border: 1px solid white; } .hs-fieldtype-booleancheckbox input::before { - visibility: visible; + visibility: visible; } .hs-fieldtype-booleancheckbox input::after { - transform: scale(60%, 60%); - background-color: white; + transform: scale(60%, 60%); + background-color: white; } .hs-fieldtype-booleancheckbox input:checked::after { - visibility: visible; + visibility: visible; } -.legal-consent-container .hs-form-booleancheckbox-display>span { - margin-left: 0 !important; /* Override hs styling */ - margin-top: -5px; /* Relativise the line height */ - margin-bottom: -5px; /* Relativise the line height */ +.legal-consent-container .hs-form-booleancheckbox-display > span { + margin-left: 0 !important; /* Override hs styling */ + margin-top: -5px; /* Relativise the line height */ + margin-bottom: -5px; /* Relativise the line height */ } /* ===================================================================== TEXT AREAS */ .hs-fieldtype-textarea { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .hs-fieldtype-textarea label { - margin-bottom: 5px; + margin-bottom: 5px; } .hs-fieldtype-textarea textarea { - height: 256px; - background-color: #382F6F; + height: 256px; + background-color: #382F6F; } .hs-fieldtype-textarea textarea:focus, -.hs-fieldtype-textarea textarea:not(:placeholder-shown){ - outline: none; +.hs-fieldtype-textarea textarea:not(:placeholder-shown) { + outline: none; } /* ===================================================================== TEXT FIELDS */ :is(.hs-fieldtype-text, .hs-fieldtype-phonenumber) input:focus { - outline: none; - border: 1px solid white; + outline: none; + border: 1px solid white; } :is(.hs-fieldtype-text, .hs-fieldtype-phonenumber) label:not(.hs-error-msg) { - position: absolute; - top: 13px; - transition: all 0.075s ease-out; - background-color: var(--background-color); - pointer-events: none; + position: absolute; + top: 13px; + transition: all 0.075s ease-out; + background-color: var(--background-color); + pointer-events: none; } :is(.hs-fieldtype-text, .hs-fieldtype-phonenumber) input:focus ~ label:not(.hs-error-msg), :is(.hs-fieldtype-text, .hs-fieldtype-phonenumber) input:not(:placeholder-shown) ~ label:not(.hs-error-msg) { - transform-origin: left; - padding: 5px; - transform: translate(-5px, calc(-50% - 13px)) scale(0.8, 0.8); + transform-origin: left; + padding: 5px; + transform: translate(-5px, calc(-50% - 13px)) scale(0.8, 0.8); } /* ===================================================================== FORM SUBMIT BUTTON */ .hs-submit .actions { - display: flex; - justify-content: right; + display: flex; + justify-content: right; } /* ===================================================================== HIDDEN */ .hs-fieldtype-hidden { - display: none; + display: none; } From 9ca89b2e0ee8637852608c9e1e763f8e07d115aa Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 16 Sep 2024 09:41:28 +0200 Subject: [PATCH 17/22] SPIN-146 // Fixed size issues with quotes. --- blocks/quotes/quotes.css | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/blocks/quotes/quotes.css b/blocks/quotes/quotes.css index 3f066ad..da034a3 100644 --- a/blocks/quotes/quotes.css +++ b/blocks/quotes/quotes.css @@ -9,13 +9,14 @@ .quotes > div { box-sizing: border-box; position: relative; + width: 381px; + max-width: 100%; aspect-ratio: 1/1; border-radius: 500px; background: linear-gradient(135deg, #CE2726 28.77%, #F5760D 75.11%); - height: 381px; display: flex; flex-direction: column; - justify-content: space-between; + justify-content: center; align-items: center; padding: 65px; } @@ -47,6 +48,7 @@ padding-top: 30px; font-size: 14px; font-weight: 400; + line-height: 20px; } @media (max-width: 899px) { @@ -54,3 +56,20 @@ padding: 50px; } } + +@media (max-width: 425px) { + .quotes > div { + } + + .quotes > div > div { + font-size: 15px; + line-height: 20px; + } + + .quotes > div > div:last-child { + padding-top: 15px; + font-size: 10px; + font-weight: normal; + line-height: 15px; + } +} From d0046c4000ea955a18dd13b6e489b00e5b3503e6 Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 16 Sep 2024 09:48:06 +0200 Subject: [PATCH 18/22] SPIN-146 // Fixed size issues with quotes. --- blocks/quotes/quotes.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/blocks/quotes/quotes.css b/blocks/quotes/quotes.css index da034a3..382e3df 100644 --- a/blocks/quotes/quotes.css +++ b/blocks/quotes/quotes.css @@ -59,6 +59,7 @@ @media (max-width: 425px) { .quotes > div { + padding: 30px; } .quotes > div > div { @@ -73,3 +74,17 @@ line-height: 15px; } } + +@media (max-width: 340px) { + .quotes > div > div { + font-size: 12px; + line-height: 12px; + } + + .quotes > div > div:last-child { + padding-top: 10px; + font-size: 8px; + font-weight: normal; + line-height: 10px; + } +} From 85a453fb93bbe63de0847582a56c9f8512fc9b81 Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 16 Sep 2024 11:17:31 +0200 Subject: [PATCH 19/22] SPIN-146 // removed planet-animation css fix and added js fix instead. --- scripts/scripts.js | 14 +++++++++++--- styles/styles.css | 1 - 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 8093a56..e37a0c2 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -90,11 +90,19 @@ function decorateSectionsWithPlanetToBackgroundAnimation(main) { const nextSection = entry.target.nextElementSibling; if (entry.isIntersecting) { entry.target.classList.remove('background-hidden'); - previousSection.querySelector('.section-planet').classList.add('hidden'); - nextSection.querySelector('.section-planet').classList.add('hidden'); + // previousSection.querySelector('.section-planet').classList.add('hidden'); + // nextSection.querySelector('.section-planet').classList.add('hidden'); + previousSection.querySelectorAll('.section-planet').forEach((planet) => { + planet.classList.add('hidden'); + }) + nextSection.querySelectorAll('.section-planet').forEach((planet) => { + planet.classList.add('hidden'); + }) } else if (entry.boundingClientRect.top > 0) { entry.target.classList.add('background-hidden'); - previousSection.querySelector('.section-planet').classList.remove('hidden'); + previousSection.querySelectorAll('.section-planet').forEach((planet) => { + planet.classList.remove('hidden'); + }) } else if (entry.boundingClientRect.top < 0) { entry.target.classList.add('background-hidden'); nextSection.querySelector('.section-planet').classList.remove('hidden'); diff --git a/styles/styles.css b/styles/styles.css index 5f7d42f..6c0d27c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -546,7 +546,6 @@ main .section.hero .icon-logo-adobe-techdivision { 100% { transform: translateX(-50%) scale(50); border-radius: 10px; - display: none; } } From 66fb227a794b7e20d8499ccdbf120a9f801571d9 Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 16 Sep 2024 11:31:54 +0200 Subject: [PATCH 20/22] SPIN-146 // fixed skewed images generally and removed specific fix from forms css. --- blocks/form/form.css | 1 - styles/styles.css | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/form/form.css b/blocks/form/form.css index 15c8603..ad560b3 100644 --- a/blocks/form/form.css +++ b/blocks/form/form.css @@ -34,7 +34,6 @@ aspect-ratio: 1/1; border-radius: 500px; position: relative; - object-fit: cover; } .section-ready-to-fly .columns > div > div:first-child h3, diff --git a/styles/styles.css b/styles/styles.css index 6c0d27c..0500686 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -424,6 +424,7 @@ main img { max-width: 100%; width: 100%; height: auto; + object-fit: cover; } From 0105f44bb3e6bb1b35c659c11db79b6859858bbf Mon Sep 17 00:00:00 2001 From: Sieghard Hillbrecht Date: Mon, 16 Sep 2024 11:33:31 +0200 Subject: [PATCH 21/22] SPIN-146 // added missing semicolons --- scripts/scripts.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index e37a0c2..f994b51 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -94,15 +94,15 @@ function decorateSectionsWithPlanetToBackgroundAnimation(main) { // nextSection.querySelector('.section-planet').classList.add('hidden'); previousSection.querySelectorAll('.section-planet').forEach((planet) => { planet.classList.add('hidden'); - }) + }); nextSection.querySelectorAll('.section-planet').forEach((planet) => { planet.classList.add('hidden'); - }) + }); } else if (entry.boundingClientRect.top > 0) { entry.target.classList.add('background-hidden'); previousSection.querySelectorAll('.section-planet').forEach((planet) => { planet.classList.remove('hidden'); - }) + }); } else if (entry.boundingClientRect.top < 0) { entry.target.classList.add('background-hidden'); nextSection.querySelector('.section-planet').classList.remove('hidden'); From 7e347601276bcbca2802bad0fd39f1671efd90b0 Mon Sep 17 00:00:00 2001 From: Markus Biberger Date: Tue, 17 Sep 2024 10:52:57 +0200 Subject: [PATCH 22/22] [TASK] Reformat CSS code: Adjust space indent to 4. --- blocks/carousel/carousel.css | 140 +++++++++++++++++------------------ blocks/embed/embed.css | 84 ++++++++++----------- blocks/footer/footer.css | 56 +++++++------- blocks/header/header.css | 8 +- 4 files changed, 144 insertions(+), 144 deletions(-) diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index 68b0132..1d33433 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -1,121 +1,121 @@ main .carousel-wrapper { - position: relative; + position: relative; } main .carousel { - display: flex; - scroll-snap-type: x mandatory; - overflow-x: scroll; - overflow-y: hidden; - scroll-behavior: smooth; - box-shadow: var(--box-shadow-2); - margin: 32px 0; - background-color: var(--background-color-reverse); + display: flex; + scroll-snap-type: x mandatory; + overflow-x: scroll; + overflow-y: hidden; + scroll-behavior: smooth; + box-shadow: var(--box-shadow-2); + margin: 32px 0; + background-color: var(--background-color-reverse); } main .carousel picture { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; } main .carousel img { - object-fit: cover; - width: 100%; - height: 100%; + object-fit: cover; + width: 100%; + height: 100%; } main .carousel-image picture:not(:only-child) { - display: none; + display: none; } main .carousel-image picture:not(:only-child):nth-child(1) { - display: block; + display: block; } main .carousel > div { - width: 100%; - flex-shrink: 0; - scroll-snap-align: start; - position: relative; - height: 50vw; - max-height: 652px; - align-items: flex-end; - display: flex; - background-image: linear-gradient(#0000, #0008); - color: var(--color-white); + width: 100%; + flex-shrink: 0; + scroll-snap-align: start; + position: relative; + height: 50vw; + max-height: 652px; + align-items: flex-end; + display: flex; + background-image: linear-gradient(#0000, #0008); + color: var(--color-white); } main .carousel.row-4 > div { - justify-content: center; + justify-content: center; } main .carousel div.carousel-text { - text-align: center; - width: 500px; - margin: 0 auto; + text-align: center; + width: 500px; + margin: 0 auto; } main .carousel::-webkit-scrollbar { - display: none; + display: none; } main .carousel-wrapper .carousel-buttons { - text-align: center; - margin-top: -34px; - position: absolute; - display: flex; - right: 0; - left: 0; - justify-content: center; + text-align: center; + margin-top: -34px; + position: absolute; + display: flex; + right: 0; + left: 0; + justify-content: center; } main .carousel-buttons button { - display: block; - height: 14px; - width: 14px; - padding: 0; - margin: 10px; - border-radius: 7px; - border: none; - background-color: var(--color-light-purple); - cursor: pointer; + display: block; + height: 14px; + width: 14px; + padding: 0; + margin: 10px; + border-radius: 7px; + border: none; + background-color: var(--color-light-purple); + cursor: pointer; } main .carousel-buttons button.selected { - background-color: var(--color-purple); + background-color: var(--color-purple); } main .reverse .carousel-buttons button.selected { - background-color: var(--background-color-reverse); + background-color: var(--background-color-reverse); } main .carousel-wrapper .carousel-controls { - display: none; + display: none; } @media (min-width: 700px) { - main .carousel-image picture:not(:only-child):nth-child(1) { - display: none; - } + main .carousel-image picture:not(:only-child):nth-child(1) { + display: none; + } - main .carousel-image picture:not(:only-child):nth-child(2) { - display: block; - } + main .carousel-image picture:not(:only-child):nth-child(2) { + display: block; + } } @media (min-width: 900px) { - main .carousel > div { - background-image: unset; - color: unset; - align-items: center; - } - - main .carousel div.carousel-text { - margin: unset; - padding: 32px; - text-align: left; - } + main .carousel > div { + background-image: unset; + color: unset; + align-items: center; + } + + main .carousel div.carousel-text { + margin: unset; + padding: 32px; + text-align: left; + } } diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index efb9172..a1e3232 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -1,65 +1,65 @@ main .embed { - width: unset; - text-align: center; - margin: 32px auto; - aspect-ratio: 16 / 9; + width: unset; + text-align: center; + margin: 32px auto; + aspect-ratio: 16 / 9; } main .embed > div { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } main .embed.embed-twitter .twitter-tweet-rendered { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } main .embed .embed-placeholder { - width: 100%; - aspect-ratio: 16 / 9; - position: relative; + width: 100%; + aspect-ratio: 16 / 9; + position: relative; } main .embed .embed-placeholder > * { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } main .embed .embed-placeholder picture img { - width: 100%; - height: 100%; - object-fit: cover; + width: 100%; + height: 100%; + object-fit: cover; } main .embed .embed-placeholder-play button { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(3); - width: 22px; - height: 22px; - border: 2px solid; - border-radius: 20px; - padding: 0; + box-sizing: border-box; + position: relative; + display: block; + transform: scale(3); + width: 22px; + height: 22px; + border: 2px solid; + border-radius: 20px; + padding: 0; } main .embed .embed-placeholder-play button::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 0; - height: 10px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 6px solid; - top: 4px; - left: 7px; + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 0; + height: 10px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 6px solid; + top: 4px; + left: 7px; } diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 3dc1be5..98dc5ed 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,51 +1,51 @@ footer { - height: var(--footer-height); - padding: var(--footer-padding-horizontal) var(--footer-padding-vertical); - font-size: var(--body-font-size-xs); - background-color: var(--footer-background-color); + height: var(--footer-height); + padding: var(--footer-padding-horizontal) var(--footer-padding-vertical); + background-color: var(--footer-background-color); + font-size: var(--body-font-size-xs); } footer .block { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; } footer > div > div { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 10px 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10px 0; } footer > div > div > p { - margin: 2px; + margin: 2px; } footer > div > div:first-child .icon svg { - height: 75px; + height: 75px; } footer > div > div:last-child { - width: 100%; - max-width: 200px; - display: grid; - grid-template-areas: "header header header"; - justify-content: space-between; - align-items: center; + width: 100%; + max-width: 200px; + display: grid; + grid-template-areas: "header header header"; + justify-content: space-between; + align-items: center; } footer > div > div:last-child p:first-child { - grid-area: header; - text-align: center; - padding-bottom: 10px; + grid-area: header; + text-align: center; + padding-bottom: 10px; } footer > div > div:last-child .icon svg { - height: 20px; - width: 20px; - fill: currentcolor; + height: 20px; + width: 20px; + fill: currentcolor; } diff --git a/blocks/header/header.css b/blocks/header/header.css index fa004d7..1ed4d95 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -1,4 +1,4 @@ -header{ +header { padding: 20px; position: relative; box-sizing: border-box; @@ -36,8 +36,8 @@ header .icon-logo-white svg { padding: 10px 25px; } -@media (max-width: 899px){ - .nav-list{ +@media (max-width: 899px) { + .nav-list { transition: transform .3s ease-in-out; display: flex; position: fixed; @@ -169,7 +169,7 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after { right: 18px; } -.language-navigation:hover .language-navigation-selection{ +.language-navigation:hover .language-navigation-selection { display: flex; }