drop cap component
This commit is contained in:
parent
ce411549ad
commit
1972c5714c
41
src/lib/Dropcap.svelte
Normal file
41
src/lib/Dropcap.svelte
Normal file
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user