| 1 | <script lang="ts"> |
| 2 | import svelteLogo from "./assets/svelte.svg"; |
| 3 | import Counter from "./lib/Counter.svelte"; |
| 4 | </script> |
| 5 | |
| 6 | <main> |
| 7 | <div class="flex justify-around"> |
| 8 | <a href="https://vitejs.dev" target="_blank" rel="noreferrer"> |
| 9 | <img src="/vite.svg" class="logo" alt="Vite Logo" /> |
| 10 | </a> |
| 11 | <a href="https://svelte.dev" target="_blank" rel="noreferrer"> |
| 12 | <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" /> |
| 13 | </a> |
| 14 | </div> |
| 15 | <h1>Vite + Svelte</h1> |
| 16 | |
| 17 | <div class="card"> |
| 18 | <Counter /> |
| 19 | </div> |
| 20 | |
| 21 | <p> |
| 22 | Check out <a |
| 23 | href="https://github.com/sveltejs/kit#readme" |
| 24 | target="_blank" |
| 25 | rel="noreferrer">SvelteKit</a |
| 26 | >, the official Svelte app framework powered by Vite! |
| 27 | </p> |
| 28 | |
| 29 | <p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p> |
| 30 | </main> |
| 31 | |
| 32 | <style> |
| 33 | .logo { |
| 34 | height: 6em; |
| 35 | padding: 1.5em; |
| 36 | will-change: filter; |
| 37 | } |
| 38 | .logo:hover { |
| 39 | filter: drop-shadow(0 0 2em #646cffaa); |
| 40 | } |
| 41 | .logo.svelte:hover { |
| 42 | filter: drop-shadow(0 0 2em #ff3e00aa); |
| 43 | } |
| 44 | .read-the-docs { |
| 45 | color: #888; |
| 46 | } |
| 47 | </style> |
huncholane