36 - Engine specs styling

Netcentric · Mar 6, 2024 · b3b5148 · b3b5148
1 parent 13d8176
commit b3b5148
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 128 deletions.
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -66,7 +66,7 @@ function addEngineSpecifications(specs) {
   <table>`;
   specContainer.innerHTML = content;
 
-  const parentElement = document.querySelector('body.engine-focus .default-content-wrapper');
+  const parentElement = document.querySelector('body .default-content-wrapper .sub-group');
   parentElement.appendChild(specContainer);
 }
 

diff --git a/styles/accessories.css b/styles/accessories.css
@@ -0,0 +1,102 @@
+
+
+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%;
+}
+
+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 {
+  height: 100vh;
+  object-fit: cover;
+}
+
+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
@@ -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
@@ -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,132 +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%;
-}
-
-/* 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;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-p {
-  font-size: var(--paragraph-font-size);
-}