mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 20:15:27 +00:00
65fe960af0
Use the least amount of image formats and sizes: - WebP for images - Avif with JPEG fallback for pictures
54 lines
1.6 KiB
Plaintext
54 lines
1.6 KiB
Plaintext
---
|
|
import { Picture } from 'astro-imagetools/components';
|
|
|
|
import type { CollectionEntry } from 'astro:content';
|
|
interface Props {
|
|
entries: CollectionEntry<'journal'>[];
|
|
}
|
|
|
|
import { animation } from '../data/site';
|
|
|
|
import { pickTwoRandomColors } from '../utils';
|
|
import { Link, Subsubheadline } from '../components';
|
|
|
|
const { entries } = Astro.props;
|
|
---
|
|
|
|
<ul
|
|
class="col-span-full grid auto-rows-[50px] grid-cols-[repeat(auto-fit,_minmax(100px,_1fr))] grid-rows-[50px] gap-[max(25px,_2vw)]"
|
|
>
|
|
{
|
|
entries.map(({ slug, data }) => (
|
|
<li class="journal-card image-shadow group" {...animation}>
|
|
<Link title={data.title} href={`/${slug}/`} class="relative block h-full w-full">
|
|
<div class="absolute z-10 flex h-full w-full flex-col items-center justify-center p-10 text-center leading-tight text-white">
|
|
<Subsubheadline class="!m-0 leading-tight">{data.title}</Subsubheadline>
|
|
</div>
|
|
{data.cover ? (
|
|
<>
|
|
{data.cover.endsWith('.svg') ? (
|
|
<img src={data.cover} alt={data.title} />
|
|
) : (
|
|
<Picture
|
|
alt={data.title}
|
|
aspect={0.6}
|
|
breakpoints={[300, 500, 1000]}
|
|
format={['avif']}
|
|
src={data.cover}
|
|
/>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div
|
|
class="h-full w-full scale-105 bg-gray-800 blur-sm brightness-[80%] filter transition duration-300 ease-in-out group-hover:brightness-[90%] dark:brightness-[50%] dark:group-hover:brightness-[100%]"
|
|
style={`background-image: linear-gradient(to bottom left, ${
|
|
pickTwoRandomColors()[0]
|
|
} 0%, ${pickTwoRandomColors()[1]} 100%)`}
|
|
/>
|
|
)}
|
|
</Link>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|