diff options
| -rw-r--r-- | luax/blog/posts.lua | 2 | ||||
| -rw-r--r-- | luax/components/navbar.luax | 1 | ||||
| -rw-r--r-- | luax/pages/blog.luax | 12 | ||||
| -rw-r--r-- | luax/public/assets/blog.css | 23 |
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; |