fix(content): numerous content and design issues (nodejs#2727)

forgeRW · Sep 8, 2022 · ee88ffb · ee88ffb
1 parent 5e69f00
commit ee88ffb
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 36 deletions.
diff --git a/src/components/Article/index.module.scss b/src/components/Article/index.module.scss
@@ -1,9 +1,14 @@
 .article {
-  max-width: 980px;
+  max-width: 768px;
   overflow-wrap: break-word;
-  padding: var(--space-80) 0 var(--space-24) var(--space-128);
+  padding: var(--space-48) var(--space-32) 0 var(--space-32);
   width: calc(100vw - 36rem);
 
+  @media (min-width: 1400px) {
+    max-width: 980px;
+    padding: var(--space-80) var(--space-32) var(--space-24) var(--space-128);
+  }
+
   .headline {
     margin: 0 0 var(--space-40) 0;
     padding: 0;

diff --git a/src/components/Header/index.module.scss b/src/components/Header/index.module.scss
@@ -146,7 +146,7 @@
         justify-content: flex-end;
         position: relative;
 
-        @media (max-width: 800px) {
+        @media (max-width: 1100px) {
           display: none;
         }
       }

diff --git a/src/components/Hero/__tests__/__snapshots__/index.test.tsx.snap b/src/components/Hero/__tests__/__snapshots__/index.test.tsx.snap
@@ -24,15 +24,17 @@ exports[`Hero component renders correctly 1`] = `
           href="https://nodejs.org/dist/mmock-version-2/node-mmock-version-2.tar.gz"
         >
           Download Node (LTS)
+          <span>
+            Version mmock-version-2
+          </span>
         </a>
         <p
           class="t-caption"
         >
-          Version mock-version-1 - 
           <a
             href="https://nodejs.org/dist/mock-version-1/node-mock-version-1.tar.gz"
           >
-            Get Current
+            Download Latest (mock-version-1)
           </a>
         </p>
       </div>

diff --git a/src/components/Hero/index.module.scss b/src/components/Hero/index.module.scss
@@ -67,6 +67,7 @@
   box-sizing: border-box;
   color: var(--black0);
   display: flex;
+  flex-direction: column;
   font-weight: var(--font-weight-semibold);
   height: 5.6rem;
   justify-content: center;
@@ -76,6 +77,11 @@
   transition: background-color 0.2s ease-out;
   width: 20rem;
 
+  span {
+    color: var(--black4);
+    font-size: var(--font-size-body3);
+  }
+
   &:hover {
     background-color: var(--brand7);
     color: var(--black0);
@@ -100,17 +106,21 @@
 }
 
 :global(.dark) {
-  .download-button__inverse {
-    color: var(--black0);
+  .download-button {
+    &__inverse {
+      color: var(--black0);
+    }
   }
 }
 
 :global(.light) {
-  .download-button__inverse {
-    color: var(--brand6);
+  .download-button {
+    &__inverse {
+      color: var(--brand6);
 
-    &:hover {
-      color: var(--black0);
+      &:hover {
+        color: var(--black0);
+      }
     }
   }
 }
diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
@@ -19,11 +19,9 @@ const Hero = ({
   const { getDownloadLink } = useDetectOs();
 
   const [currentRelease, ...releases] = nodeReleasesLTSVersion;
+  const currentLTS = releases.find(release => !!release.lts) || currentRelease;
 
-  // find first lts version (first found is last LTS)
-  const lastLTSRelease = releases.find((release): boolean => !!release.lts);
-
-  const ltsVersionUrl = getDownloadLink(lastLTSRelease?.version || '');
+  const ltsVersionUrl = getDownloadLink(currentLTS?.version || '');
   const currentVersionUrl = getDownloadLink(currentRelease?.version || '');
 
   return (
@@ -34,17 +32,19 @@ const Hero = ({
         <div className={styles.downloadLtsContainer}>
           <a className={styles.downloadButton} href={ltsVersionUrl}>
             <FormattedMessage id="components.hero.downloadLts" />
+            <span>
+              <FormattedMessage
+                id="components.hero.currentVersion"
+                values={{ version: currentLTS.version }}
+              />
+            </span>
           </a>
           <p className="t-caption">
-            <FormattedMessage
-              id="components.hero.currentVersion"
-              values={{
-                isLts: !!lastLTSRelease,
-                currentVersion: currentRelease.version,
-              }}
-            />
             <a href={currentVersionUrl}>
-              <FormattedMessage id="components.hero.getCurrent" />
+              <FormattedMessage
+                id="components.hero.getCurrent"
+                values={{ version: currentRelease.version }}
+              />
             </a>
           </p>
         </div>

diff --git a/src/components/NavigationSection/index.module.scss b/src/components/NavigationSection/index.module.scss
@@ -32,6 +32,10 @@
       display: flex;
     }
 
+    svg {
+      padding: 0;
+    }
+
     i {
       padding: 0;
     }

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -34,8 +34,8 @@
   "components.header.links.download": "Download",
   "components.header.links.community": "Community",
   "components.hero.downloadLts": "Download Node (LTS)",
-  "components.hero.currentVersion": "{isLts, select, true {Version {currentVersion} - }other {}}",
-  "components.hero.getCurrent": "Get Current",
+  "components.hero.currentVersion": "Version {version}",
+  "components.hero.getCurrent": "Download Latest ({version})",
   "components.hero.learn": "Learn Node",
   "components.installTabs.readDocs": "Read documentation",
   "components.pagination.previous": "Prev",

diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
@@ -34,8 +34,8 @@
   "components.header.links.download": "Download",
   "components.header.links.community": "Community",
   "components.hero.downloadLts": "Download Node (LTS)",
-  "components.hero.currentVersion": "{isLts, select, true {Version {currentVersion} - }other {}}",
-  "components.hero.getCurrent": "Get Current",
+  "components.hero.currentVersion": "Version {version}",
+  "components.hero.getCurrent": "Download Latest ({version})",
   "components.hero.learn": "Learn Node",
   "components.installTabs.readDocs": "Read documentation",
   "components.pagination.previous": "Prev",

diff --git a/src/pages/__tests__/__snapshots__/index.test.tsx.snap b/src/pages/__tests__/__snapshots__/index.test.tsx.snap
@@ -26,15 +26,17 @@ exports[`Home page renders correctly 1`] = `
           href="https://nodejs.org/dist/mmock-version-2/node-mmock-version-2.tar.gz"
         >
           Download Node (LTS)
+          <span>
+            Version mmock-version-2
+          </span>
         </a>
         <p
           class="t-caption"
         >
-          Version mock-version-1 - 
           <a
             href="https://nodejs.org/dist/mock-version-1/node-mock-version-1.tar.gz"
           >
-            Get Current
+            Download Latest (mock-version-1)
           </a>
         </p>
       </div>
@@ -366,15 +368,17 @@ exports[`Home page renders i18n when feature toggle is present 1`] = `
           href="https://nodejs.org/dist/mmock-version-2/node-mmock-version-2.tar.gz"
         >
           Download Node (LTS)
+          <span>
+            Version mmock-version-2
+          </span>
         </a>
         <p
           class="t-caption"
         >
-          Version mock-version-1 - 
           <a
             href="https://nodejs.org/dist/mock-version-1/node-mock-version-1.tar.gz"
           >
-            Get Current
+            Download Latest (mock-version-1)
           </a>
         </p>
       </div>

diff --git a/src/styles/containers.scss b/src/styles/containers.scss
@@ -1,12 +1,9 @@
 .home-container {
-  --section-margin-bottom: 340px;
   margin: 0 auto;
   margin-bottom: var(--space-80);
+  max-width: 960px;
   position: relative;
-
-  @media (min-width: 1100px) {
-    max-width: 960px;
-  }
+  --section-margin-bottom: 340px;
 
   @media (max-width: 1100px) {
     max-width: 800px;