Alexander
955f893b13
CI / update (push) Successful in 25s
Add theme cycling (system/light/dark) with localStorage persistence and FOUC prevention. Restructure CSS color tokens to respond to data-theme attribute across all components. Redesign header as a floating glass pill bar with smooth view transitions including clip-reveal logo animation.
30 lines
765 B
Svelte
30 lines
765 B
Svelte
<script lang="ts">
|
|
import "$lib/css/shake.css"
|
|
let { icon, ...restProps } = $props<{ icon: string, [key: string]: any }>();
|
|
</script>
|
|
<style>
|
|
a{
|
|
font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji;
|
|
font-size: 2rem;
|
|
text-decoration: none;
|
|
padding: 0.5em;
|
|
background-color: var(--nord4);
|
|
border-radius: var(--radius-pill);
|
|
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:global(:root:not([data-theme="light"])) a {
|
|
background-color: var(--accent-dark);
|
|
}
|
|
}
|
|
:global(:root[data-theme="dark"]) a {
|
|
background-color: var(--accent-dark);
|
|
}
|
|
a:hover{
|
|
--angle: 15deg;
|
|
animation: shake 0.5s ease forwards;
|
|
}
|
|
|
|
</style>
|
|
<a href="/rezepte/icon/{icon}" {...restProps} >{icon}</a>
|