From d3d5b189dce730aae21f60812b19655208b8f574 Mon Sep 17 00:00:00 2001 From: Nagaraj Devendhiran Date: Thu, 22 Feb 2024 11:26:31 +0100 Subject: [PATCH 1/5] NA - Style the page with padding , changed the text color and width --- styles/styles.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/styles/styles.css b/styles/styles.css index 9b4f7de..3917bcb 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -19,6 +19,7 @@ --dark-color: #ccc; --text-color: black; --midnight-blue-color: #000048; + --dark-blue: #2F78C4; /* fonts */ --body-font-family: "Gellix", "Gellix-fallback"; @@ -226,6 +227,18 @@ main .section.highlight { color: var(--midnight-blue-color); } +body.ship-focus .section { + padding: 0 130px 130px; +} + +body.ship-focus .default-content-wrapper { + max-width: 100%; +} + +body.ship-focus .default-content-wrapper p:not(p ~ p) { + margin: 0 -130px; +} + body.ship-focus .default-content-wrapper p:not(p ~ p) img { width: 100%; } @@ -234,7 +247,12 @@ body.ship-focus .default-content-wrapper > h1:first-child { position: absolute; left: 0; right: 0; + width: 500px; + margin: 0 auto; + word-break: keep-all; text-align: center; + font-size: 170px; + color: var(--dark-blue); } From 3dbd5d4bf5657d69d0b98003223c07c8f4be8778 Mon Sep 17 00:00:00 2001 From: Nagaraj Devendhiran Date: Thu, 22 Feb 2024 11:45:47 +0100 Subject: [PATCH 2/5] NA - styled text --- styles/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index 3917bcb..e0dda88 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -248,11 +248,12 @@ body.ship-focus .default-content-wrapper > h1:first-child { left: 0; right: 0; width: 500px; - margin: 0 auto; + margin: 100px auto 0; word-break: keep-all; text-align: center; font-size: 170px; color: var(--dark-blue); + text-transform: uppercase; } From e5f25ff6e084aefd6920f40c1e0af9196fca7954 Mon Sep 17 00:00:00 2001 From: Nagaraj Devendhiran Date: Fri, 23 Feb 2024 10:10:27 +0100 Subject: [PATCH 3/5] NA - Added text intent and line height. --- styles/styles.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index e0dda88..646d5e1 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -247,13 +247,15 @@ body.ship-focus .default-content-wrapper > h1:first-child { position: absolute; left: 0; right: 0; - width: 500px; + width: 50%; margin: 100px auto 0; word-break: keep-all; text-align: center; font-size: 170px; color: var(--dark-blue); text-transform: uppercase; + text-indent: -230px; + line-height: 150px; } From 9a6cdd9754421ada7969d72cda2d793aca452b69 Mon Sep 17 00:00:00 2001 From: Alexis Coelho Date: Fri, 23 Feb 2024 15:32:53 +0100 Subject: [PATCH 4/5] 20 - Spaceship hero --- scripts/aem.js | 13 +++++++++++++ scripts/scripts.js | 2 ++ styles/styles.css | 14 +++++++++++--- 3 files changed, 26 insertions(+), 3 deletions(-) diff --git a/scripts/aem.js b/scripts/aem.js index 99f56f5..f04b8e8 100644 --- a/scripts/aem.js +++ b/scripts/aem.js @@ -633,6 +633,18 @@ function decorateBlocks(main) { main.querySelectorAll('div.section > div > div').forEach(decorateBlock); } +function decorateSpaceshipFocusPageH1() { + const spaceshipFocusPageH1Element = document.querySelector('body.ship-focus .default-content-wrapper > h1:first-child'); + + if (spaceshipFocusPageH1Element) { + const innerText = spaceshipFocusPageH1Element.textContent.trim(); + const arr = innerText.split(' '); + const result = `${arr.join(' ')}`; + + spaceshipFocusPageH1Element.innerHTML = result; + } +} + /** * Loads a block named 'header' into header * @param {Element} header header element @@ -691,6 +703,7 @@ export { decorateIcons, decorateSections, decorateTemplateAndTheme, + decorateSpaceshipFocusPageH1, fetchPlaceholders, getMetadata, loadBlock, diff --git a/scripts/scripts.js b/scripts/scripts.js index c1d93fb..867659d 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -8,6 +8,7 @@ import { decorateSections, decorateBlocks, decorateTemplateAndTheme, + decorateSpaceshipFocusPageH1, waitForLCP, loadBlocks, loadCSS, @@ -67,6 +68,7 @@ export function decorateMain(main) { buildAutoBlocks(main); decorateSections(main); decorateBlocks(main); + decorateSpaceshipFocusPageH1(); } /** diff --git a/styles/styles.css b/styles/styles.css index 646d5e1..c6b9a0d 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -247,17 +247,25 @@ body.ship-focus .default-content-wrapper > h1:first-child { position: absolute; left: 0; right: 0; - width: 50%; margin: 100px auto 0; word-break: keep-all; - text-align: center; + word-spacing: 9999px; + text-align: left; font-size: 170px; color: var(--dark-blue); text-transform: uppercase; - text-indent: -230px; + transform: skew(40deg); + padding-left: 400px; line-height: 150px; } +body.ship-focus .default-content-wrapper > h1:first-child .rotate { + position: relative; + white-space: pre-wrap; + transform: skew(-40deg); + display: inline-block; +} + /* stylelint-disable-next-line no-descending-specificity */ p { From 92d1038622b7202c3b3bd18593502cc07cbf349e Mon Sep 17 00:00:00 2001 From: Alexis Coelho Date: Fri, 23 Feb 2024 15:40:07 +0100 Subject: [PATCH 5/5] 20 - extract spaceship css --- styles/baseModel.css | 38 ++++++++++++++++++++++++++++++++ styles/styles.css | 52 ++------------------------------------------ 2 files changed, 40 insertions(+), 50 deletions(-) create mode 100644 styles/baseModel.css diff --git a/styles/baseModel.css b/styles/baseModel.css new file mode 100644 index 0000000..5967b6b --- /dev/null +++ b/styles/baseModel.css @@ -0,0 +1,38 @@ +body.ship-focus .section { + padding: 0 130px 130px; +} + +body.ship-focus .default-content-wrapper { + max-width: 100%; +} + +body.ship-focus .default-content-wrapper p:not(p ~ p) { + margin: 0 -130px; +} + +body.ship-focus .default-content-wrapper p:not(p ~ p) img { + width: 100%; +} + +body.ship-focus .default-content-wrapper > h1:first-child { + position: absolute; + left: 0; + right: 0; + margin: 100px auto 0; + word-break: keep-all; + word-spacing: 9999px; + text-align: left; + font-size: 170px; + color: var(--dark-blue); + text-transform: uppercase; + transform: skew(40deg); + padding-left: 400px; + line-height: 150px; +} + +body.ship-focus .default-content-wrapper > h1:first-child .rotate { + position: relative; + white-space: pre-wrap; + transform: skew(-40deg); + display: inline-block; +} diff --git a/styles/styles.css b/styles/styles.css index c6b9a0d..2f14ba0 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,14 +1,4 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ +@import url('baseModel.css'); :root { /* colors */ @@ -227,47 +217,9 @@ main .section.highlight { color: var(--midnight-blue-color); } -body.ship-focus .section { - padding: 0 130px 130px; -} - -body.ship-focus .default-content-wrapper { - max-width: 100%; -} - -body.ship-focus .default-content-wrapper p:not(p ~ p) { - margin: 0 -130px; -} - -body.ship-focus .default-content-wrapper p:not(p ~ p) img { - width: 100%; -} - -body.ship-focus .default-content-wrapper > h1:first-child { - position: absolute; - left: 0; - right: 0; - margin: 100px auto 0; - word-break: keep-all; - word-spacing: 9999px; - text-align: left; - font-size: 170px; - color: var(--dark-blue); - text-transform: uppercase; - transform: skew(40deg); - padding-left: 400px; - line-height: 150px; -} - -body.ship-focus .default-content-wrapper > h1:first-child .rotate { - position: relative; - white-space: pre-wrap; - transform: skew(-40deg); - display: inline-block; -} - /* stylelint-disable-next-line no-descending-specificity */ p { font-size: var(--paragraph-font-size); } +