29 lines
1.2 KiB
Plaintext
29 lines
1.2 KiB
Plaintext
---
|
|
import Base from '../../layouts/Base.astro';
|
|
import { getArtikel } from '../../lib/data.js';
|
|
export async function getStaticPaths(){
|
|
const artikel = await getArtikel();
|
|
return artikel.map(a => ({ params:{ slug:a.slug }, props:{ a } }));
|
|
}
|
|
const { a } = Astro.props;
|
|
---
|
|
<Base title={a.titel}>
|
|
<article class="wrap article">
|
|
<a href="/#magazin" class="back">← Zurück zum Magazin</a>
|
|
<time>{new Date(a.datum).toLocaleDateString('de-DE',{day:'2-digit',month:'long',year:'numeric'})}</time>
|
|
<h1>{a.titel}</h1>
|
|
<p class="teaser">{a.teaser}</p>
|
|
<img src={a.bild_url} alt={a.titel}/>
|
|
<div class="body">{a.inhalt.split('\n').map(p => p.trim() && <p>{p}</p>)}</div>
|
|
</article>
|
|
<style>
|
|
.article{max-width:760px;padding-top:26px}
|
|
.back{color:var(--slate);font-weight:600;font-size:.9rem}
|
|
.article time{display:block;margin-top:18px;color:var(--slate);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
|
|
.article h1{font-size:clamp(2rem,4vw,3rem);margin:.2em 0 .3em}
|
|
.teaser{font-size:1.2rem;color:var(--graphit)}
|
|
.article img{width:100%;border-radius:16px;margin:24px 0;aspect-ratio:16/9;object-fit:cover}
|
|
.body p{font-size:1.05rem;color:var(--ink);margin:0 0 1.1em}
|
|
</style>
|
|
</Base>
|