AdrianoDev
510d7ca4ec
Primo passo della separazione sito / piattaforme decisa da Adriano il 03/09: due applicazioni autosufficienti, senza workspace di root, cosi' che ognuna resti un progetto Astro completo ed estraibile. Qui non cambia niente del codice: solo la radice. I pattern del .gitignore che avevano una barra erano ancorati alla radice e dopo lo spostamento non avrebbero piu' coperto niente (data/*.db*, uploads/*): resi validi a qualunque profondita'. Suite: 45 file, 347 test verdi prima e dopo lo spostamento. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EndnceRA5WnA6rvA5iV9WL
61 lines
3.2 KiB
Plaintext
61 lines
3.2 KiB
Plaintext
---
|
|
import type { ImageMetadata } from 'astro';
|
|
import { trainings } from '../../data/trainings';
|
|
import T from '../content/T.astro';
|
|
import TImg from '../content/TImg.astro';
|
|
import { t } from '../../lib/content';
|
|
// `items` permette di mostrare solo una parte dei training (le viste di /training):
|
|
// senza, la fascia di card resterebbe l'elenco intero sopra ai blocchi filtrati.
|
|
interface Props { items?: readonly (typeof trainings)[number][] }
|
|
const { items = trainings } = Astro.props;
|
|
const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/training-*.{jpg,png}', { eager: true });
|
|
const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1].default;
|
|
const tones = ['taupe', 'tan', 'dark', 'charcoal'];
|
|
// riga 1 (training 0-1): card, foto | riga 2 (training 2-3): foto, card
|
|
const isSwapRow = (i: number) => Math.floor(i / 2) % 2 === 1;
|
|
---
|
|
<section class="tcards">
|
|
{items.map((tr, i) => {
|
|
const img = imgOf(tr.image);
|
|
const card = (
|
|
<div class:list={['tcards__cell', `tcards__cell--${tones[i % tones.length]}`]} data-reveal="fade" style={`--reveal-delay:${(i % 2) * 0.15}s`}>
|
|
<T tag={`training.${tr.id}.title`} as="h3" />
|
|
<T tag={`training.${tr.id}.caption`} as="p" />
|
|
<a class="tcards__link" href={tr.cta.href}><T tag="home.training-cards.link-label" as="span" /> →</a>
|
|
</div>
|
|
);
|
|
const photo = img ? (
|
|
<div class="tcards__photo" data-reveal="fade" style={`--reveal-delay:${((i % 2) * 0.15 + 0.1).toFixed(2)}s`}>
|
|
<TImg tag={`training.${tr.id}.image`} src={img} alt={t(`training.${tr.id}.title`)} class="tcards__img" widths={[400, 700]} sizes="(max-width: 767px) 50vw, 25vw" />
|
|
</div>
|
|
) : null;
|
|
return isSwapRow(i) ? <>{photo}{card}</> : <>{card}{photo}</>;
|
|
})}
|
|
</section>
|
|
|
|
<style>
|
|
.tcards { display: grid; grid-template-columns: repeat(4, 1fr); }
|
|
.tcards__cell { padding: 48px 36px; display: flex; flex-direction: column; justify-content: center; aspect-ratio: 1; }
|
|
.tcards__cell--taupe { background: #6b5d5b; }
|
|
.tcards__cell--dark { background: var(--c-dark); }
|
|
.tcards__cell--charcoal { background: #27252a; }
|
|
.tcards__cell--taupe h3, .tcards__cell--taupe p,
|
|
.tcards__cell--dark h3, .tcards__cell--dark p,
|
|
.tcards__cell--charcoal h3, .tcards__cell--charcoal p { color: #efe9e3; }
|
|
.tcards__cell--tan { background: var(--c-accent); }
|
|
.tcards__cell--tan h3, .tcards__cell--tan p { color: #fff; }
|
|
.tcards__cell h3 { text-transform: uppercase; letter-spacing: .12em; }
|
|
.tcards__cell p { font-size: .88rem; }
|
|
.tcards__link { color: #fff; font-family: var(--font-heading); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; margin-top: 18px; }
|
|
.tcards__photo { overflow: hidden; }
|
|
.tcards__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .5s ease; }
|
|
.tcards__photo:hover .tcards__img { transform: scale(1.06); }
|
|
@media (max-width: 767px) {
|
|
.tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.tcards__cell { padding: 22px 16px; }
|
|
.tcards__cell h3 { font-size: 1rem; letter-spacing: .08em; }
|
|
.tcards__cell p { font-size: .74rem; }
|
|
.tcards__link { font-size: .62rem; letter-spacing: .14em; margin-top: 12px; }
|
|
}
|
|
</style>
|