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 20:38:57 +02:00
1 parent 5af2d78328
commit efc2ad7da4
7 files changed
+54 -68
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/home/Insights.astro
+2 -9
View File
@@ -6,7 +6,7 @@ import { localePath, t, type Lang } from '../../i18n/ui';
interface Props { lang: Lang }
const { lang } = Astro.props;
const ui = t(lang);
const feed = (await getFeed()).slice(0, 2);
const feed = (await getFeed()).slice(0, 3);
const m = ui.insights.mention;
---
<section class="section insights" aria-labelledby="insights-title">
@@ -44,13 +44,6 @@ const m = ui.insights.mention;
)}
</li>
))}
<li class="insights__item">
<a class="insights__card insights__card--event" href={ui.insights.event.href} rel="noopener">
<Field seed={ui.insights.event.href} class="insights__panel"><span>{ui.insights.event.when}</span></Field>
<p class="small muted">{ui.insights.event.category}</p>
<h3 class="h3">{ui.insights.event.text}</h3>
</a>
</li>
</ul>
</div>
</section>
@@ -78,7 +71,7 @@ const m = ui.insights.mention;
.insights__card:hover h3 { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.12em; }
.insights__img, :global(.insights__img) { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--space-2); }
.insights__card h3 { max-width: 18em; }
/* No picture: a colour field carries the source (or the event date) in large type. */
/* No picture: a colour field carries the source in large type. */
:global(.insights__panel) {
aspect-ratio: 3 / 2;
margin-bottom: var(--space-2);
src/components/home/Proof.astro
+14 -48
View File
@@ -31,27 +31,14 @@ const logos = await Promise.all([
</ul>
<div class="partners">
<p class="small muted partners__label" id="partners-label">{ui.proof.partners}</p>
<p class="small muted" id="partners-label">{ui.proof.partners}</p>
<ul class="partners__list" role="list" aria-labelledby="partners-label">
{logos.map((l) => (
<li class="partners__item" data-partner>
<PartnerLogo name={l.name} src={l.src} url={l.url} h={l.h} />
</li>
))}
</ul>
</div>
{/* Variant B, for comparison: one column per partner across the full width, with its role.
Keep one of the two and delete the other. */}
<div class="partners-b">
<p class="small muted" id="partners-b-label">{ui.proof.partners}</p>
<ul class="partners-b__list" role="list" aria-labelledby="partners-b-label">
{logos.map((l) => (
<li class="partners-b__item" data-partner>
<PartnerLogo name={l.name} src={l.src} url={l.url} h={l.h} />
<p class="partners-b__text">
<span class="partners-b__name">{l.name}</span>
<span class="small partners-b__role">{l.role}</span>
<p class="partners__text">
<span class="partners__name">{l.name}</span>
<span class="small partners__role">{l.role}</span>
</p>
</li>
))}
@@ -74,23 +61,6 @@ const logos = await Promise.all([
.proof__name { font-weight: var(--weight-medium); }
.proof__body { max-width: 30em; }
.partners {
grid-column: 1 / -1;
margin-top: var(--space-9);
display: grid;
gap: var(--space-5);
}
.partners__list {
display: grid;
border-top: var(--hairline) solid var(--line);
}
.partners__item {
display: flex;
align-items: center;
min-height: var(--space-9);
padding: var(--space-5) var(--space-4);
border-bottom: var(--hairline) solid var(--line);
}
/* Hover answers the pointer with the logo's own ground: night, original colours. */
[data-partner] { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
@media (hover: hover) {
@@ -98,15 +68,14 @@ const logos = await Promise.all([
}
@media (prefers-reduced-motion: reduce) { [data-partner] { transition: none; } }
/* Variant B */
.partners-b {
.partners {
grid-column: 1 / -1;
margin-top: var(--space-9);
display: grid;
gap: var(--space-5);
}
.partners-b__list { display: grid; border-top: var(--hairline) solid var(--line); }
.partners-b__item {
.partners__list { display: grid; border-top: var(--hairline) solid var(--line); }
.partners__item {
display: grid;
align-content: space-between;
gap: var(--space-7);
@@ -114,22 +83,19 @@ const logos = await Promise.all([
padding: var(--space-6) var(--space-5);
border-bottom: var(--hairline) solid var(--line);
}
.partners-b__text { display: grid; gap: var(--space-1); }
.partners-b__name { font-weight: var(--weight-medium); }
.partners-b__role { color: var(--ink-muted); transition: color var(--dur-fast) var(--ease); }
.partners__text { display: grid; gap: var(--space-1); }
.partners__name { font-weight: var(--weight-medium); }
.partners__role { color: var(--ink-muted); transition: color var(--dur-fast) var(--ease); }
@media (hover: hover) {
.partners-b__item:hover .partners-b__role { color: var(--ink-muted-on-night); }
.partners__item:hover .partners__role { color: var(--ink-muted-on-night); }
}
@media (min-width: 48rem) {
.proof__title { grid-column: 1 / span 6; }
.proof__list { grid-column: 7 / span 6; }
.proof__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--gap); }
.partners { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.partners__label { grid-column: 1 / span 6; padding-top: var(--space-5); }
.partners__list { grid-column: 7 / span 6; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.partners-b__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--hairline) solid var(--line); }
.partners-b__item { border-bottom: 0; }
.partners-b__item + .partners-b__item { border-left: var(--hairline) solid var(--line); }
.partners__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--hairline) solid var(--line); }
.partners__item { border-bottom: 0; }
.partners__item + .partners__item { border-left: var(--hairline) solid var(--line); }
}
</style>