feat: several style improvements

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>
-    <div class="post-content">
+    <h1 class="title">{entry.data.title}</h1>
+    <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>
-      <span class="post-date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
-      <div class="post-content">
+      <h1 class="title">{entry.data.title}</h1>
+      <span class="date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
+      <div class="content">
         <Content />
       </div>
 
@@ -51,4 +51,12 @@ const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/fea
     <a href="/blog">&larr; Back to posts</a>
   </div>
 
-</Layout>
+</Layout>
+<style>
+span.date {
+    color: #4c566a;
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+    display: block;
+}
+</style>