feat: several style improvements

package.json

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

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@astrojs/sitemap':
         specifier: ^3.3.1
         version: 3.3.1
+      '@fontsource/space-mono':
+        specifier: ^5.2.5
+        version: 5.2.5
       astro:
         specifier: ^5.2.5
         version: 5.7.10(@azure/identity@4.9.1)(@types/node@22.15.3)(rollup@4.40.1)(typescript@5.8.3)(yaml@2.7.1)
@@ -545,6 +548,9 @@ packages:
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
 
+  '@fontsource/space-mono@5.2.5':
+    resolution: {integrity: sha512-yFU6K17ko4LEDHl5554n6mCrmDbuc2xYGCZZkCRpAvRtCaJisUjxFdDdph2d2hiIElaiMlinmkmV8IWlbQCMJA==}
+
   '@hapi/hoek@9.3.0':
     resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==}
 
@@ -3749,6 +3755,8 @@ snapshots:
 
   '@fastify/busboy@2.1.1': {}
 
+  '@fontsource/space-mono@5.2.5': {}
+
   '@hapi/hoek@9.3.0': {}
 
   '@hapi/topo@5.1.0':

src/pages/[...slug].astro

@@ -14,8 +14,8 @@ const { Content } = await entry.render();
 ---
 
 <Layout title={`${entry.data.title} | Terminal Blog`} path={`/var/log/${entry.slug}`} description={entry.data.description} >
-    <h1 class="post-title">{entry.data.title}</h1>
+    <h1 class="title">{entry.data.title}</h1>
-    <div class="post-content">
+    <div class="content">
         <Content/>
     </div>
 </Layout>

src/pages/blog.astro

@@ -7,9 +7,9 @@ posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDat
 ---
 
 <Layout title="Blog | Terminal Blog">
-  <h1 class="post-title">~/blog</h1>
+  <h1 class="title">~/blog</h1>
   
-  <div class="post-content">
+  <div class="content">
     <p class="typewriter">Posts from the terminal.</p>
     
     <div style="margin-top: 2rem;">
@@ -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: var(--terminal-yellow);">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span> 
+            <span style="color: #4c566a">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
             <a href={`/post/${post.slug}`}>{post.data.title}</a>
           </p>
         ))}

src/pages/index.astro

@@ -4,9 +4,9 @@ import Layout from '../layouts/Layout.astro';
 ---
 
 <Layout title="Home | Terminal Blog">
-  <h1 class="post-title">~/</h1>
+  <h1 class="title">~/</h1>
   
-  <div class="post-content">
+  <div class="content">
     Not much here yet, but you can check out my blog posts <a href="/blog">here</a>.
     <br />
     If you are site owner, please edit <code>src/pages/index.astro</code> to customize this page.

src/pages/post/[...slug].astro

@@ -39,9 +39,9 @@ const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/fea
   description={entry.data.description}
   ogImage={cover}
 >
-      <h1 class="post-title">{entry.data.title}</h1>
+      <h1 class="title">{entry.data.title}</h1>
-      <span class="post-date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
+      <span class="date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
-      <div class="post-content">
+      <div class="content">
         <Content />
       </div>
 
@@ -52,3 +52,11 @@ const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/fea
   </div>
 
 </Layout>
+<style>
+span.date {
+    color: #4c566a;
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+    display: block;
+}
+</style>

src/styles/global.css

@@ -1,39 +1,40 @@
+@import url(@fontsource/space-mono);
 /* Global Styles for Terminal Blog */
 :root {
   /* Dark theme (default) */
-  --bg-color: #1f2937;
+  --bg-color: #2e3440;
-  --text-color: #a5b4cf;
+  --text-color: #d8dee9;
-  --accent-color: #64a0ff;
+  --accent-color: #81a1c1;
   --border-color: #3b4351;
-  --header-color: #83a2ce;
+  --header-color: #2e3440;
-  --terminal-green: #4ade80;
+  --terminal-green: #a3be8c;
-  --terminal-yellow: #fbbf24;
+  --terminal-yellow: #ebcb8b;
-  --terminal-red: #ef4444;
+  --terminal-red: #bf616a;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-mono: 'Space 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: #f3f4f6;
+    --bg-color: #eceff4;
-    --text-color: #374151;
+    --text-color: #2e3440;
-    --accent-color: #3b82f6;
+    --accent-color: #81a1c1;
     --border-color: #d1d5db;
-    --header-color: #1f2937;
+    --header-color: #2e3440;
-    --terminal-green: #059669;
+    --terminal-green: #a3be8c;
-    --terminal-yellow: #d97706;
+    --terminal-yellow: #ebcb8b;
-    --terminal-red: #dc2626;
+    --terminal-red: #bf616a;
   }
 }
 /* Light theme override (for switch) */
 :root[data-theme="light"] {
-  --bg-color: #f3f4f6;
+  --bg-color: #eceff4;
-  --text-color: #374151;
+  --text-color: #2e3440;
-  --accent-color: #3b82f6;
+  --accent-color: #81a1c1;
   --border-color: #d1d5db;
-  --header-color: #1f2937;
+  --header-color: #2e3440;
-  --terminal-green: #059669;
+  --terminal-green: #a3be8c;
-  --terminal-yellow: #d97706;
+  --terminal-yellow: #ebcb8b;
-  --terminal-red: #dc2626;
+  --terminal-red: #bf616a;
 }
 
 
@@ -47,10 +48,13 @@ html, body {
   font-family: var(--font-mono);
   background-color: var(--bg-color);
   color: var(--text-color);
-  line-height: 1.6;
+  line-height: 1.5;
   height: 100%;
   width: 100%;
   transition: background-color 0.3s ease, color 0.3s ease;
+  text-align: left;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 a {
@@ -146,7 +150,6 @@ main {
   padding: 15px;
 }
 
-
 #toTopBtn {
   display: none;
   background: var(--border-color);
@@ -177,27 +180,47 @@ main {
   color: var(--bg-color);
 }
 
-
+/* Contents */
-
+h1.title {
-/* Post styles */
-.post-title {
   color: var(--header-color);
-  margin-bottom: 1rem;
+  font-size: 1.75rem;
-  font-size: 1.5rem;
+  font-weight: bold;
-  font-weight: normal;
+  margin-bottom: 0.5rem;
 }
-
+div.content {
-.post-date {
-  color: var(--terminal-yellow);
-  font-size: 0.9rem;
-  margin-bottom: 1.5rem;
-  display: block;
-}
-
-.post-content {
   margin-bottom: 2rem;
+
+  ul, ol, li {
+    list-style-position: inside;
+  }
+  ul {
+    padding-left: 20px;
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+  }
+  ul li {
+    padding-left: 0.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.3;
+  }
+
+  pre {
+    padding: 1rem;
+  }
+  /* Highlighted Code Blocks */
+  pre.astro-code,
+  pre.astro-code span {
+    background-color: #3b4252 !important;
+  }
+
+  h1, h2, h3, h4 {
+    margin: 0.5rem 0;
+    line-height: 1.3;
+  }
 }
 
+
+
 /* Terminal Commands */
 .command {
   color: var(--terminal-green);