Chris Dill
98c8ce2180
- Pass in img size to help with load times and reduce layout shifts. - Rename gameProjectThumb.svelte to thumbnail.svelte.
52 lines
1.0 KiB
Svelte
52 lines
1.0 KiB
Svelte
<script>
|
|
import {onMount} from 'svelte';
|
|
import Thumb from '../components/thumbnail.svelte'
|
|
import Banner from '../components/banner.svelte'
|
|
|
|
let games = [
|
|
{
|
|
name: "Sirius",
|
|
link: "./sirius",
|
|
img: "https://placehold.it/600x300",
|
|
size: { width: 600, height: 300 },
|
|
description: "A 2D game about a wannabe space captain exploring the galaxy.",
|
|
},
|
|
{
|
|
name: "Quartz",
|
|
link: "./sirius",
|
|
img: "https://placehold.it/600x300",
|
|
size: { width: 600, height: 300 },
|
|
description: ""
|
|
}
|
|
]
|
|
|
|
onMount(async () => {
|
|
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
section {
|
|
border-radius: 5px;
|
|
padding: 5px 20px;
|
|
}
|
|
|
|
main {
|
|
margin-top: 30px;
|
|
}
|
|
</style>
|
|
|
|
<svelte:head>
|
|
<title>Quartznet</title>
|
|
</svelte:head>
|
|
|
|
<Banner/>
|
|
|
|
<main class="container">
|
|
<section>
|
|
{#each games as game}
|
|
<Thumb {...game}/>
|
|
{/each}
|
|
</section>
|
|
</main>
|