41 lines
1.2 KiB
Svelte
41 lines
1.2 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>
|