Skip to content

Instantly share code, notes, and snippets.

@silentworks
Created April 27, 2020 18:55
Show Gist options
  • Save silentworks/8d3060eb5bd16f06e02ef6c0661b4517 to your computer and use it in GitHub Desktop.
Save silentworks/8d3060eb5bd16f06e02ef6c0661b4517 to your computer and use it in GitHub Desktop.
<script>
import { onMount } from 'svelte'
let borat
const imgLoaded = (img) => img.complete && img.naturalHeight !== 0
onMount(() => {
console.info(imgLoaded(borat))
})
</script>
<style>
h1, figure, p {
text-align: center;
margin: 0 auto;
}
h1 {
font-size: 2.8em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.5em 0;
}
figure {
margin: 0 0 1em 0;
}
img {
width: 100%;
max-width: 400px;
margin: 0 0 1em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
h1 {
font-size: 4em;
}
}
</style>
<svelte:head>
<title>Sapper project template</title>
</svelte:head>
<h1>Great success!</h1>
<figure>
<img bind:this={borat} alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>
<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment