56 lines
2.2 KiB
Vue
56 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{ size?: number }>();
|
|
</script>
|
|
|
|
<template>
|
|
<svg
|
|
class="app-logo"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 32 32"
|
|
:width="size ?? 24"
|
|
:height="size ?? 24"
|
|
aria-hidden="true"
|
|
>
|
|
<defs>
|
|
<linearGradient id="logo-gradient" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="var(--color-primary-solid)" />
|
|
<stop offset="100%" stop-color="var(--color-primary-deep)" />
|
|
</linearGradient>
|
|
</defs>
|
|
<!-- Book body -->
|
|
<path class="logo-book" d="M4 7 C4 7 8 5 16 6 C24 5 28 7 28 7 L28 26 C28 26 24 24 16 25 C8 24 4 26 4 26 Z" stroke-width="0.5"/>
|
|
<!-- Book spine -->
|
|
<line class="logo-spine" x1="16" y1="6" x2="16" y2="25" stroke-width="0.8"/>
|
|
<!-- Left page lines -->
|
|
<line class="logo-lines" x1="7" y1="11" x2="14" y2="10.5" stroke-width="0.6" stroke-linecap="round"/>
|
|
<line class="logo-lines" x1="7" y1="14" x2="14" y2="13.5" stroke-width="0.6" stroke-linecap="round"/>
|
|
<line class="logo-lines" x1="7" y1="17" x2="14" y2="16.5" stroke-width="0.6" stroke-linecap="round"/>
|
|
<line class="logo-lines" x1="7" y1="20" x2="12" y2="19.5" stroke-width="0.6" stroke-linecap="round"/>
|
|
<!-- Right page lines -->
|
|
<line class="logo-lines" x1="18" y1="10.5" x2="25" y2="11" stroke-width="0.6" stroke-linecap="round"/>
|
|
<line class="logo-lines" x1="18" y1="13.5" x2="25" y2="14" stroke-width="0.6" stroke-linecap="round"/>
|
|
<line class="logo-lines" x1="18" y1="16.5" x2="25" y2="17" stroke-width="0.6" stroke-linecap="round"/>
|
|
<!-- Magic spark -->
|
|
<g transform="translate(24, 5)">
|
|
<path d="M0 -4 L1 -1 L4 0 L1 1 L0 4 L-1 1 L-4 0 L-1 -1 Z" fill="#f6ad55"/>
|
|
<path d="M0 -2.5 L0.6 -0.6 L2.5 0 L0.6 0.6 L0 2.5 L-0.6 0.6 L-2.5 0 L-0.6 -0.6 Z" fill="#fbd38d"/>
|
|
</g>
|
|
<!-- Secondary sparkles -->
|
|
<circle cx="20" cy="3" r="0.7" fill="#f6ad55" opacity="0.7"/>
|
|
<circle cx="27" cy="8" r="0.5" fill="#fbd38d" opacity="0.6"/>
|
|
</svg>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.logo-book {
|
|
fill: url(#logo-gradient);
|
|
stroke: color-mix(in srgb, var(--color-primary) 70%, transparent);
|
|
}
|
|
.logo-spine {
|
|
stroke: var(--color-text-secondary);
|
|
}
|
|
.logo-lines {
|
|
stroke: var(--color-text-muted);
|
|
}
|
|
</style>
|