drop cap component

src/lib/Dropcap.svelte

@@ -0,0 +1,41 @@
+<script>
+    // Usage: <Dropcap word="Lorem">ipsum dolor sit amet...</Dropcap>
+
+    export let word;
+    const initial = word.slice(0, 1);
+    const remainder = word.slice(1);
+
+    // a few letters are narrower at the top, so we need more of a shift
+    const shiftValues = {
+        A: '-0.45em',
+        L: '-0.3em',
+        R: '-0.25em',
+    };
+
+    const shift = shiftValues[initial] || '0em';
+</script>
+
+<style>
+    .drop-cap {
+        text-transform: uppercase;
+        color: #8c0606;
+/*        box-sizing: border-box;*/
+        font-size: calc(var(--content-size) * var(--content-line-height) * 1.9);
+        float: left;
+        font-family: serif;
+        line-height: 0.8;
+        margin-right: 0.1em;
+        display: block;
+    }
+
+    .first-word {
+        margin-left: var(--shift);
+    }
+</style>
+
+<p>
+    <span class="drop-cap">{initial}</span>
+    <span class="first-word" style:--shift={shift}>{remainder}</span>
+    <slot></slot>
+</p>
+