86 lines
1.6 KiB
Svelte
86 lines
1.6 KiB
Svelte
<script>
|
|
export let animated = true;
|
|
import LogoIcon from '$lib/icons/logo.svelte';
|
|
</script>
|
|
|
|
<div class="logo" class:animated>
|
|
<LogoIcon style="logo-glow" stroke="7px" size="85" />
|
|
<svg
|
|
id="logo-text"
|
|
width="760"
|
|
height="121"
|
|
viewBox="0 0 723.84009 116.720269"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
/>
|
|
<text xml:space="preserve" id="text" transform="translate(-278.77228,-206.83728)"
|
|
><tspan x="275.57227" y="292.17088" id="tspan1319"
|
|
><tspan id="tspan1317">Alaskar.dev</tspan></tspan
|
|
></text
|
|
>
|
|
</svg>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import '$lib/scss/breakpoints.scss';
|
|
.logo {
|
|
width: auto;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
gap: 0px;
|
|
align-items: center;
|
|
|
|
@include for-phone-only {
|
|
gap: 0px;
|
|
}
|
|
|
|
#logo-text {
|
|
width: auto;
|
|
height: 100%;
|
|
max-height: 28px;
|
|
|
|
#text {
|
|
transition: all 0.2s ease-in-out;
|
|
fill: var(--color--text);
|
|
}
|
|
}
|
|
#text tspan {
|
|
font-family: 'Font-Awesome-brands';
|
|
font-size: 106.667px;
|
|
}
|
|
|
|
&:hover {
|
|
#logo-text {
|
|
filter: drop-shadow(0px 0px 3px var(--color--primary));
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
.animated {
|
|
// #icon {
|
|
// > path {
|
|
// --text-color: var(--color--text-shade);
|
|
// stroke-width: 2;
|
|
// animation: svg-text-stroke 3s;
|
|
// }
|
|
//
|
|
// #darker {
|
|
// > path {
|
|
// --text-color: var(--color--text);
|
|
// stroke-width: 2;
|
|
// animation: svg-text-stroke 3s;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
#text {
|
|
animation: svg-text-stroke 3s;
|
|
stroke-width: 2;
|
|
--text-color: var(--color--text);
|
|
}
|
|
}
|
|
}
|
|
</style>
|