Update dependencies and component paths
This commit is contained in:
parent
bd1ad91efd
commit
23641c16e2
15 changed files with 92 additions and 115 deletions
43
src/lib/Thumbnail.svelte
Normal file
43
src/lib/Thumbnail.svelte
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script lang="ts">
|
||||
export let name: string;
|
||||
export let link: string;
|
||||
export let img = "https://placehold.it/600x300";
|
||||
export let size = { width: 600, height: 300 };
|
||||
export let description: string;
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<div class="back">
|
||||
<a href={link}>
|
||||
<img src={img} alt={name} width={size.width} height={size.height} />
|
||||
</a>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h2>{name}</h2>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<style>
|
||||
.card {
|
||||
display: flex;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.back a img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.description {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 978px) {
|
||||
.card {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue