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/layouts/Base.astro
+29 -12
View File
@@ -1,46 +1,63 @@
---
import '../styles/global.css';
const { title = 'CTAO Portal', description = 'Portal obserwatorium CTAO' } = Astro.props;
const { title = 'CTAO Science Portal', description = 'CTAO Science Portal — demo' } = Astro.props;
const path = Astro.url.pathname;
const isActive = (href) => (href === '/' ? path === '/' : path.startsWith(href));
// Navigation = services from the Science Portal spec (REQUIREMENTS.md §2/§5).
// External systems built by other teams are links out, clearly marked.
const links = [
{ href: '/', label: 'Newsy' },
{ href: '/telescopes', label: 'Teleskopy' },
{ href: '/', label: 'News' },
{ href: '/telescopes', label: 'Proposals' },
{ href: '/dashboard', label: 'Dashboard' },
];
---
<!doctype html>
<html lang="pl">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta name="description" content={description} />
{/* Sora via Google Fonts for the demo; self-host the woff2 for production. */}
{/* Brand typography (BRAND D.3): Inter (body) + Space Grotesk (headlines).
Google Fonts for the demo; self-host woff2 for production. */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400..700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Space+Grotesk:wght@500..700&display=swap" rel="stylesheet" />
</head>
<body>
<a class="skip" href="#main">Przejdź do treści</a>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="container nav">
<a class="brand" href="/"><span class="dot"></span> CTAO&nbsp;Portal</a>
<a class="brand" href="/" aria-label="CTAO Science Portal — home">
<img src="/brand/AAFF_CTAO_Logo_RGB_Monochrome-negative.svg" alt="CTAO" />
<span class="brand-sub">Science&nbsp;Portal</span>
</a>
<span class="spacer"></span>
<nav aria-label="Główna nawigacja" style="display: contents">
<nav aria-label="Main navigation">
{links.map((l) => (
<a class="navlink" href={l.href} aria-current={isActive(l.href) ? 'page' : undefined}>{l.label}</a>
))}
<a class="navlink external" href="https://padc-ctao-data-explorer.obspm.fr/" target="_blank" rel="noopener">Data</a>
</nav>
<a class="navlink navlink--edit" href="/admin">✎ Edytor</a>
<a class="navlink navlink--edit" href="/admin">✎ Editor</a>
<button class="login-mock" type="button" disabled title="Mock — CTAO AAI sign-in will be integrated here">Sign in</button>
</div>
</header>
<main id="main">
<slot />
</main>
<footer class="footer">
<div class="container">
CTAO Portal — demo (git-based CMS). Treść generowana statycznie z plików Markdown.
{/* Bottom menu required by SPEC §3.3.1: disclaimers, privacy, contact, settings, search.
Placeholder links = <a> without href (valid HTML placeholder-link semantics). */}
<div class="container inner">
<a>Disclaimer</a>
<a>Privacy</a>
<a>Contact</a>
<a>Site settings</a>
<a>Search</a>
<span class="note">Science Portal Core demo (Cyfronet / SUSS-PORT team). Sample content
imported from ctao.org; footer links are placeholders. Statically generated from
Markdown (git-based CMS).</span>
</div>
</footer>
</body>