Visual adjustments

ghostty-org · Jan 7, 2025 · 42f0d52 · 42f0d52
1 parent fac8506
commit 42f0d52
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/pages/download/DownloadPage.module.css b/src/pages/download/DownloadPage.module.css
@@ -14,15 +14,19 @@
 
     & .pageTitle {
       text-align: center;
-      margin-bottom: 80px;
+      margin-bottom: 12px;
       font-size: 45px;
       @media(max-width: 1100px) {
         font-size: 38px;
-        margin-bottom: 48px;
       }
+    }
 
-      & > div {
-        font-size: 16px;
+    & .versionInfo {
+      color: var(--gray-6);
+      font-size: 16px;
+      margin-bottom: 80px;
+      @media(max-width: 1100px) {
+        margin-bottom: 48px;
       }
     }
   }

diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx
@@ -1,7 +1,7 @@
 import { ButtonLink } from "@/components/link";
 import { NavTreeNode } from "@/components/nav-tree";
 import SectionWrapper from "@/components/section-wrapper";
-import { H1 } from "@/components/text";
+import { H1, P, Span } from "@/components/text";
 import NavFooterLayout from "@/layouts/nav-footer-layout";
 import { fetchLatestGhosttyVersion } from "@/lib/fetch-latest-ghostty-version";
 import { loadDocsNavTreeData } from "@/lib/fetch-nav";
@@ -43,10 +43,18 @@ export default function DownloadPage({
         <SectionWrapper>
           <div className={s.header}>
             <Image src={SVGIMG} alt={""} />
-            <div className={s.pageTitle}>
-              <H1>Download Ghostty</H1>
-              <div><b>{ latestVersion }</b> (<a href={ "/docs/install/release-notes/" + latestVersion.replace(/\./g, "-") }>Release Notes</a>)</div>
-            </div>
+            <H1 className={s.pageTitle}>Download Ghostty</H1>
+            <P weight="regular" className={s.versionInfo}>
+              Version {latestVersion} -{" "}
+              <a
+                href={
+                  "/docs/install/release-notes/" +
+                  latestVersion.replace(/\./g, "-")
+                }
+              >
+                Release Notes
+              </a>
+            </P>
           </div>
           <div className={s.downloadCards}>
             <GenericCard