diff --git a/scripts/scripts.js b/scripts/scripts.js
index 19baa3a..1f948c5 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -30,9 +30,19 @@ function addSpeedInformation(info, containerElement, name, splitWords = false) {
containerElement.appendChild(infoElement);
}
-function addSpecifications(specs) {
- const specContainer = document.createElement('div');
+function addShipSpecifications(specs) {
+ const infoContainer = document.createElement('div');
+ const titleElement = document.querySelector('h2');
+
+ if (specs.Range) {
+ addSpeedInformation(specs.Range, infoContainer);
+ addSpeedInformation(specs['Number of Passengers'].replace('to', '–').replaceAll(' ', ''), infoContainer, 'passengers', true);
+ addSpeedInformation(specs.Length, infoContainer);
+ }
+ infoContainer.classList.add('info-container');
+ titleElement.parentNode.insertBefore(infoContainer, titleElement);
+ const specContainer = document.createElement('div');
specContainer.classList.add('spec-container');
const content = `
SPECIFICATIONS
Learn more about the ${document.querySelector('h1').textContent} and its technical specifications.
@@ -44,9 +54,28 @@ function addSpecifications(specs) {
parentElement.appendChild(specContainer);
}
+function addEngineSpecifications(specs) {
+ const specContainer = document.createElement('div');
+ specContainer.classList.add('spec-container');
+
+ const content = `
+ Length | ${specs.Length} |
+ Width | ${specs.Width} |
+ Maximum Speed | ${specs['Maximum Speed']} |
+ Range | ${specs.Range} |
+ `;
+ specContainer.innerHTML = content;
+
+ const parentElement = document.querySelector('body .default-content-wrapper .sub-group');
+ parentElement.appendChild(specContainer);
+}
+
async function prepareSpecification() {
+ const isTemplate = (template) => document.body.classList.contains(template);
+ const isShipFocus = isTemplate('ship-focus');
+ const isEngineFocus = !isShipFocus && isTemplate('engine-focus');
try {
- if (!document.body.classList.contains('ship-focus')) {
+ if (!isShipFocus && !isEngineFocus) {
return;
}
const specificationPath = getMetadata('specifications');
@@ -65,22 +94,13 @@ async function prepareSpecification() {
}
const specificationsObj = JSON.parse(specification.specifications);
- const infoContainer = document.createElement('div');
- const titleElement = document.querySelector('h2');
-
- if (specificationsObj.Range) {
- addSpeedInformation(specificationsObj.Range, infoContainer);
- // Temp content as it is not received from document
- addSpeedInformation(specificationsObj['Number of Passengers'].replace('to', '–').replaceAll(' ', ''), infoContainer, 'passengers', true);
- addSpeedInformation(specificationsObj.Length, infoContainer);
- }
-
- addSpecifications(specificationsObj);
- infoContainer.classList.add('info-container');
- titleElement.parentNode.insertBefore(infoContainer, titleElement);
+ if (isShipFocus) {
+ addShipSpecifications(specificationsObj);
+ } else /* if (isEngineFocus) */ {
+ addEngineSpecifications(specificationsObj);
+ }
- // these dataset are reference and will be removed later
document.body.dataset.features = specification.features;
document.body.dataset.specification = specification.specifications;
} catch (e) {
diff --git a/styles/accessories.css b/styles/accessories.css
new file mode 100644
index 0000000..51a6fe3
--- /dev/null
+++ b/styles/accessories.css
@@ -0,0 +1,105 @@
+
+
+body.engine-focus .section,
+body.interior-focus .section,
+body.accessory-focus .section {
+ padding: 0;
+}
+
+body.engine-focus .default-content-wrapper,
+body.interior-focus .default-content-wrapper,
+body.accessory-focus .default-content-wrapper {
+ display: flex;
+ height: 100%;
+ max-width: 100%;
+ flex-direction: row-reverse;
+}
+
+body.engine-focus .default-content-wrapper h1,
+body.interior-focus .default-content-wrapper h1,
+body.accessory-focus .default-content-wrapper h1 {
+ font-size: var(--heading-font-size-l);
+}
+
+body.engine-focus .default-content-wrapper .group,
+body.interior-focus .default-content-wrapper .group,
+body.accessory-focus .default-content-wrapper .group {
+ font-size: var(--paragraph-font-size);
+ display: flex;
+ justify-content: space-between;
+ padding: 64px 102px 40px 56px;
+ width: 50%;
+ flex-direction: column;
+ box-sizing: border-box;
+ max-height: 100vh;
+ overflow-y: scroll;
+}
+
+body.engine-focus .default-content-wrapper .sub-group,
+body.interior-focus .default-content-wrapper .sub-group,
+body.accessory-focus .default-content-wrapper .sub-group {
+ font-size: var(--paragraph-font-size);
+ display: flex;
+ flex-direction: column;
+}
+
+body.engine-focus .default-content-wrapper .sub-group h2,
+body.interior-focus .default-content-wrapper .sub-group h2,
+body.accessory-focus .default-content-wrapper .sub-group h2 {
+ line-height: 26px;
+ margin: 0;
+ font-size: var(--paragraph-font-size);
+}
+
+body.engine-focus .default-content-wrapper p:first-child,
+body.interior-focus .default-content-wrapper p:first-child,
+body.accessory-focus .default-content-wrapper p:first-child {
+ margin: 0;
+ height: 100vh;
+ width: 50%;
+ position: relative;
+}
+
+body.engine-focus .default-content-wrapper .sub-group h2 + p,
+body.interior-focus .default-content-wrapper .sub-group h2 + p,
+body.accessory-focus .default-content-wrapper .sub-group h2 + p {
+ line-height: 27px;
+ margin-top: 30px;
+}
+
+body.engine-focus .default-content-wrapper p:first-child img,
+body.interior-focus .default-content-wrapper p:first-child img,
+body.accessory-focus .default-content-wrapper p:first-child img {
+ width: 100%;
+ height: 100vh;
+ object-fit: cover;
+ position: absolute;
+}
+
+body.engine-focus .spec-container,
+body.interior-focus .spec-container,
+body.accessory-focus .spec-container {
+ width: 100%;
+ margin-top: 30px;
+}
+
+body.engine-focus .spec-container table,
+body.interior-focus .spec-container table,
+body.accessory-focus .spec-container table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+body.engine-focus .spec-container table td,
+body.interior-focus .spec-container table td,
+body.accessory-focus .spec-container table td {
+ border-bottom: 1px solid #8F8F8F;
+ padding: 15px 20px;
+ width: 50%;
+}
+
+body.engine-focus .spec-container table tr td:first-child,
+body.interior-focus .spec-container table tr td:first-child,
+body.accessory-focus .spec-container table tr td:first-child {
+ font-weight: bold;
+}
diff --git a/styles/baseModel.css b/styles/baseModel.css
index 947834a..00ebfcb 100644
--- a/styles/baseModel.css
+++ b/styles/baseModel.css
@@ -6,7 +6,6 @@ body.ship-focus .default-content-wrapper {
max-width: 100%;
}
-/* stylelint-disable-next-line no-descending-specificity */
body.ship-focus .default-content-wrapper h1 + p {
max-height: 100vh;
display: block;
@@ -45,3 +44,47 @@ body.ship-focus .default-content-wrapper .sub-group p,
body.ship-focus .default-content-wrapper .block:last-child p:last-child {
width: 80%;
}
+
+body.ship-focus .default-content-wrapper .spec-container {
+ margin-top: 86px;
+}
+
+body.ship-focus .default-content-wrapper .spec-container h2 {
+ clear: both;
+}
+
+body.ship-focus .default-content-wrapper .spec-container table {
+ width: 100%;
+ margin-top: 37px;
+}
+
+body.ship-focus .default-content-wrapper .spec-container th {
+ font-size: 15px;
+ line-height: 24px;
+ font-weight: 400;
+ text-align: left;
+}
+
+body.ship-focus .default-content-wrapper .spec-container td {
+ font-size: 20px;
+ line-height: 26px;
+ font-weight: 600;
+}
+
+body.ship-focus .default-content-wrapper .info-container {
+ position: absolute;
+ top: 550px;
+ right: 130px;
+}
+
+body.ship-focus .default-content-wrapper .info-container .info-number {
+ font-size: 50px;
+ line-height: 70px;
+ font-weight: 300;
+}
+
+body.ship-focus .default-content-wrapper .info-container .info-text {
+ font-size: 15px;
+ line-height: 24px;
+ padding-left: 5px;
+}
diff --git a/styles/styles.css b/styles/styles.css
index 7ad651f..105ee89 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,4 +1,5 @@
@import url('baseModel.css');
+@import url('accessories.css');
:root {
/* colors */
@@ -96,6 +97,10 @@ p, dl, ol, ul, pre, blockquote {
margin-bottom: 1em;
}
+p {
+ font-size: var(--paragraph-font-size);
+}
+
code, pre {
font-family: var(--fixed-font-family);
font-size: var(--body-font-size-s);
@@ -236,9 +241,7 @@ main .section.highlight {
.default-content-wrapper .block {
display: flex;
- flex-direction: column;
- /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
- flex-wrap: wrap;
+ flex-flow: column wrap;
font-size: var(--paragraph-font-size);
line-height: 27px;
overflow: hidden;
@@ -285,134 +288,9 @@ main .section.highlight {
width: 100%;
}
-.default-content-wrapper .info-container {
- position: absolute;
- top: 550px;
- right: 130px;
-}
-
-.default-content-wrapper .info-container .info-number {
- font-size: 50px;
- line-height: 70px;
- font-weight: 300;
-}
-
-.default-content-wrapper .info-container .info-text {
- font-size: 15px;
- line-height: 24px;
- padding-left: 5px;
-}
-
.default-content-wrapper .info {
background-color: var(--background-color);
opacity: 0.9;
padding: 10px 20px;
margin-bottom: 20px;
}
-
-.default-content-wrapper .spec-container {
- margin-top: 86px;
-}
-
-.default-content-wrapper .spec-container h2{
- clear: both;
-}
-
-.default-content-wrapper .spec-container table {
- width: 100%;
- margin-top: 37px;
-}
-
-.default-content-wrapper .spec-container th {
- font-size: 15px;
- line-height: 24px;
- font-weight: 400;
- text-align: left;
-}
-
-.default-content-wrapper .spec-container td {
- font-size: 20px;
- line-height: 26px;
- font-weight: 600;
-}
-
-body.engine-focus .section,
-body.interior-focus .section,
-body.accessory-focus .section {
- padding: 0;
-}
-
-body.engine-focus .default-content-wrapper,
-body.interior-focus .default-content-wrapper,
-body.accessory-focus .default-content-wrapper {
- display: flex;
- height: 100%;
- max-width: 100%;
- flex-direction: row-reverse;
-}
-
-body.engine-focus .default-content-wrapper h1,
-body.interior-focus .default-content-wrapper h1,
-body.accessory-focus .default-content-wrapper h1 {
- font-size: var(--heading-font-size-l);
-}
-
-body.engine-focus .default-content-wrapper .group,
-body.interior-focus .default-content-wrapper .group,
-body.accessory-focus .default-content-wrapper .group {
- font-size: var(--paragraph-font-size);
- display: flex;
- justify-content: space-between;
- padding: 64px 102px 40px 56px;
- width: 50%;
- flex-direction: column;
- box-sizing: border-box;
-}
-
-body.engine-focus .default-content-wrapper .sub-group,
-body.interior-focus .default-content-wrapper .sub-group,
-body.accessory-focus .default-content-wrapper .sub-group {
- font-size: var(--paragraph-font-size);
- display: flex;
- flex-direction: column;
-}
-
-body.engine-focus .default-content-wrapper .sub-group h2,
-body.interior-focus .default-content-wrapper .sub-group h2,
-body.accessory-focus .default-content-wrapper .sub-group h2 {
- line-height: 26px;
- margin: 0;
- font-size: var(--paragraph-font-size);
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper .sub-group h2 + p,
-body.interior-focus .default-content-wrapper .sub-group h2 + p,
-body.accessory-focus .default-content-wrapper .sub-group h2 + p {
- line-height: 27px;
- margin-top: 30px;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper p:first-child,
-body.interior-focus .default-content-wrapper p:first-child,
-body.accessory-focus .default-content-wrapper p:first-child {
- margin: 0;
- height: 100vh;
- width: 50%;
- position: relative;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper p:first-child img,
-body.interior-focus .default-content-wrapper p:first-child img,
-body.accessory-focus .default-content-wrapper p:first-child img {
- height: 100vh;
- object-fit: cover;
- position: absolute;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-p {
- font-size: var(--paragraph-font-size);
-}