Hugging Face's logo

coyotte508
/
bergere-enchantee

Model card Files Community
3
bergere-enchantee
File size: 1,419 Bytes 
34660c6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
012a5bd
34660c6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<script lang="ts">
	import Container from '$lib/components/Container.svelte';
	import Picture from '$lib/components/Picture.svelte';
	import Masonry from '$lib/components/Masonry.svelte';
	import type { PageData } from './$types';

	export let data: PageData;

	const pictures = data.pictures.map((p) => ({ ...p, loaded: false }));
</script>

<Container class="my-4">
	<h1 class="text-4xl text-oxford mb-3">Tissus et finitions</h1>
	<Masonry>
		{#each pictures as picture}
			<a
				href="/photos/raw/{picture.storage[0]._id}"
				class="relative picture-link"
				data-title={picture.name}
			>
				<Picture
					sizes="(min-width: 1024px) 33vw, (min-width: 675px) 50vw, 100vw"
					{picture}
					class="max-w-full {picture.loaded ? 'loaded' : ''}"
					loading="lazy"
				/>
			</a>
		{/each}
	</Masonry>
</Container>

<style>
	.picture-link {
		overflow: hidden;
	}

	.picture-link::after {
		position: absolute;
		content: attr(data-title);
		text-align: center;
		left: 0;
		right: 0;
		bottom: 1rem;
		color: white;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		font-size: 2rem;
		opacity: 0.4;
		transition-duration: 400ms;
	}

	:global(.picture-link img) {
		transition-duration: 400ms;
		transform: scale(0);
	}

	:global(.picture-link img.loaded) {
		transform: scale(1);
	}

	:global(.picture-link:hover img.loaded) {
		transform: scale(1.2);
	}

	.picture-link:hover::after {
		opacity: 1;
	}
</style>