Something went wrong. Try again.
svelte astro
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263<script lang="ts"> import "@fontsource/silkscreen/400.css"; import Clear from "./Clear.svelte"; import Save from "./Save.svelte"; import { proyectState } from "../State.svelte";</script>
<div> <Clear /> <h1 data-text={proyectState.current!.name}>{proyectState.current!.name}</h1> <Save /></div>
<style> div { display: flex; justify-content: space-between; }
h1 { position: relative; font-family: "silkscreen", monospace; font-size: 2.5em; color: var(--surface); margin: 0; cursor: default; }
h1::before { content: attr(data-text); position: absolute; top: 0; left: 0; background: linear-gradient( -60deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--violet), var(--magenta), var(--red) ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 8px transparent; z-index: -1; animation: rainbow-move 20s linear infinite; }
@keyframes rainbow-move { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }</style>