fix: resolved styling issues

Author: Kai-ros

app/components/BlogPostListCard.vue

@@ -22,7 +22,6 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <!-- TODO: Width is currently being constrained -->
   <article
     class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
   >

app/pages/blog/[slug].vue

@@ -19,7 +19,12 @@ useSeoMeta({
   <main class="container py-8 sm:py-12 w-full">
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
-      <div class="">I AM A WEAK HEADER</div>
+      <h2
+        v-if="post"
+        class="font-mono text-base font-medium text-fg group-hover:text-primary transition-colors hover:underline"
+      >
+        {{ post.title }}
+      </h2>
     </header>
 
     <article v-if="post" class="mx-auto text-base prose dark:prose-invert text-lg">

app/pages/blog/index.vue

@@ -3,8 +3,52 @@ const { data: posts } = await useAsyncData('blog-posts', () =>
   queryCollection('blog').where('draft', '<>', true).order('date', 'DESC').all(),
 )
 
-const placeHolder = ['atproto', 'atproto']
+const placeHolder = ['atproto', 'nuxt']
 
+definePageMeta({
+  name: 'blog',
+  // alias: ['/:path(.*)*'],
+})
+
+useSeoMeta({
+  title: () => $t('blog.title'),
+  description: () => $t('blog.description'),
+})
+</script>
+
+<template>
+  <main class="container py-8 sm:py-12 w-full">
+    <header class="mb-8 pb-8 border-b border-border flex place-content-center text-3xl">
+      <div class="">blog...</div>
+    </header>
+
+    <article v-if="posts && posts.length > 0" class="mx-30 space-y-4">
+      <BlogPostListCard
+        v-for="(post, idx) in posts"
+        :key="`${post.author}-${post.title}`"
+        :author="post.author || 'Roe'"
+        :title="post.title"
+        :path="post.slug"
+        :excerpt="post.excerpt || post.description || 'No Excerpt Available'"
+        :topics="Array.isArray(post.tags) ? post.tags : placeHolder"
+        :published="post.date"
+        :index="idx"
+        @focus="i => console.log('Hovered:', i)"
+      />
+      <!-- :selected="toSuggestionIndex(unifiedSelectedIndex) === idx" -->
+      <!-- :is-exact-match="
+                (exactMatchType === 'org' && suggestion.type === 'org') ||
+                (exactMatchType === 'user' && suggestion.type === 'user')
+              " -->
+      <!-- @focus="handleBlogPostSelect" -->
+      <!-- </div> -->
+    </article>
+
+    <article v-else class="text-center py-20 text-fg-subtle">No posts found.</article>
+  </main>
+</template>
+
+<!--
 // TODO: This should be extracted into a reusable form so search and blog post can both use it
 // function scrollToSelectedItem() {
 //   const pkgIndex = toPackageIndex(unifiedSelectedIndex.value)
@@ -85,52 +129,4 @@ const placeHolder = ['atproto', 'atproto']
 // function handleBlogPostSelect(index: number) {
 //   // Convert suggestion index to unified index
 //   unifiedSelectedIndex.value = -(suggestionCount.value - index)
-// }
-
-definePageMeta({
-  name: 'blog',
-  // alias: ['/:path(.*)*'],
-})
-
-useSeoMeta({
-  title: () => $t('blog.title'),
-  description: () => $t('blog.description'),
-})
-</script>
-
-<template>
-  <main class="container py-8 sm:py-12 w-full">
-    <header class="mb-8 pb-8 border-b border-border flex place-content-center text-3xl">
-      <div class="">blog...</div>
-    </header>
-
-    <article class="flex flex-col gap-6">
-      <div v-if="posts && posts.length > 0" class="max-w-3xl mx-auto mb-6 space-y-3">
-        <BlogPostListCard
-          v-for="(post, idx) in posts"
-          :key="`${post.author}-${post.title}`"
-          :author="post.author || 'Roe'"
-          :title="post.title"
-          :path="post.slug"
-          :excerpt="post.excerpt || post.description || 'No Excerpt Available'"
-          :topics="Array.isArray(post.tags) ? post.tags : placeHolder"
-          :published="post.date"
-          :index="idx"
-          @focus="i => console.log('Hovered:', i)"
-        />
-        <!-- :selected="toSuggestionIndex(unifiedSelectedIndex) === idx" -->
-        <!-- :is-exact-match="
-                (exactMatchType === 'org' && suggestion.type === 'org') ||
-                (exactMatchType === 'user' && suggestion.type === 'user')
-              " -->
-        <!-- @focus="handleBlogPostSelect" -->
-      </div>
-    </article>
-  </main>
-</template>
-
-<style>
-.container {
-  background: var(--bg-red);
-}
-</style>
+// } -->