Better heading styling

app/globals.css

@@ -121,41 +121,52 @@ dd {
 
 /* ── Prose (markdown) content ─────────────────────── */
 
-.prose h1 {
-  @apply text-3xl md:text-4xl;
-}
-
 .prose h2 {
   @apply text-2xl md:text-3xl;
+
+  &::before {
+    @apply content-['#'] text-accent mr-1;
+  }
 }
 
 .prose h3 {
   @apply text-xl md:text-2xl;
+
+  &::before {
+    @apply content-['##'] text-accent mr-1;
+  }
 }
 
 .prose h4 {
   @apply text-lg md:text-xl;
+
+  &::before {
+    @apply content-['###'] text-accent mr-1;
+  }
 }
 
 .prose h5 {
   @apply text-base md:text-lg;
+
+  &::before {
+    @apply content-['####'] text-accent mr-1;
+  }
 }
 
 .prose h6 {
   @apply text-sm md:text-base;
+
+  &::before {
+    @apply content-['#####'] text-accent mr-1;
+  }
 }
 
-.prose h1,
 .prose h2,
 .prose h3,
 .prose h4,
 .prose h5,
 .prose h6 {
   @apply font-bold mb-2 text-fg;
-
-  &::before {
-    @apply content-['#'] text-accent mr-1;
-  }
 }
 
 .prose code:not(pre code) {

components/content/ImageWrapper.tsx

@@ -9,7 +9,7 @@ type ImageWrapperProps = {
 
 export function ImageWrapper({ src, alt, isListing }: ImageWrapperProps) {
   return (
-    <figure className={cn('flex flex-col items-center gap-1 mb-4 w-full h-full')}>
+    <figure className={cn('flex flex-col items-center gap-1 mb-4 w-full', isListing && 'h-full')}>
       <div className="border border-border rounded-xl w-full overflow-hidden flex-1">
         <div
           className="flex items-center gap-2 px-2 h-6 border-b border-border w-full bg-fg/10"
@@ -25,11 +25,11 @@ export function ImageWrapper({ src, alt, isListing }: ImageWrapperProps) {
         <Image
           src={`/posts/${src}`}
           alt={alt ?? ''}
-          width={isListing ? 400 : 1800}
-          height={isListing ? 240 : 1200}
+          width={isListing ? 400 : 900}
+          height={isListing ? 240 : 600}
           quality={isListing ? 75 : 100}
           priority={true}
-          className="w-auto mx-auto object-cover h-full"
+          className="w-full mx-auto object-contain h-full max-h-150"
         />
       </div>
       {!isListing && alt && (