make dropcap switchable between ascender/descender

src/components/Post.astro

@@ -47,7 +47,7 @@ h1 {
 .subtitle {
     font-size: 0.85em;
     font-style: italic;
-    margin-top: -1rem;
+    margin-top: -0.5rem;
 }
 
 .post {
@@ -76,15 +76,25 @@ footer {
     }
 }
 
-article :global(section.post::first-letter) {
-    initial-letter: 2;
-    margin-right: 0.5rem;
-    color: var(--accent-color);
-    font-family: 'Baskervville';
+article {
+    & :global(section.post::first-letter) {
+        font-family: 'Baskervville';
+        color: var(--accent-color);
+    }
+
+    &[data-dropcap-style="descender"] :global(section.post::first-letter) {
+        initial-letter: 2;
+        margin-right: 0.5rem;
+    }
+
+    &[data-dropcap-style="ascender"] :global(section.post::first-letter) {
+        font-size: 2em;
+        line-height: 1;
+    }
 }
 </style>
 
-<article class="prose">
+<article class="prose" data-dropcap-style={entry.data.dropcap}>
     <header class="title">
         <h1>
             <!-- <SmallCaps text={entry.data.title} upperWeight={500} lowerWeight={800} /> -->

src/content.config.ts

@@ -11,7 +11,7 @@ const posts = defineCollection({
         title: z.string(),
         date: z.date(),
         draft: z.boolean().default(false),
-        dropcap: z.boolean().default(true),
+        dropcap: z.enum(['ascender', 'descender']).default('descender'),
         toc: z.boolean().default(true),
     })
 });