testing
998 bytes View directory
1
<script lang="ts">2
import welcomeFallback from '$lib/images/svelte-welcome.png';3
import welcome from '$lib/images/svelte-welcome.webp';5
import Counter from './Counter.svelte';6
</script>8
<svelte:head>9
<title>Home</title>10
<meta name="description" content="Svelte demo app" />11
</svelte:head>13
<section>14
<h1>15
<span class="welcome">16
<picture>17
<source srcset={welcome} type="image/webp" />18
<img src={welcomeFallback} alt="Welcome" />19
</picture>20
</span>22
to your new<br />SvelteKit app23
</h1>25
<h2>26
try editing <strong>src/routes/+page.svelte</strong>27
</h2>29
<Counter />30
</section>32
<style>33
section {34
display: flex;35
flex-direction: column;36
justify-content: center;37
align-items: center;38
flex: 0.6;39
}41
h1 {42
width: 100%;43
}45
.welcome {46
display: block;47
position: relative;48
width: 100%;49
height: 0;50
padding: 0 0 calc(100% * 495 / 2048) 0;51
}53
.welcome img {54
position: absolute;55
width: 100%;56
height: 100%;57
top: 0;58
display: block;59
}60
</style>