fklement/homepage_relaunch
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

asdf

Browse Source
This commit is contained in:
Felix Klement committed 2026-10-04 19:40:32 +02:00
1 parent 933de1c5a8
commit 018f27156c
11 files changed
+249 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/_InsightsIndex.astro
+28 -28
View File
@@ -2,6 +2,7 @@
import { feedType, feedTypes, getFeed } from '../data/insights';
import { Picture } from 'astro:assets';
import Base from '../layouts/Base.astro';
import Field from '../components/Field.astro';
import { formatDate, localePath, t, type Lang } from '../i18n/ui';
interface Props { lang: Lang }
@@ -45,19 +46,25 @@ const filters = [
{feed.map((item) => item.kind === 'post' ? (
<li class="post" data-type={feedType(item)}>
<a class="post__link" href={localePath(lang, `/insights/${item.entry.id}`)} lang={item.entry.data.lang !== lang ? item.entry.data.lang : undefined}>
<div class="post__media">
<Picture
src={item.entry.data.cover}
alt={item.entry.data.coverAlt}
formats={['avif']}
fallbackFormat="webp"
widths={[400, 640, 960]}
sizes="(min-width: 48rem) 40vw, 100vw"
loading="lazy"
decoding="async"
class="post__img img-doc"
/>
</div>
{item.entry.data.cover ? (
<div class="post__media">
<Picture
src={item.entry.data.cover}
alt={item.entry.data.coverAlt!}
formats={['avif']}
fallbackFormat="webp"
widths={[400, 640, 960]}
sizes="(min-width: 48rem) 40vw, 100vw"
loading="lazy"
decoding="async"
class="post__img img-doc"
/>
</div>
) : (
<Field seed={item.entry.id} class="post__media post__field">
<span class="field__title" aria-hidden="true">{item.entry.data.category}</span>
</Field>
)}
<div class="post__text">
<p class="small muted post__meta">
<span>{item.entry.data.category}</span>
@@ -73,10 +80,10 @@ const filters = [
) : (
<li class="post" data-type={feedType(item)}>
<a class="post__link" href={localePath(lang, `/insights/${item.entry.id}`)} lang={item.entry.data.lang !== lang ? item.entry.data.lang : undefined}>
<div class="post__media mention__panel" aria-hidden="true">
<span class="mention__source">{item.entry.data.source}</span>
<span class="mention__platform">{item.entry.data.platform}</span>
</div>
<Field seed={item.entry.id} class="post__media post__field">
<span class="field__title" aria-hidden="true">{item.entry.data.source}</span>
<span class="field__meta" aria-hidden="true">{item.entry.data.platform}</span>
</Field>
<div class="post__text">
<p class="small muted post__meta">
<span>{m.category(item.entry.data.platform)}</span>
@@ -141,17 +148,10 @@ const filters = [
.post__img, :global(.post__img) { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.post__text { display: grid; gap: var(--space-4); align-content: start; }
.post__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* A mention has no cover: a typographic panel names who posted it and where. */
.mention__panel {
display: flex;
flex-direction: column;
justify-content: space-between;
aspect-ratio: 3 / 2;
padding: var(--space-5);
background: var(--paper-deep);
}
.mention__source { font-size: var(--step-title); line-height: var(--leading-title); letter-spacing: var(--track-h2); color: var(--ink-muted); }
.mention__platform { font-size: var(--step-small); line-height: var(--leading-small); color: var(--ink-muted); }
/* No cover (every mention, an essay without one): a colour field names who posted it and where. */
:global(.post__field) { aspect-ratio: 3 / 2; gap: var(--space-2); }
:global(.post__field) .field__title { font-size: var(--step-title); line-height: var(--leading-title); letter-spacing: var(--track-h2); }
:global(.post__field) .field__meta { font-size: var(--step-small); line-height: var(--leading-small); }
.mention__summary { max-width: var(--measure); }
@media (min-width: 48rem) {
.post__link { grid-template-columns: 5fr 7fr; }
src/pages/_Post.astro
+3 -3
View File
@@ -31,10 +31,10 @@ const d = post.data;
</div>
</header>
<div class="container">
{d.cover && <div class="container">
<Picture
src={d.cover}
alt={d.coverAlt}
alt={d.coverAlt!}
formats={['avif']}
fallbackFormat="webp"
widths={[640, 960, 1440, 1920]}
@@ -43,7 +43,7 @@ const d = post.data;
decoding="async"
class="post__cover img-doc"
/>
</div>
</div>}
<div class="section container grid">
<div class="prose post__body">