Merge pull request #34 from Netcentric/bugfix/na-fix-body-overflow

NA - Fix body overflow
Netcentric · Mar 5, 2024 · b58fc70 · b58fc70
2 parents 0f44aae + a8e2f7e
commit b58fc70
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 75 deletions.
diff --git a/scripts/aem.js b/scripts/aem.js
@@ -718,7 +718,7 @@ function decorateSpaceshipFocusPageH1() {
   if (spaceshipFocusPageH1Element) {
     const innerText = spaceshipFocusPageH1Element.textContent.trim();
     const arr = innerText.split(' ');
-    const result = `<span class="rotate">${arr.join(' </span><span class="rotate">')}</span>`;
+    const result = `<span class="indent">${arr.join(' </span><span class="indent">')}</span>`;
 
     spaceshipFocusPageH1Element.innerHTML = result;
   }

diff --git a/styles/baseModel.css b/styles/baseModel.css
@@ -6,10 +6,6 @@ body.ship-focus .default-content-wrapper {
   max-width: 100%;
 }
 
-/* body.ship-focus .default-content-wrapper p:not(p ~ p) {
-  margin: 0 -130px;
-} */
-
 /* stylelint-disable-next-line no-descending-specificity */
 body.ship-focus .default-content-wrapper h1 + p {
   max-height: 100vh;
@@ -24,28 +20,25 @@ body.ship-focus .default-content-wrapper .main-group img {
   object-fit: cover;
 }
 
-
 body.ship-focus .default-content-wrapper .main-group > h1:first-child {
   position: absolute;
-  right: 0;
+  left: 30%;
   margin: 64px auto 0;
-  word-break: keep-all;
-  word-spacing: 9999px;
   text-align: left;
   font-size: 150px;
   color: var(--dark-blue);
   text-transform: uppercase;
-  transform: skew(40deg);
   line-height: 150px;
-  width: 60%;
+  width: 55%;
   text-shadow: 0 0 64px white;
 }
 
-body.ship-focus .default-content-wrapper .main-group > h1:first-child .rotate {
-  position: relative;
-  white-space: pre-wrap;
-  transform: skew(-40deg);
-  display: inline-block;
+body.ship-focus .default-content-wrapper .main-group > h1:first-child .indent:nth-child(2) {
+  padding-left: 10%;
+}
+
+body.ship-focus .default-content-wrapper .main-group > h1:first-child .indent:nth-child(3) {
+  padding-left: 20%;
 }
 
 body.ship-focus .default-content-wrapper .sub-group p,

diff --git a/styles/styles.css b/styles/styles.css
@@ -227,23 +227,6 @@ main .section.highlight {
   line-height: 27px;
 }
 
-/* 
-.default-content-wrapper .blocks {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 80px;
-  gap: 107px;
-} 
-
-.default-content-wrapper .block:first-child {
-  flex-basis: 55%;
-}
-
-.default-content-wrapper .block:nth-child(2),
-.default-content-wrapper .block:nth-child(3) {
-  flex-basis: 30%;
-} */
-
 .default-content-wrapper .blocks {
   display: flex;
   flex-wrap: wrap;
@@ -302,46 +285,6 @@ main .section.highlight {
   width: 100%;
 }
 
-/*
-.default-content-wrapper .block:nth-child(odd) h3 {
-  order: 1;
-  margin-bottom: 0;
-  margin-top: 24px;
-  font-size: var(--paragraph-font-size);
-}
-
-.default-content-wrapper .block:nth-child(odd) h3 + p {
-  order: 3;
-  margin-top: 0;
-  margin-left: 106px;
-}
-
-.default-content-wrapper .block:nth-child(odd) p:last-child {
-  order: 2;
-  margin-top: 10px;
-  width: 40%;
-}
-
-.default-content-wrapper .block:nth-child(even) h3 {
-  order: 2;
-  margin-bottom: 0;
-  margin-top: 24px;
-  font-size: var(--paragraph-font-size);
-}
-
-.default-content-wrapper .block:nth-child(even) h3 + p {
-  order: 1;
-  margin-top: 0;
-  width: 30%;
-  margin-right: 106px;
-}
-
-.default-content-wrapper .block:nth-child(even) p:last-child {
-  order: 3;
-  margin-top: 10px;
-  width: 60%;
-} */
-
 .default-content-wrapper .info-container {
   position: absolute;
   top: 550px;
@@ -401,8 +344,8 @@ body.accessory-focus .section {
 
 body.engine-focus .default-content-wrapper,
 body.interior-focus .default-content-wrapper,
-body.accessory-focus .default-content-wrapper { 
-  display: flex; 
+body.accessory-focus .default-content-wrapper {
+  display: flex;
   height: 100%;
   max-width: 100%;
   flex-direction: row-reverse;