58 lines
1.3 KiB
Svelte
58 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
// Alfa Slab One is imported *here*, not globally, so the rest of the
|
|
// product doesn't pay for a display face it never uses.
|
|
import '@fontsource/alfa-slab-one/400.css';
|
|
|
|
interface Props {
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
let { size = 'md' }: Props = $props();
|
|
</script>
|
|
|
|
<span class="mark mark-{size}">
|
|
<svg class="bolt" viewBox="0 0 12 20" aria-hidden="true">
|
|
<path d="M7 0 L1 11 L5 11 L4 20 L11 8 L7 8 Z" />
|
|
</svg>
|
|
<span class="word">ELECTRIC CHERRY</span>
|
|
</span>
|
|
|
|
<style>
|
|
.mark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: 'Alfa Slab One', Georgia, serif;
|
|
color: var(--text-primary);
|
|
letter-spacing: 0.12em;
|
|
line-height: 1;
|
|
}
|
|
.mark-sm .word {
|
|
font-size: var(--text-sm);
|
|
letter-spacing: 1.5px;
|
|
}
|
|
.mark-md .word {
|
|
font-size: var(--text-md);
|
|
}
|
|
.mark-lg .word {
|
|
font-size: var(--text-2xl);
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.bolt {
|
|
fill: var(--accent-primary-hover);
|
|
filter: drop-shadow(0 0 5px rgba(124, 212, 255, 0.75));
|
|
}
|
|
.mark-sm .bolt {
|
|
width: 12px;
|
|
height: 20px;
|
|
}
|
|
.mark-md .bolt {
|
|
width: 14px;
|
|
height: 24px;
|
|
}
|
|
.mark-lg .bolt {
|
|
width: 22px;
|
|
height: 36px;
|
|
}
|
|
</style>
|