Make sure posts are always sorted by latest first

src/components/PostList.astro

@@ -13,7 +13,7 @@ const posts = (
     'blog',
     (entry) => filterFn(entry) && (import.meta.env.DEV || !entry.data.draft)
   )
-).sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());
+).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
 ---
 
 {
@@ -34,4 +34,71 @@ const posts = (
   #no-posts-found {
     text-align: center;
   }
+
+  /* The following styling rules have been adopted from:
+  https://github.com/codrops/LineHoverStyles/ */
+
+  @media (min-width: 640px) {
+    .post-list a {
+      position: relative;
+      outline: none;
+      cursor: pointer;
+      text-decoration: none;
+      white-space: nowrap;
+    }
+
+    .post-list a:focus {
+      outline: 2px solid rgba(255, 255, 255, 0.4);
+      outline-offset: 3px;
+    }
+
+    .post-list a:focus:not(:focus-visible) {
+      background: transparent;
+    }
+
+    .post-list a:focus-visible {
+      color: rgba(255, 255, 255, 0.4);
+      outline: 2px solid rgba(255, 255, 255, 0.4);
+      outline-offset: 3px;
+      background: transparent;
+    }
+
+    .post-list a:hover {
+      outline: none;
+      color: rgba(255, 255, 255, 0.4);
+    }
+
+    .post-list a::before,
+    .post-list a::after {
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      background: currentColor;
+      top: 100%;
+      left: 0;
+      pointer-events: none;
+    }
+
+    .post-list a::before {
+      content: '';
+      transform-origin: 0% 50%;
+      transform: scale3d(0, 1, 1);
+      transition: transform 0.3s;
+    }
+
+    .post-list a:hover::before {
+      transform: scale3d(1, 1, 1);
+    }
+
+    .post-list a::after {
+      content: '';
+      top: calc(100% + 4px);
+      transition: transform 0.3s;
+      transform-origin: 100% 50%;
+    }
+
+    .post-list a:hover::after {
+      transform: scale3d(0, 1, 1);
+    }
+  }
 </style>