NA - Style the page with padding , changed the text color and width

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 = `<span class="rotate">${arr.join(' </span><span class="rotate">')}</span>`;
+
+    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,

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();
 }
 
 /**

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;
+}

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 */
@@ -19,6 +9,7 @@
   --dark-color: #ccc;
   --text-color: black;
   --midnight-blue-color: #000048;
+  --dark-blue: #2F78C4;
 
   /* fonts */
   --body-font-family: "Gellix", "Gellix-fallback";
@@ -226,19 +217,9 @@ main .section.highlight {
   color: var(--midnight-blue-color);
 }
 
-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;
-  text-align: center;
-}
-
 
 /* stylelint-disable-next-line no-descending-specificity */
 p {
   font-size: var(--paragraph-font-size);
 }
+