lukeonline

commit ab9287051ab1adb689aeeaff2a2f291c95c6b379
parent c337c485bb87f9d74c31028015bb25c7e61d127c
Author: LukeJ <luke.jones.2567@gmail.com>
Date:   Wed, 15 Jul 2026 20:21:17 +0100

feat: styling

Diffstat:
M
src/components/Header.astro
 | 
16
+++++++++-------
M
src/content/blog/example1.md
 | 
1
+
M
src/content/blog/example2.md
 | 
1
+
M
src/layouts/Base.astro
 | 
2
+-
M
src/layouts/ContentList.astro
 | 
7
+++++--
M
src/pages/blog/index.astro
 | 
5
++++-

6 files changed, 21 insertions(+), 11 deletions(-)
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,13 +1,15 @@
 ---
 const { title } = Astro.props;
+
+const linkStyling = "hover:bg-gray-300 grow text-center"
 ---
-<header class="mb-4 flex flex-col gap-1">
+<header class="flex flex-col gap-1">
   <h1 class="text-2xl font-bold">Luke Jones</h1>
-  <nav class="flex flex-row gap-6">
-    <a href="/">Home</a>
-    <a href="/projects">Projects</a>
-    <a href="/blog">Blog</a>
-    <a href="/photos">Photos</a>
-    <a href="/about">About</a>
+  <nav class="flex flex-row justify-between">
+    <a class={linkStyling} href="/">Home</a>
+    <a class={linkStyling} href="/projects">Projects</a>
+    <a class={linkStyling} href="/blog">Blog</a>
+    <a class={linkStyling} href="/photos">Photos</a>
+    <a class={linkStyling} href="/about">About</a>
   </nav>
 </header>
diff --git a/src/content/blog/example1.md b/src/content/blog/example1.md
@@ -2,5 +2,6 @@
 title: Example Blog 1
 desc: An example of a blog
 date: 2026-01-01
+slug: 20260101
 ---
 This is an example blog post
diff --git a/src/content/blog/example2.md b/src/content/blog/example2.md
@@ -2,5 +2,6 @@
 title: Example Blog 2
 desc: An example of another blog
 date: 2026-01-02
+slug: 20260102
 ---
 This is another example blog post
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -13,7 +13,7 @@ const { ...props } = Astro.props;
 <html class="bg-gray-200">
   <Head title={`${SITE_TITLE} - ${props.title}`} />
   <body class="w-full md:w-192 m-auto mt-8 text-base p-8">
-    <div class="border-solid border-1 p-8 bg-white">
+    <div class="border-solid border-1 p-8 bg-white flex flex-col gap-4">
       <Header />
       <main>
         <slot />
diff --git a/src/layouts/ContentList.astro b/src/layouts/ContentList.astro
@@ -2,12 +2,15 @@
 import Base from "./Base.astro";
 
 const { ...props } = Astro.props;
+
+const postStyling = "flex flex-col bg-gray-100 " +
+  "p-1 pl-3 pr-3 hover:bg-gray-300 "
 ---
 <Base title={props.title}>
   <slot />
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-3">
     {props.content.map(post => (
-      <a class="flex flex-col">
+      <a class={postStyling} href={post.link}>
         <span>{post.title}</span>
         <span class="text-sm font-light">{post.desc}</span>
       </a>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -8,9 +8,12 @@ const title = "Blog";
 
 const posts = await getCollection('blog');
 
+const postViewUrl = "/blog/"
+
 const contentData = posts.map((post) => ({
   title: post.data.title,
-  desc: `${post.data.desc} - ${post.data.date.toLocaleDateString()}`
+  desc: `${post.data.desc} - ${post.data.date.toLocaleDateString()}`,
+  link: `${postViewUrl}${post.data.slug}`
 }));
 
 console.log('POSTS: ', posts)