Blog: style blog page

src/components/Header.astro

@@ -30,7 +30,7 @@ import { SITE_TITLE } from '../consts';
             <HeaderLink href="/about">About</HeaderLink>
         </div>
         <div class="fun-quote" style="margin: 0">
-            <span style="font-family: PoetsenOne" class="text-2xl">ReLUwU activated</span>
+            <span style="font-family: var(--font-title);" class="text-2xl">ReLUwU activated</span>
         </div>
         <div class="social-links flex space-x-8 items-center">
             <HeaderLink

src/pages/blog/index.astro

@@ -7,7 +7,7 @@ import { getCollection } from 'astro:content';
 import FormattedDate from '../../components/FormattedDate.astro';
 
 const posts = (await getCollection('blog')).sort(
-	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+    (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
 );
 ---
 
@@ -18,7 +18,9 @@ const posts = (await getCollection('blog')).sort(
         <style>
             main {
                 width: 960px;
+                margin: auto;
             }
+
             ul {
                 display: flex;
                 flex-wrap: wrap;
@@ -30,6 +32,7 @@ const posts = (await getCollection('blog')).sort(
             ul li {
                 width: calc(50% - 1rem);
             }
+            /*
             ul li * {
                 text-decoration: none;
                 transition: 0.2s ease;
@@ -68,6 +71,7 @@ const posts = (await getCollection('blog')).sort(
             ul a:hover img {
                 box-shadow: var(--box-shadow);
             }
+            */
             @media (max-width: 720px) {
                 ul {
                     gap: 0.5em;
@@ -89,13 +93,31 @@ const posts = (await getCollection('blog')).sort(
         <Header />
         <main>
             <section>
+                <h1
+                    class="text-center text-4xl"
+                    style="font-family: var(--font-title);">
+                    Blogs!
+                </h1>
+                <p
+                    class="text-center m-6">
+                    A collection of tutorials and opinionated pieces. Have a
+                    read!
+                </p>
                 <ul>
                     {
                         posts.map((post) => (
                             <li>
                                 <a href={`/blog/${post.slug}/`}>
-									<img width={720} height={360} src={post.data.heroImage} alt="" />
-									<h4 class="title">{post.data.title}</h4>
+                                    <img
+                                        width={720}
+                                        height={360}
+                                        class="rounded-2xl grayscale"
+                                        src={post.data.heroImage}
+                                        alt="" />
+                                    <h4
+                                        class="title text-xl">
+                                        {post.data.title}
+                                    </h4>
                                     <p class="date">
                                         <FormattedDate date={post.data.pubDate} />
                                     </p>