small tweaks to blog list

calimania · Jan 24, 2025 · 4cf89d7 · 4cf89d7
1 parent c6aa475
commit 4cf89d7
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro
@@ -48,33 +48,31 @@ const blogPage: { data: Page } | undefined = pages.find(
   }}
 >
   <Header activeNav="blog" store={store} />
-  <main id="main-content">
-    <section id="about" class="mb-10 max-w-3xl prose-img:border-0">
-      {
-        blogPage?.data?.SEO?.socialImage && (
-          <HeroImage
-            image={blogPage?.data?.SEO?.socialImage}
-            title={blogPage?.data?.Title}
-          />
-        )
-      }
-      <h1 class="text-2xl tracking-wider sm:text-3xl">
-        {blogPage?.data?.Title}
-      </h1>
-    </section>
+  <section id="about" class="mb-10 max-w-3xl prose-img:border-0">
+    {
+      blogPage?.data?.SEO?.socialImage && (
+        <HeroImage
+          image={blogPage?.data?.SEO?.socialImage}
+          title={blogPage?.data?.Title}
+        />
+      )
+    }
+    <h1 class="text-2xl tracking-wider sm:text-3xl">
+      {blogPage?.data?.Title}
+    </h1>
+  </section>
 
-    <section class="">
-      <BlocksRenderer
-        content={blogPage?.data?.Content || ([] as BlocksContent[])}
-      />
-    </section>
-    <Hr />
-  </main>
+  <section class="">
+    <BlocksRenderer
+      content={blogPage?.data?.Content || ([] as BlocksContent[])}
+    />
+  </section>
+  <Hr />
   <Main
     pageTitle={blogPage?.data?.SEO?.metaTitle || "Articles"}
     pageDesc={blogPage?.data?.SEO?.metaDescription || "Articles"}
   >
-    <ul>
+    <ul class="blog-list">
       {
         paginatedPosts.map(({ data }) => (
           <Card

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -187,6 +187,25 @@ button.brand-yellow:hover {
     @apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
   }
 }
+.content-page {
+  max-width: 1024px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ul.blog-list {
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ul.blog-list li {
+  width: 100%;
+}
+
+ul.blog-list li .aspect-video {
+  aspect-ratio: 16/6;
+}
 .content-page h1, h2, h3, h4 {
   margin-top: 1em;
 }