sucupira
48 lines
841 B
Svelte
48 lines
841 B
Svelte
<script lang="ts">
|
|
import type { Photo } from '$lib/types';
|
|
|
|
interface Props {
|
|
photo: Photo;
|
|
revealed?: boolean;
|
|
}
|
|
|
|
let { photo, revealed = false }: Props = $props();
|
|
</script>
|
|
|
|
<figure class="photo-panel">
|
|
<img src={photo.url} alt={photo.alt} loading="lazy" decoding="async" />
|
|
{#if revealed}
|
|
<figcaption>{photo.credit}</figcaption>
|
|
{/if}
|
|
</figure>
|
|
|
|
<style>
|
|
.photo-panel {
|
|
position: relative;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--oki-vert);
|
|
border-radius: var(--oki-radius);
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
figcaption {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0.4rem 0.8rem;
|
|
font-size: 0.72rem;
|
|
color: #fff;
|
|
background: linear-gradient(transparent, rgba(11, 61, 46, 0.85));
|
|
}
|
|
</style>
|