Improve prose & image styling

Author: willburden

astro.config.mjs

@@ -6,6 +6,8 @@ export default defineConfig({
     image: {
         responsiveStyles: true,
         layout: 'constrained',
+        objectFit: 'scale-down',
+        objectPosition: 'center',
         breakpoints: [400, 640, 750, 828, 1080, 1280, 1668, 2048, 2560],
     },
 });

src/components/BlogPost.astro

@@ -1,4 +1,6 @@
 ---
+import '../styles/prose.scss';
+
 import { render, type CollectionEntry } from 'astro:content'
 import formatDate from '../util/formatDate';
 import TagCluster from './TagCluster.astro';
@@ -19,11 +21,11 @@ const { Content } = await render(post);
         <h1>{post.data.title}</h1>
         <p>{pubDate}</p>
         {post.data.cover !== undefined &&
-            <Image src={post.data.cover} alt={post.data.coverAlt ?? null} />
+            <Image class="cover" src={post.data.cover} alt={post.data.coverAlt ?? null} />
         }
         <TagCluster />
     </header>
-    <div class="content">
+    <div class="prose">
         <Content />
     </div>
 </article>
@@ -51,8 +53,4 @@ const { Content } = await render(post);
             margin: 0;
         }
     }
-
-    .content {
-        line-height: $size-xl;
-    }
 </style>

src/components/TagCluster.astro

@@ -12,12 +12,11 @@
 
         li {
             display: inline-block;
-            margin: 0;
             padding: $space-sm;
 
             border: $border-thickness solid $color-subtle;
             border-radius: $border-radius;
-            box-shadow: 0 $border-thickness $color-subtle;
+            box-shadow: 0 2px $color-subtle;
         }
     }
 </style>

src/content/media/acoustic-guitar.jpg

@@ -1,6 +1,8 @@
 ---
 title: 'Building a blog with Astro and Sass'
 pubDate: 2025-10-23
+cover: '../media/walking-in-woods.jpg'
+coverAlt: 'A photo of someone walking through woods, taken from a distance behind. There are bright green and yellow leaves.'
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non lorem diam. Quisque vulputate nibh sodales eros pretium tincidunt. Aenean porttitor efficitur convallis. Nulla sagittis finibus convallis. Phasellus in fermentum quam, eu egestas tortor. Maecenas ac mollis leo. Integer maximus eu nisl vel sagittis.
@@ -19,4 +21,6 @@ Eget at nec:
 
 Etiam quis massa non massa sagittis accumsan eget at tellus. Quisque non fringilla magna, in tincidunt ligula. Nullam euismod, odio non luctus suscipit, neque quam mollis diam, in consequat augue mauris vitae nunc. Vestibulum consectetur quam ante. Donec vulputate dolor in odio ultricies, ut venenatis lorem luctus. Sed quis tellus risus. Nullam quis mi vitae nibh malesuada blandit. Duis sit amet tortor interdum, sodales est ut, pellentesque mi.
 
+![An acoustic guitar leaning against a bed with a complex tiling pattern.](../media/acoustic-guitar.jpg)
+
 Mauris non enim consectetur, ultrices lacus gravida, imperdiet lacus. Duis eget nulla nec turpis euismod laoreet. Nam tristique sem in elit lacinia tristique. Ut sem mi, suscipit quis nisi a, finibus ultrices eros. Donec sed ultricies est. Nullam volutpat metus sed dui lobortis tincidunt. Pellentesque rutrum maximus libero non luctus. Pellentesque id felis quis lacus varius tempus. Phasellus a est et justo mattis molestie a ac augue. Sed at purus erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec dapibus eget nulla eu venenatis. 

src/content/media/walking-in-woods.jpg

@@ -10,7 +10,7 @@ const posts = await getCollection("blog");
     <ul class="list-disc list-inside space-y-4">
         {posts.map((post) => (
             <li>
-                <a href={`/posts/${post.id}/`} class="underline">
+                <a href={`/posts/${post.id}/`}>
                     {post.data.title} ({post.data.pubDate.toDateString()})
                 </a>
             </li>

src/content/posts/building-a-blog.md

@@ -56,11 +56,14 @@ $shadow-blur: 6px;
 $border-thickness: 1px;
 $border-radius: 2px;
 
+$underline-thickness: 2px;
+
 // Colors
 
 $color-primary: #6d4c41;
 $color-primary-dark: #4c352d;
 $color-secondary: #3460bd;
+$color-subtle-light: #e2e2e2;
 $color-subtle: #c5c5c5;
 $color-subtle-dark:#7c7c7c;
 $color-neutral: #000000;

src/pages/index.astro

@@ -14,11 +14,6 @@
 
 h1, h2, h3, h4, h5, h6, p {
     padding-inline: $space-md;
-    @include space-between($space-md);
-}
-
-li {
-    @include space-between($space-sm);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -30,5 +25,5 @@ a {
     font-weight: bold;
     color: $color-secondary;
     text-decoration: underline;
-    text-decoration-thickness: 2px;
+    text-decoration-thickness: $underline-thickness;
 }

src/styles/_theme.scss

@@ -0,0 +1,19 @@
+@use './_theme' as *;
+
+.prose {
+    line-height: $size-xl;
+    
+    h1, h2, h3, h4, h5, h6, p {
+        @include space-between($space-md);
+    }
+    
+    li {
+        @include space-between($space-sm);
+    }
+
+    img {
+        display: block;
+        border-radius: $border-radius;
+        box-shadow: 0 $shadow-offset $shadow-blur $color-subtle;
+    }
+}