design tweaks

src/components/BlogHeader.astro

@@ -12,7 +12,17 @@ const { title, date } = Astro.props;
 
 <div class="blog-header">
   <h2>{title}</h2>
-  <h3 style={{ fontSize: "1.1rem" }}>
-    🗓️ <FormattedDate date={date} />
+  <h3>
+    <img src="/media/icons/calendar-2iconImage24px.svg" alt="" />
+    <FormattedDate date={date} />
   </h3>
 </div>
+
+<style>
+  h3 {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 1.1rem;
+  }
+</style>

src/components/Header.astro

@@ -1,16 +1,30 @@
 ---
+const { pathname } = Astro.url;
+console.log(pathname);
+
+const navLinks = [
+  { label: "Blog", icon: "website-with-texticonImage24px", path: "/" },
+  { label: "About", icon: "usericonImage24px", path: "/about" },
+];
 ---
 
 <header>
   <h1>Graham's Blog</h1>
   <nav>
     <ul>
-      <li>
-        <a href="/">📝 Blog</a>
-      </li>
-      <li>
-        <a href="/about">👨‍💻 About</a>
-      </li>
+      {
+        navLinks.map((link) => (
+          <li>
+            <a
+              class={pathname === link.path ? "active-nav" : null}
+              href={link.path}
+            >
+              <img src={`/media/icons/${link.icon}.svg`} />
+              <span>{link.label}</span>
+            </a>
+          </li>
+        ))
+      }
     </ul>
   </nav>
 </header>

src/pages/index.astro

@@ -14,5 +14,19 @@ const posts = await getCollection("blog");
       .slice(0, 5)
       .map((post) => <PostPreview post={post} />)
   }
-  {posts.length < 5 ? null : <a href="/archive">All Posts</a>}
+  {
+    posts.length < 5 ? null : (
+      <div class="more-posts">
+        <a class="link-button blue-btn" href="/archive">
+          All Posts
+        </a>
+      </div>
+    )
+  }
 </Layout>
+
+<style>
+  .more-posts {
+    text-align: center;
+  }
+</style>

src/pages/posts/[slug].astro

@@ -26,7 +26,7 @@ const { Content } = await post.render();
   </article>
 </Layout>
 
-<style is:global>
+<style>
   img {
     display: block;
     margin: auto;

src/styles/global.css

@@ -20,6 +20,8 @@
   --orange: #e56045;
   --text: #444444;
   --background: white;
+  --radius: 5px;
+  --shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 }
 
 .dark {
@@ -43,6 +45,12 @@ body {
 header {
   margin: 0;
   padding: 0.5rem 1rem;
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  justify-content: space-between;
+  align-items: center;
 }
 
 header h1 {
@@ -52,12 +60,33 @@ header h1 {
 nav ul {
   display: flex;
   justify-content: center;
-  gap: 1rem;
+  align-items: center;
+  gap: 1.5rem;
   padding: 0;
+  margin: 0;
+}
+
+nav ul li {
+  height: 40px;
+  align-items: center;
 }
 
 nav ul li a {
+  position: relative;
   font-size: 1.2rem;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.active-nav::before {
+  content: "";
+  position: absolute;
+  left: -10px;
+  width: 6px;
+  height: 6px;
+  border-radius: 10px;
+  background-color: var(--blue);
 }
 
 nav ul li::before {
@@ -112,7 +141,7 @@ code {
   color: var(--orange);
   border: lightgray solid 1px;
   padding: 2px 4px;
-  border-radius: 5px;
+  border-radius: var(--radius);
 }
 
 /* List Styles */
@@ -223,8 +252,9 @@ dialog {
 }
 
 .post-preview {
-  background: #f9f9f9;
+  background: white;
   padding: 0.1rem 1rem 1.5rem;
-  margin: 1rem 0;
+  margin: 0 0 1.5rem 0;
   border-radius: 5px;
+  border: 1px solid rgb(237, 237, 237);
 }