diff --git a/scripts/scripts.js b/scripts/scripts.js
index d5ba0a8..b47729b 100644
--- 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 = `${texts[0]}${texts.slice(1).join(' ')}`;
+ const result = `${splitWords ? info : texts[0]}${splitWords ? name : texts.slice(1).join(' ')}`;
infoElement.innerHTML = result;
containerElement.appendChild(infoElement);
@@ -36,7 +36,7 @@ function addSpecifications(specs) {
const content = `
SPECIFICATIONS
Learn more about the ${document.querySelector('h1').textContent} and its technical specifications.
length | width | height | weight |
- ${specs.Length} | ${specs.Width} | ${specs.Height} | ${specs.Weight} |
`;
+ ${specs.Length.split(',')[0]} | ${specs.Width.split(',')[0]} | ${specs.Height.split(',')[0]} | ${specs.Weight.split(',')[0]} |
`;
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
index 080059b..f399ff0 100644
--- 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
index 7565f39..a987dac 100644
--- 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;