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

restyle: flat Cherenkov-blue design, WCAG (skip link, focus, labels), auto dark mode

Browse Source
This commit is contained in:
ctao
2026-07-24 20:20:29 +02:00
parent 4180882065
commit 8a2bf69576
3 changed files with 147 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Base.astro
+9 -2
View File
@@ -16,19 +16,26 @@ const links = [
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title> <title>{title}</title>
<meta name="description" content={description} /> <meta name="description" content={description} />
{/* Sora via Google Fonts for the demo; self-host the 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" />
</head> </head>
<body> <body>
<a class="skip" href="#main">Przejdź do treści</a>
<header class="site-header"> <header class="site-header">
<div class="container nav"> <div class="container nav">
<a class="brand" href="/"><span class="dot"></span> CTAO&nbsp;Portal</a> <a class="brand" href="/"><span class="dot"></span> CTAO&nbsp;Portal</a>
<span class="spacer"></span> <span class="spacer"></span>
<nav aria-label="Główna nawigacja" style="display: contents">
{links.map((l) => ( {links.map((l) => (
<a class="navlink" href={l.href} aria-current={isActive(l.href) ? 'page' : undefined}>{l.label}</a> <a class="navlink" href={l.href} aria-current={isActive(l.href) ? 'page' : undefined}>{l.label}</a>
))} ))}
<a class="navlink" href="/admin" style="color:var(--brand-2)">✎ Edytor</a> </nav>
<a class="navlink navlink--edit" href="/admin">✎ Edytor</a>
</div> </div>
</header> </header>
<main> <main id="main">
<slot /> <slot />
</main> </main>
<footer class="footer"> <footer class="footer">
src/pages/telescopes.astro
+10 -10
View File
@@ -11,32 +11,32 @@ import Base from '../layouts/Base.astro';
<section class="container page"> <section class="container page">
<div class="panel" style="max-width:640px"> <div class="panel" style="max-width:640px">
<div class="form-row"> <div class="form-row">
<label>Tytuł propozycji</label> <label for="f-title">Tytuł propozycji</label>
<input type="text" placeholder="np. Obserwacja rozbłysków AGN" /> <input id="f-title" type="text" placeholder="np. Obserwacja rozbłysków AGN" />
</div> </div>
<div class="form-row"> <div class="form-row">
<label>Teleskop</label> <label for="f-scope">Teleskop</label>
<select> <select id="f-scope">
<option>LST-1 (Large Size Telescope)</option> <option>LST-1 (Large Size Telescope)</option>
<option>MST (Medium Size Telescope)</option> <option>MST (Medium Size Telescope)</option>
<option>SST (Small Size Telescope)</option> <option>SST (Small Size Telescope)</option>
</select> </select>
</div> </div>
<div class="form-row"> <div class="form-row">
<label>Zakres energii</label> <label for="f-energy">Zakres energii</label>
<select> <select id="f-energy">
<option>20 GeV – 3 TeV</option> <option>20 GeV – 3 TeV</option>
<option>80 GeV – 50 TeV</option> <option>80 GeV – 50 TeV</option>
<option>1 TeV – 300 TeV</option> <option>1 TeV – 300 TeV</option>
</select> </select>
</div> </div>
<div class="form-row"> <div class="form-row">
<label>Wymagany czas (godziny)</label> <label for="f-hours">Wymagany czas (godziny)</label>
<input type="number" min="1" placeholder="np. 25" /> <input id="f-hours" type="number" min="1" placeholder="np. 25" />
</div> </div>
<div class="form-row"> <div class="form-row">
<label>Uzasadnienie naukowe</label> <label for="f-just">Uzasadnienie naukowe</label>
<textarea rows="4" placeholder="Krótki opis celu obserwacji..."></textarea> <textarea id="f-just" rows="4" placeholder="Krótki opis celu obserwacji..."></textarea>
</div> </div>
<button class="btn" type="button">Wyślij zgłoszenie</button> <button class="btn" type="button">Wyślij zgłoszenie</button>
<p class="notice">Makieta demonstracyjna — formularz nie zapisuje danych.</p> <p class="notice">Makieta demonstracyjna — formularz nie zapisuje danych.</p>
src/styles/global.css
+125 -58
View File
@@ -1,15 +1,33 @@
/* ==========================================================================
CTAO Portal — flat design, "Cherenkov blue" accent.
All look-and-feel lives in the tokens below: change a color/font/radius
here and the whole site follows. Light is canonical; dark mode overrides
only the tokens. All pairings meet WCAG AA contrast.
========================================================================== */
:root { :root {
--bg: #0b1020; --bg: #ffffff;
--surface: #131a2e; --surface: #f4f6fa;
--surface-2: #1a2340; --text: #131c2b;
--text: #e8ecf6; --muted: #46536a;
--muted: #9aa6c4; --border: #dfe4ec;
--brand: #5b8cff; --accent: #1d4ed8; /* Cherenkov blue — links, buttons, active states */
--brand-2: #7ce0d3; --accent-strong: #14369b; /* hover / chip text */
--border: #263257; --accent-soft: #edf2fe; /* chip & hint backgrounds */
--radius: 14px; --radius: 10px;
--maxw: 1080px; --maxw: 1080px;
--font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font: "Sora", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #101419;
--surface: #161c24;
--text: #e7ebf2;
--muted: #9aa5b8;
--border: #2a3340;
--accent: #8ab4f8;
--accent-strong: #b3ccfa;
--accent-soft: #1a2637;
}
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
@@ -17,90 +35,139 @@ html { -webkit-text-size-adjust: 100%; }
body { body {
margin: 0; margin: 0;
font-family: var(--font); font-family: var(--font);
background: background: var(--bg);
radial-gradient(1200px 600px at 80% -10%, rgba(91,140,255,0.18), transparent 60%),
radial-gradient(900px 500px at 0% 0%, rgba(124,224,211,0.10), transparent 55%),
var(--bg);
color: var(--text); color: var(--text);
line-height: 1.6; line-height: 1.65;
min-height: 100dvh; min-height: 100dvh;
} }
a { color: var(--brand); text-decoration: none; } a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration: underline; } a:hover { color: var(--accent-strong); }
img { max-width: 100%; height: auto; display: block; } img { max-width: 100%; height: auto; display: block; }
/* Visible keyboard focus everywhere (WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Skip link — first tab stop, hidden until focused (WCAG 2.4.1) */
.skip {
position: absolute; left: 16px; top: -48px; z-index: 20;
background: var(--accent); color: var(--bg); text-decoration: none;
padding: 10px 16px; border-radius: 0 0 var(--radius) var(--radius);
}
.skip:focus { top: 0; color: var(--bg); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
/* Header / nav */ /* Header / nav */
.site-header { .site-header { background: var(--bg); border-bottom: 1px solid var(--border); }
position: sticky; top: 0; z-index: 10; .nav { display: flex; align-items: center; gap: 6px; min-height: 60px; flex-wrap: wrap; }
backdrop-filter: blur(10px); .brand {
background: rgba(11,16,32,0.72); display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid var(--border); font-weight: 700; letter-spacing: 0.01em; color: var(--text); text-decoration: none;
}
/* Flat triangle — the Cherenkov light cone */
.brand .dot {
width: 13px; height: 12px; background: var(--accent);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
} }
.nav { display: flex; align-items: center; gap: 18px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.3px; }
.brand .dot { width: 12px; height: 12px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--brand-2), var(--brand)); box-shadow: 0 0 16px var(--brand); }
.nav .spacer { flex: 1; } .nav .spacer { flex: 1; }
.nav a.navlink { color: var(--muted); font-weight: 500; font-size: 0.95rem; padding: 6px 2px; } .nav a.navlink {
.nav a.navlink:hover, .nav a.navlink[aria-current="page"] { color: var(--text); text-decoration: none; } color: var(--muted); font-weight: 500; font-size: 0.95rem;
padding: 10px 10px; text-decoration: none; border-bottom: 2px solid transparent;
}
.nav a.navlink:hover { color: var(--text); }
.nav a.navlink[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.nav a.navlink--edit {
color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius);
padding: 7px 14px; margin-left: 6px;
}
.nav a.navlink--edit:hover { border-color: var(--accent); }
/* Hero */ /* Hero */
.hero { padding: 56px 0 28px; } .hero { padding: 56px 0 24px; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin: 0 0 10px; line-height: 1.1; } .hero h1 {
.hero p { color: var(--muted); font-size: 1.1rem; max-width: 60ch; margin: 0; } font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0 0 12px;
.eyebrow { color: var(--brand-2); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 0.72rem; } line-height: 1.12; letter-spacing: -0.02em; font-weight: 700;
}
/* Flat editorial signature: accent bar under the page title */
.hero h1::after {
content: ""; display: block; width: 56px; height: 4px;
background: var(--accent); margin-top: 18px;
}
.hero p { color: var(--muted); font-size: 1.06rem; max-width: 60ch; margin: 0; }
.eyebrow {
color: var(--accent); font-weight: 600; text-transform: uppercase;
letter-spacing: 0.14em; font-size: 0.72rem; margin-bottom: 6px;
}
/* News grid */ /* News grid */
.grid { display: grid; gap: 20px; grid-template-columns: 1fr; padding: 24px 0 64px; } .grid { display: grid; gap: 16px; grid-template-columns: 1fr; padding: 28px 0 64px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 940px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { .card {
background: linear-gradient(180deg, var(--surface), var(--surface-2)); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 22px; display: flex; flex-direction: column; gap: 10px; padding: 22px; display: flex; flex-direction: column; gap: 10px;
transition: transform 0.15s ease, border-color 0.15s ease; transition: border-color 0.15s ease;
} }
.card:hover { transform: translateY(-3px); border-color: var(--brand); } .card:hover, .card:focus-within { border-color: var(--accent); }
.card .cat { align-self: flex-start; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; .card .cat {
color: var(--brand-2); background: rgba(124,224,211,0.10); border: 1px solid rgba(124,224,211,0.25); align-self: flex-start; font-size: 0.72rem; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; } letter-spacing: 0.08em; font-weight: 600;
.card h3 { margin: 2px 0 0; font-size: 1.12rem; line-height: 1.3; } color: var(--accent-strong); background: var(--accent-soft);
.card h3 a { color: var(--text); } padding: 4px 10px; border-radius: 999px;
}
.card h3 { margin: 2px 0 0; font-size: 1.12rem; line-height: 1.35; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card p { margin: 0; color: var(--muted); font-size: 0.94rem; } .card p { margin: 0; color: var(--muted); font-size: 0.94rem; }
.card .meta { margin-top: auto; color: var(--muted); font-size: 0.8rem; } .card .meta { margin-top: auto; color: var(--muted); font-size: 0.8rem; }
/* Article */ /* Article */
.article { padding: 40px 0 72px; max-width: 760px; } .article { padding: 40px 0 72px; max-width: 720px; }
.article .back { color: var(--muted); font-size: 0.9rem; } .article .back { color: var(--muted); font-size: 0.9rem; }
.article h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: 14px 0 8px; line-height: 1.15; } .article h1 {
font-size: clamp(1.7rem, 4.5vw, 2.4rem); margin: 14px 0 8px;
line-height: 1.15; letter-spacing: -0.02em;
}
.article .meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 28px; } .article .meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 28px; }
.prose h2 { margin: 34px 0 10px; font-size: 1.5rem; } .prose h2 { margin: 34px 0 10px; font-size: 1.45rem; letter-spacing: -0.01em; }
.prose h3 { margin: 26px 0 8px; font-size: 1.18rem; } .prose h3 { margin: 26px 0 8px; font-size: 1.15rem; }
.prose p { margin: 0 0 16px; } .prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; } .prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 6px 0; } .prose li { margin: 6px 0; }
.prose blockquote { margin: 22px 0; padding: 12px 20px; border-left: 3px solid var(--brand); .prose blockquote {
background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); } margin: 22px 0; padding: 12px 20px; border-left: 3px solid var(--accent);
background: var(--surface); color: var(--text);
}
/* Generic page / mockup */ /* Generic page / mockup */
.page { padding: 40px 0 72px; } .page { padding: 40px 0 72px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; } .panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row label { font-size: 0.85rem; color: var(--muted); } .form-row label { font-size: 0.88rem; font-weight: 500; }
.form-row input, .form-row select, .form-row textarea { .form-row input, .form-row select, .form-row textarea {
background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
padding: 11px 12px; font: inherit; } color: var(--text); padding: 11px 12px; font: inherit;
.btn { background: linear-gradient(180deg, var(--brand), #3f6fe0); color: white; border: 0; }
padding: 11px 18px; border-radius: 10px; font-weight: 600; cursor: pointer; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--accent); }
.notice { color: var(--muted); font-size: 0.85rem; margin-top: 8px; } .btn {
background: var(--accent); color: var(--bg); border: 0;
padding: 12px 20px; border-radius: calc(var(--radius) - 4px);
font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--accent-strong); }
.notice { color: var(--muted); font-size: 0.85rem; margin-top: 10px; }
.placeholder { display: grid; place-items: center; min-height: 40vh; text-align: center; color: var(--muted); } .placeholder { display: grid; place-items: center; min-height: 40vh; text-align: center; color: var(--muted); }
.placeholder .big { font-size: 3rem; margin-bottom: 8px; } .placeholder .big { font-size: 3rem; margin-bottom: 8px; }
.footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; padding: 26px 0; } .footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; padding: 26px 0; margin-top: 24px; }
.cms-hint { background: rgba(91,140,255,0.10); border: 1px solid rgba(91,140,255,0.3); .cms-hint {
border-radius: var(--radius); padding: 14px 16px; font-size: 0.9rem; margin: 0 0 24px; } background: var(--accent-soft); border: 1px solid var(--border);
border-radius: var(--radius); padding: 14px 16px; font-size: 0.9rem; margin: 0 0 24px;
}