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.

-
lengthwidthheightweight
${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;