blog: fix blog page

4 files changed, 32 insertions, 6 deletions

diff --git a/luax/blog/posts.lua b/luax/blog/posts.lua
index 7194706..f1d8408 100644
--- a/luax/blog/posts.lua
+++ b/luax/blog/posts.lua
@@ -3,6 +3,6 @@ return {
         title = "I (re)made JSX for Lua",
         slug = 'building-reluax',
         date = os.time({year=2024, month=1, day=13}),
-        description = "And rebuilt my website with it.",
+        description = "Because it was too good to pass up.",
     },
 }
diff --git a/luax/components/navbar.luax b/luax/components/navbar.luax
index 15b782e..4c0c54b 100644
--- a/luax/components/navbar.luax
+++ b/luax/components/navbar.luax
@@ -5,6 +5,7 @@ return function()
     <div class="navbar-container">
       <div class="navbar">
         <NavbarItem name="home" href="/">[Home]</NavbarItem>
+        <NavbarItem name="blog" href="/blog">[Blog]</NavbarItem>
         <NavbarItem name="games" href="/games">[Games]</NavbarItem>
         <NavbarItem name="projects" href="/projects">[Other Projects]</NavbarItem>
         <NavbarItem name="github" href="https://github.com/Duckonaut">[GitHub]</NavbarItem>
diff --git a/luax/pages/blog.luax b/luax/pages/blog.luax
index 26f9fc0..a729b63 100644
--- a/luax/pages/blog.luax
+++ b/luax/pages/blog.luax
@@ -5,11 +5,13 @@ return function()
   for _, post in ipairs(blogposts) do
     blogpost_html[#blogpost_html + 1] = 
     <div class="blog-post">
-      <div class="blog-post-title">
-        {$ post.title $}
-      </div>
-      <div class="blog-post-date">
-        {$ os.date('%Y-%m-%d', post.date) $}
+      <div class="blog-post-header">
+        <div class="blog-post-title">
+          <a href={"/blog/" .. post.slug}> {$ post.title $} </a>
+        </div>
+        <div class="blog-post-date">
+          {$ os.date('%Y-%m-%d', post.date) $}
+        </div>
       </div>
       <div class="blog-post-description">
         {$ post.description $}
diff --git a/luax/public/assets/blog.css b/luax/public/assets/blog.css
index f69e32e..9d0180c 100644
--- a/luax/public/assets/blog.css
+++ b/luax/public/assets/blog.css
@@ -63,6 +63,29 @@ td.line-number {
   text-align: center;
 }
 
+.blog-post-header {
+  align-items: center;
+  text-align: center;
+  margin: 0 auto;
+  max-width: 800px;
+  padding: 0 10px;
+}
+
+.blog-post-title {
+  font-size: 24pt;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+}
+
+.blog-post-date {
+  font-size: 12pt;
+  font-style: italic;
+  color: #647089;
+  margin: 0;
+  padding: 0;
+}
+
 @media (max-width: 480px) {
   .post-content {
       margin: auto;