Merge pull request #27 from Netcentric/feature/26-adjust-focus-page

Adjust focus page
Netcentric · Feb 29, 2024 · ad9452c · ad9452c
2 parents f782254 + 3da3da1
commit ad9452c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 14 deletions.
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -17,13 +17,13 @@ import {
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 
-function addSpeedInformation(info, containerElement) {
+function addSpeedInformation(info, containerElement, name, splitWords = false) {
   const infoElement = document.createElement('div');
 
   infoElement.classList.add('info');
 
   const texts = info.split(' ');
-  const result = `<span class="info-number">${texts[0]}</span><span class="info-text">${texts.slice(1).join(' ')}</span>`;
+  const result = `<span class="info-number">${splitWords ? info : texts[0]}</span><span class="info-text">${splitWords ? name : texts.slice(1).join(' ')}</span>`;
 
   infoElement.innerHTML = result;
   containerElement.appendChild(infoElement);
@@ -36,7 +36,7 @@ function addSpecifications(specs) {
 
   const content = `<h2>SPECIFICATIONS</h2><div><p>Learn more about the ${document.querySelector('h1').textContent} and its technical specifications.</p></div>
   <table class="spec-table"><tr><th>length</th><th>width</th><th>height</th><th>weight</th></tr>
-  <tr><td>${specs.Length}</td><td>${specs.Width}</td><td>${specs.Height}</td><td>${specs.Weight}</td></tr><table></div>`;
+  <tr><td>${specs.Length.split(',')[0]}</td><td>${specs.Width.split(',')[0]}</td><td>${specs.Height.split(',')[0]}</td><td>${specs.Weight.split(',')[0]}</td></tr><table></div>`;
   specContainer.innerHTML = content;
 
   const parentElement = document.querySelector('body.ship-focus .default-content-wrapper');
@@ -70,7 +70,7 @@ async function prepareSpecification() {
     if (specificationsObj.Range) {
       addSpeedInformation(specificationsObj.Range, infoContainer);
       // Temp content as it is not received from document
-      addSpeedInformation(specificationsObj['Number of Passengers'], infoContainer);
+      addSpeedInformation(specificationsObj['Number of Passengers'].replace('to', '-'), infoContainer, 'Passengers', true);
       addSpeedInformation(specificationsObj.Length, infoContainer);
     }
 

diff --git a/styles/baseModel.css b/styles/baseModel.css
@@ -18,7 +18,7 @@ body.ship-focus .default-content-wrapper h1 + p {
   margin: 0 -130px;
 }
 
-body.ship-focus .default-content-wrapper p:not(p ~ p) img {
+body.ship-focus .default-content-wrapper .main-group img {
   width: 100vw;
   height: 100vh;
   object-fit: cover;
@@ -27,18 +27,18 @@ body.ship-focus .default-content-wrapper p:not(p ~ p) img {
 
 body.ship-focus .default-content-wrapper .main-group > h1:first-child {
   position: absolute;
-  left: 0;
   right: 0;
-  margin: 100px auto 0;
+  margin: 64px auto 0;
   word-break: keep-all;
   word-spacing: 9999px;
   text-align: left;
-  font-size: 170px;
+  font-size: 150px;
   color: var(--dark-blue);
   text-transform: uppercase;
   transform: skew(40deg);
   line-height: 150px;
   width: 60%;
+  text-shadow: 0 0 64px white;
 }
 
 body.ship-focus .default-content-wrapper .main-group > h1:first-child .rotate {

diff --git a/styles/styles.css b/styles/styles.css
@@ -244,9 +244,9 @@ main .section.highlight {
 
 .default-content-wrapper .blocks {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   margin-top: 80px;
-  gap: 42px;
+  justify-content: space-between;
 }
 
 .default-content-wrapper .block {
@@ -256,11 +256,51 @@ main .section.highlight {
   flex-wrap: wrap;
   font-size: var(--paragraph-font-size);
   line-height: 27px;
-  width: 100%;
-  height: 500px;
   overflow: hidden;
+  place-content: stretch;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.default-content-wrapper .block:nth-child(1) {
+  flex-basis: 55%;
+}
+
+.default-content-wrapper .block:nth-child(2) {
+  flex-basis: 35%;
+}
+
+.default-content-wrapper .block:nth-child(3) {
+  flex-basis: 100%;
+  margin-top: 42px;
+}
+
+.default-content-wrapper .block h3 {
+  order: 2;
+  margin-bottom: 0;
+  margin-top: 24px;
+  font-size: var(--paragraph-font-size);
 }
 
+.default-content-wrapper .block h3 + p {
+  order: 1;
+  margin: 0;
+}
+
+.default-content-wrapper .block p:last-child {
+  order: 3;
+  margin-top: 10px;
+}
+
+.default-content-wrapper .block:nth-child(3) h3 + p {
+  width: 100%;
+}
+
+.default-content-wrapper .block:nth-child(3) img {
+  width: 100%;
+}
+
+/*
 .default-content-wrapper .block:nth-child(odd) h3 {
   order: 1;
   margin-bottom: 0;
@@ -287,7 +327,6 @@ main .section.highlight {
   font-size: var(--paragraph-font-size);
 }
 
-/* stylelint-disable-next-line no-descending-specificity */
 .default-content-wrapper .block:nth-child(even) h3 + p {
   order: 1;
   margin-top: 0;
@@ -299,7 +338,7 @@ main .section.highlight {
   order: 3;
   margin-top: 10px;
   width: 60%;
-}
+} */
 
 .default-content-wrapper .info-container {
   position: absolute;