chore: 404-page path more accurate variable

package.json

@@ -16,7 +16,7 @@
     "@astrojs/node": "^9.2.1",
     "@astrojs/rss": "^4.0.1",
     "@astrojs/sitemap": "^3.3.1",
-    "@fontsource/space-mono": "^5.2.5",
+    "@fontsource-variable/jetbrains-mono": "^5.2.5",
     "astro": "^5.2.5",
     "fuse.js": "^7.0.0",
     "sharp": "^0.34.1",

pnpm-lock.yaml

@@ -23,7 +23,7 @@ importers:
       '@astrojs/sitemap':
         specifier: ^3.3.1
         version: 3.3.1
-      '@fontsource/space-mono':
+      '@fontsource-variable/jetbrains-mono':
         specifier: ^5.2.5
         version: 5.2.5
       astro:
@@ -548,8 +548,8 @@ packages:
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
 
-  '@fontsource/space-mono@5.2.5':
-    resolution: {integrity: sha512-yFU6K17ko4LEDHl5554n6mCrmDbuc2xYGCZZkCRpAvRtCaJisUjxFdDdph2d2hiIElaiMlinmkmV8IWlbQCMJA==}
+  '@fontsource-variable/jetbrains-mono@5.2.5':
+    resolution: {integrity: sha512-G3sN1xq1moZd0JL+hFaA4MEdsiQS+JXC/z7m+EqA5/Fzn5CQlXGUaaNKFGQdDsFuLTnCfW0KOOSWHjygNfjEPw==}
 
   '@hapi/hoek@9.3.0':
     resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==}
@@ -3755,7 +3755,7 @@ snapshots:
 
   '@fastify/busboy@2.1.1': {}
 
-  '@fontsource/space-mono@5.2.5': {}
+  '@fontsource-variable/jetbrains-mono@5.2.5': {}
 
   '@hapi/hoek@9.3.0': {}
 

src/layouts/Layout.astro

@@ -47,7 +47,7 @@ const { title = pageTitle, description = siteConfig.description, ogImage = "" }
         </div>
         
         <nav class="nav">
-          <a href="/">Home</a>
+          <a href="/" class="home">~</a>
           <a href="/blog">Blog</a>
           {navBarItems.map((item) => <a href={item.link}>{item.text}</a>)}
         </nav>

src/pages/404.astro

@@ -1,14 +1,14 @@
 ---
 import Layout from '../layouts/Layout.astro';
 
-const url = Astro.url.pathname
+const notFoundPath = Astro.url.pathname
 ---
 
 <Layout title="404" description="Page not found">
   <h1 class="title">command not found.</h1>
   
   <div class="content">
-    <p class="typewriter">sh: <span class="path">~{url}</span>: command not found.</p>
+    <p class="typewriter">sh: <span class="path">~{notFoundPath}</span>: command not found.</p>
     
     <div style="margin-top: 2rem;">
       <span class="command">help</span>

src/pages/blog.astro

@@ -17,7 +17,7 @@ posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDat
       <div style="margin-top: 1rem; margin-left: 1rem;">
         {posts.map((post) => (
           <p>
-            <span style="color: #4c566a">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
+            <span style="color: #d8d8d8">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
             <a href={`/post/${post.slug}`}>{post.data.title}</a>
           </p>
         ))}

src/styles/global.css

@@ -1,22 +1,24 @@
-@import url(@fontsource/space-mono);
+@import url(@fontsource-variable/jetbrains-mono);
 /* Global Styles for Terminal Blog */
 :root {
   /* Dark theme (default) */
   --bg-color: #2e3440;
   --text-color: #d8dee9;
+  --footer-text-color: #c8c8c8;
   --accent-color: #90a8c0;
   --border-color: #3b4351;
   --header-color: #eceff4;
   --terminal-green: #a3be8c;
   --terminal-yellow: #ebcb8b;
   --terminal-red: #bf616a;
-  --font-mono: 'Space Mono',ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-mono: 'JetBrains Mono',ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 /* Light theme */
 @media (prefers-color-scheme: light) {
   :root:not([data-theme="dark"]) {
     --bg-color: #eceff4;
     --text-color: #2e3440;
+    --footer-text-color: #4c566a;
     --accent-color: #486090;
     --border-color: #d1d5db;
     --header-color: #2e3440;
@@ -29,6 +31,7 @@
 :root[data-theme="light"] {
   --bg-color: #eceff4;
   --text-color: #2e3440;
+  --footer-text-color: #4c566a;
   --accent-color: #486090;
   --border-color: #d1d5db;
   --header-color: #2e3440;
@@ -90,8 +93,7 @@ main {
 }
 
 .content-box {
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border: 1px solid var(--accent-color);
   padding: 2rem;
   margin-bottom: 2rem;
   transition: border-color 0.3s ease;
@@ -104,14 +106,16 @@ main {
 }
 
 .nav a {
-  font-size: 1.1rem;
+  font-size: 1rem;
 }
 
 .nav a::before {
   content: "./";
   opacity: 0.7;
 }
-
+.nav a.home::before{
+  content: "";
+}
 .cursor {
   display: inline-block;
   width: 0.6em;
@@ -130,8 +134,8 @@ main {
   text-align: center;
   padding: 2rem 0;
   font-size: 0.9rem;
-  color: var(--text-color);
-  opacity: 0.7;
+  font-weight: 300;
+  color: var(--footer-text-color);
 }
 
 .footer svg {