ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: CTAO brand redesign (official tokens, Inter+Space Grotesk, logo), spec-based nav/footer, EN UI, card covers + featured lead, mock badges, Sveltia logo; remove fake demo articles

Browse Source
This commit is contained in:
ctao
2026-07-24 22:09:13 +02:00
parent 778ab25063
commit 02f30af010
11 changed files with 452 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+22 -13
View File
@@ -5,23 +5,32 @@ import Base from '../layouts/Base.astro';
const posts = (await getCollection('news', ({ data }) => !data.draft)).sort(
(a, b) => b.data.date.valueOf() - a.data.date.valueOf(),
);
const fmt = (d) => new Intl.DateTimeFormat('pl-PL', { dateStyle: 'long' }).format(d);
const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
const iso = (d) => d.toISOString().slice(0, 10);
---
<Base title="CTAO Portal — Newsy" description="Aktualności obserwatorium CTAO">
<section class="container hero">
<div class="eyebrow">Cherenkov Telescope Array Observatory</div>
<h1>Aktualności i ogłoszenia</h1>
<p>Najnowsze informacje z sieci teleskopów CTAO. Treść zarządzana przez edytorów w graficznym CMS-ie, publikowana jako statyczna strona.</p>
<Base title="CTAO Science Portal — News" description="News and announcements of the CTAO">
<section class="hero-band">
<span class="flash" aria-hidden="true"></span>
<div class="container hero">
<div class="eyebrow">Cherenkov Telescope Array Observatory</div>
<h1>News &amp; Announcements</h1>
<p>Exploring the Universe at the Highest Energies</p>
</div>
</section>
<section class="container">
<section class="container" aria-label="News list">
<div class="grid">
{posts.map((post) => (
<article class="card">
<span class="cat">{post.data.category}</span>
<h3><a href={`/news/${post.id}`}>{post.data.title}</a></h3>
<p>{post.data.description}</p>
<div class="meta">{post.data.author} · {fmt(post.data.date)}</div>
{posts.map((post, i) => (
<article class={i === 0 ? 'card card--featured' : 'card'}>
{post.data.cover && (
<img class="cover" src={encodeURI(post.data.cover)} alt="" loading={i === 0 ? 'eager' : 'lazy'} />
)}
<div class="body">
<span class="cat">{post.data.category}</span>
<h3><a href={`/news/${post.id}`}>{post.data.title}</a></h3>
<p class="desc">{post.data.description}</p>
<div class="meta">{post.data.author} · <time datetime={iso(post.data.date)}>{fmt(post.data.date)}</time></div>
</div>
</article>
))}
</div>