fix: get rid of gaps in the image grid, improve the zoom slightly

This commit is contained in:
dusk 2024-09-19 13:17:29 +03:00
parent 9050ae87c6
commit 9d0af743d0
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
2 changed files with 9 additions and 5 deletions

View File

@ -35,8 +35,6 @@
</div> </div>
</div> </div>
<div class="p-2 bg-gradient-to-tl to-ralsei-pink-neon/15 from-ralsei-pink-regular/20"> <div class="p-2 bg-gradient-to-tl to-ralsei-pink-neon/15 from-ralsei-pink-regular/20">
<div class="bg-opacity-100 pixelate-bg">
<slot /> <slot />
</div> </div>
</div>
</div> </div>

View File

@ -9,6 +9,12 @@ excerpt = "photos from my trip to japan"
export let data; export let data;
</script> </script>
<style>
picture {
margin: 0 !important;
}
</style>
## 1-16 / 09 / 2024 ## 1-16 / 09 / 2024
some photos i took while on a japan trip some photos i took while on a japan trip
@ -18,8 +24,8 @@ these are *not* sorted, have fun trying to figure out the actual order
<span class="text-xs italic">(i accidentally stripped the exif data and im too lazy to find the images again)</span> <span class="text-xs italic">(i accidentally stripped the exif data and im too lazy to find the images again)</span>
</p> </p>
<div class="grid gap-x-2 md:grid-cols-4"> <div class="grid gap-0.5 auto-rows-min md:grid-cols-4">
{#each data.images as src} {#each data.images as src}
<enhanced:img class="w-full h-full object-cover [transition:transform_.2s] md:hover:[transform:scale(2)]" {src}/> <enhanced:img class="w-full h-full object-cover [transition:transform_.4s] md:hover:[transform:scale(2.5)]" {src}/>
{/each} {/each}
</div> </div>