design tweaks

public/media/icons/calendar-2iconImage24px.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_287_24406)" fill="currentColor"><path d="M18.4 3a1 1 0 1 0-2 0h2zm-2 3.6a1 1 0 1 0 2 0h-2zM7.6 3a1 1 0 0 0-2 0h2zm-2 3.6a1 1 0 0 0 2 0h-2zM3.586 20.414l-.707.707.707-.707zm16.828 0l-.707-.707.707.707zm0-15.028l.707-.707-.707.707zm-16.828 0l-.707-.707.707.707zM20 8.8V17h2V8.8h-2zM17 20H7v2h10v-2zM4 17V8.8H2V17h2zM7.001 5.8H16.998v-2H7.003v2zM21 9H3v2h18V9zm-4.6-6v3.6h2V3h-2zM5.6 3v3.6h2V3h-2zM7 20c-.971 0-1.599-.002-2.061-.064-.434-.059-.57-.153-.646-.229l-1.414 1.414c.51.51 1.138.709 1.793.797C5.3 22.002 6.085 22 7 22v-2zm-5-3c0 .915-.002 1.701.082 2.328.088.655.287 1.284.797 1.793l1.414-1.414c-.076-.076-.17-.212-.229-.646C4.002 18.6 4 17.971 4 17H2zm18 0c0 .971-.002 1.599-.064 2.061-.059.434-.153.57-.229.646l1.414 1.414c.51-.51.709-1.138.797-1.793C22.002 18.7 22 17.915 22 17h-2zm-3 5c.915 0 1.701.002 2.328-.082.655-.088 1.284-.287 1.793-.797l-1.414-1.414c-.076.076-.212.17-.646.229-.462.062-1.09.064-2.061.064v2zm5-13.2c0-.915.002-1.701-.082-2.328-.088-.655-.287-1.284-.797-1.793l-1.414 1.414c.076.076.17.212.229.646.062.462.064 1.09.064 2.061h2zm-5.001-3c.971 0 1.6.002 2.062.064.434.059.57.153.646.229l1.414-1.414c-.51-.51-1.138-.709-1.794-.797C18.7 3.798 17.914 3.8 17 3.8v2zM4 8.8c0-.971.002-1.599.064-2.061.059-.434.153-.57.229-.646L2.879 4.679c-.51.51-.709 1.138-.797 1.793C1.998 7.1 2 7.885 2 8.8h2zm3.001-5c-.915 0-1.701-.002-2.328.082-.656.088-1.285.287-1.794.797l1.414 1.414c.076-.076.212-.17.646-.229.463-.062 1.09-.064 2.062-.064v-2zM8.5 17.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/><path d="M17.5 17.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-9-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/><path d="M17.5 13.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></g><defs><clipPath id="clip0_287_24406"><path fill="currentColor" d="M0 0H24V24H0z"/></clipPath></defs></svg>

public/media/icons/usericonImage24px.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 21v-1.45c0-.977 0-1.465-.113-1.864a3 3 0 0 0-2.073-2.073c-.399-.113-.887-.113-1.864-.113h-6.9c-.977 0-1.465 0-1.864.113a3 3 0 0 0-2.073 2.073C4 18.085 4 18.573 4 19.55V21M16.2 7.06c0 2.245-1.88 4.065-4.2 4.065S7.8 9.305 7.8 7.06 9.68 2.996 12 2.996s4.2 1.82 4.2 4.064z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

public/media/icons/website-with-texticonImage24px.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect height="18" rx="2" width="18" x="3" y="3"/><path d="M3 7h18M7 11.5h10M7 16h6"/></g></svg>

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" }}>
+  <h3>
-    🗓️ <FormattedDate date={date} />
+    <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>
+      {
+        navLinks.map((link) => (
           <li>
-        <a href="/">📝 Blog</a>
+            <a
-      </li>
+              class={pathname === link.path ? "active-nav" : null}
-      <li>
+              href={link.path}
-        <a href="/about">👨‍💻 About</a>
+            >
+              <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);
 }