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

Simple conetent + restyled

Browse Source
This commit is contained in:
kuba
2026-09-21 17:59:29 +02:00
parent 0772462742
commit 467bf77d34
55 changed files with 2162 additions and 2070 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin/config.yml
+58 -36
View File
@@ -4,10 +4,10 @@
# these origins in deploy/ctao-demo-gitea.container.
backend:
name: gitea
# Content lives in its OWN repo (editorial history separate from code —
# the build overlays it onto the portal code, see deploy/build.sh).
# Keep this branch in sync with CONTENT_BRANCH in deploy/build.sh.
# Seed the content branch from sample-content/ before deploying.
repo: ctao/content
branch: main
branch: simple
base_url: https://astro-git.isl-dev.grid.cyfronet.pl
api_root: https://astro-git.isl-dev.grid.cyfronet.pl/api/v1
app_id: cf1c44ac-ebe6-4a97-bf2f-f7f26ef1126c
@@ -45,36 +45,58 @@ media_libraries:
optimize: true
collections:
- name: news
label: "News"
label_singular: "Article"
folder: "news"
create: true
slug: "{{slug}}"
extension: md
format: frontmatter
summary: "{{title}} · {{date}}"
fields:
- { name: title, label: "Title", widget: string }
- { name: description, label: "Short description", widget: text }
- { name: date, label: "Date", widget: datetime, date_format: "YYYY-MM-DD", time_format: false }
- { name: category, label: "Category", widget: string, default: "news" }
- { name: author, label: "Author", widget: string, default: "CTAO" }
- { name: cover, label: "Cover image", widget: image, required: false }
- { name: lang, label: "Language (if not English, e.g. pl)", widget: string, required: false }
- { name: draft, label: "Draft (unpublished)", widget: boolean, default: false }
- { name: body, label: "Body", widget: markdown }
- name: pages
label: "Pages"
label_singular: "Page"
folder: "pages"
create: true
slug: "{{slug}}"
extension: md
format: frontmatter
summary: "{{title}}"
fields:
- { name: title, label: "Title", widget: string }
- { name: description, label: "Description", widget: text, required: false }
- { name: body, label: "Body", widget: markdown }
- name: examples
label: "Example pages"
files:
- name: lorem-ipsum
label: "Lorem ipsum"
file: "pages/lorem-ipsum.md"
format: frontmatter
fields:
- { name: title, label: "Title", widget: string }
- { name: introduction, label: "Introduction", widget: text, required: false }
- { name: image, label: "Image", widget: image, required: false }
- { name: imageAlt, label: "Image alternative text", widget: string, required: false, hint: "Describe the image; leave empty only for decorative images." }
- { name: imageCaption, label: "Image caption", widget: string, required: false }
- { name: body, label: "Body", widget: markdown }
- { name: buttonLabel, label: "Button label", widget: string, required: false }
- { name: buttonUrl, label: "Button destination", widget: string, required: false, hint: "A site path such as /example/lorem-ipsum/, or an https:// URL." }
- name: dolor-sit-amet
label: "Dolor sit amet"
file: "pages/dolor-sit-amet.md"
format: frontmatter
fields:
- { name: title, label: "Title", widget: string }
- { name: introduction, label: "Introduction", widget: text, required: false }
- { name: image, label: "Image", widget: image, required: false }
- { name: imageAlt, label: "Image alternative text", widget: string, required: false, hint: "Describe the image; leave empty only for decorative images." }
- { name: imageCaption, label: "Image caption", widget: string, required: false }
- { name: body, label: "Body", widget: markdown }
- { name: buttonLabel, label: "Button label", widget: string, required: false }
- { name: buttonUrl, label: "Button destination", widget: string, required: false, hint: "A site path such as /example/lorem-ipsum/, or an https:// URL." }
- name: consectetur-adipiscing
label: "Consectetur adipiscing"
file: "pages/consectetur-adipiscing.md"
format: frontmatter
fields:
- { name: title, label: "Title", widget: string }
- { name: introduction, label: "Introduction", widget: text, required: false }
- { name: image, label: "Image", widget: image, required: false }
- { name: imageAlt, label: "Image alternative text", widget: string, required: false, hint: "Describe the image; leave empty only for decorative images." }
- { name: imageCaption, label: "Image caption", widget: string, required: false }
- { name: body, label: "Body", widget: markdown }
- { name: buttonLabel, label: "Button label", widget: string, required: false }
- { name: buttonUrl, label: "Button destination", widget: string, required: false, hint: "A site path such as /example/lorem-ipsum/, or an https:// URL." }
- name: sed-do-eiusmod
label: "Sed do eiusmod"
file: "pages/sed-do-eiusmod.md"
format: frontmatter
fields:
- { name: title, label: "Title", widget: string }
- { name: introduction, label: "Introduction", widget: text, required: false }
- { name: image, label: "Image", widget: image, required: false }
- { name: imageAlt, label: "Image alternative text", widget: string, required: false, hint: "Describe the image; leave empty only for decorative images." }
- { name: imageCaption, label: "Image caption", widget: string, required: false }
- { name: body, label: "Body", widget: markdown }
- { name: buttonLabel, label: "Button label", widget: string, required: false }
- { name: buttonUrl, label: "Button destination", widget: string, required: false, hint: "A site path such as /example/lorem-ipsum/, or an https:// URL." }
public/admin/preview.css
+218 -57
View File
@@ -1,71 +1,232 @@
/* Entry-preview styles for the Sveltia editor, registered via the documented
CMS.registerPreviewStyle API (bare element selectors, per the official docs
example). This file MIRRORS the article styles 1:1 — the design tokens from
:root and the `.prose` block in src/styles/global.css — with `.prose`
dropped from selectors (the preview pane has no such wrapper).
KEEP IN SYNC: when you touch `.prose` or the tokens in global.css, update
the corresponding value here (a matching reminder sits next to `.prose`).
Fonts: same self-hosted woff2 files the site uses, same origin. (The
Sveltia bundle still loads its own UI fonts from jsDelivr — only the
PREVIEW pane is CDN-free.) */
/* Generated by scripts/preview-styles.mjs; edit src/styles/global.css. */
/* ==========================================================================
CTAO Science Portal: content page mockup
Colours and type follow the CTAO Brand Guidelines (April 2024).
========================================================================== */
/* Fonts
========================================================================== */
@font-face {
font-family: "Inter"; font-weight: 400 700; font-display: swap;
src: url("/fonts/inter-latin.woff2") format("woff2");
font-family: "Inter";
font-weight: 400 700;
font-display: swap;
src: url("/assets/fonts/inter-latin.woff2") format("woff2");
}
@font-face {
font-family: "Space Grotesk"; font-weight: 500 700; font-display: swap;
src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
font-family: "Space Grotesk";
font-weight: 500 700;
font-display: swap;
src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
}
/* Tokens
========================================================================== */
:root {
/* tokens copied from global.css :root */
--galaxy: #00004a;
--moon: #f5f5f5;
--text: #101228;
--muted: #46536a;
--border: #e2e5ee;
--link: #0057c2;
--font-body: "Inter", Arial, system-ui, sans-serif;
--font-display: "Space Grotesk", var(--font-body);
--fs-s: 0.9rem;
--fs-l: 1.125rem;
--fs-xl: 1.5rem;
--fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
--radius: 16px;
/* Brand main colours (D.2.1) */
--galaxy-blue: #00004a;
--cherenkov-blue: #00e4d8;
--moon-gray: #f5f5f5;
/* Brand secondary colours (D.2.2) */
--white: #ffffff;
--cosmic-azure: #007aff;
--interstellar-indigo: #00009c;
/* Text */
--text: #111111;
--text-muted: #555555;
/* Cosmic Azure at 84% brightness: 5.4:1 on white, 3.5:1 against body text */
--link: #0066d6;
/* Type: Inter for everything, Space Grotesk for headlines (D.3) */
--font-body: "Inter", Arial, sans-serif;
--font-head: "Space Grotesk", Arial, sans-serif;
/* Layout */
--content-width: 85rem;
--gutter: clamp(1rem, 4vw, 2.5rem);
--header-height: 7rem;
--header-height-scrolled: 5rem;
--radius-lg: 60px;
--radius-md: 30px;
--radius-sm: 15px;
/* Dropdown submenus (Example, language) */
--radius-menu: 8px;
--transition: 0.3s ease-in-out;
/* Film grain tile over the hero background, also hides gradient banding */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
/* Base
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-padding-top: var(--header-height-scrolled);
}
/* preview shell ≈ article column */
body {
margin: 0;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.5;
color: var(--text);
max-width: 70ch;
margin: 0 auto;
padding: 24px;
background: var(--white);
-webkit-font-smoothing: antialiased;
}
/* = global.css base heading/link rules = */
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
h3 { font-weight: 600; }
h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
/* = global.css `.prose` rules, selectors unwrapped = */
body { line-height: 1.65; overflow-wrap: break-word; }
a { overflow-wrap: anywhere; }
h1 { color: var(--galaxy); font-size: var(--fs-h2); } /* mirrors `.article h1` */
h2 { color: var(--galaxy); margin: 44px 0 12px; font-size: var(--fs-xl); }
h3 { color: var(--galaxy); margin: 30px 0 8px; font-size: var(--fs-l); }
p { margin: 0 0 16px; text-wrap: pretty; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 6px 0; }
blockquote {
margin: 22px 0; padding: 12px 20px; border-left: 3px solid var(--galaxy);
background: var(--moon); color: var(--text);
body.no-scroll {
overflow: hidden;
}
img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
img + em, p > em:only-child { color: var(--muted); font-size: var(--fs-s); }
hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 16px; font-size: var(--fs-s); }
th { text-align: left; font-weight: 600; color: var(--galaxy); }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
thead th { border-bottom: 2px solid var(--galaxy); }
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: var(--link);
text-decoration: none;
}
a:hover,
a:focus-visible {
text-decoration: underline;
text-underline-offset: 0.15em;
}
button {
padding: 0;
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
/* Focus ring: Link blue on light backgrounds, Cherenkov Blue on dark ones */
:focus-visible {
outline: 2px solid var(--link);
outline-offset: 3px;
}
.site-header :focus-visible,
.page-hero :focus-visible,
.site-footer :focus-visible {
outline-color: var(--cherenkov-blue);
}
/* Prose
========================================================================== */
body {
padding-bottom: 5rem;
}
body > * {
max-width: 64rem;
}
/* Galaxy Blue headline on light background (D.3.4) */
body h2 {
margin: 3rem 0 1rem;
font-family: var(--font-head);
font-size: clamp(1.75rem, 3vw, 2.375rem);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--galaxy-blue);
}
body h2:first-child {
margin-top: 0;
}
body p {
margin: 0 0 1.25rem;
font-size: 1.0625rem;
line-height: 1.6;
}
/* Text links: colour only at rest, underline on hover and focus */
body a:not(.btn):hover,
body a:not(.btn):focus-visible {
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* Cherenkov Blue fails contrast as text on white, so it is the accent bar */
body .highlight,
body blockquote {
margin: 2.5rem 0;
padding-left: 1.5rem;
font-size: 1.375rem;
font-weight: 500;
line-height: 1.35;
color: var(--galaxy-blue);
border-left: 4px solid var(--cherenkov-blue);
}
/* Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
height: 2.75rem;
padding: 0 1.5rem;
font-size: 0.9375rem;
font-weight: 700;
border-radius: 999px;
}
/* Underline the label only: a flex container would pass it on to the arrow */
.btn:hover,
.btn:focus-visible {
text-decoration: none;
}
.btn:hover .btn__label,
.btn:focus-visible .btn__label {
text-decoration: underline;
text-underline-offset: 0.15em;
}
.btn--primary {
color: var(--white);
background: linear-gradient(
90deg,
var(--galaxy-blue) 0%,
var(--cosmic-azure) 70%,
var(--cherenkov-blue) 100%
);
}
.btn--primary:hover {
filter: brightness(1.1);
}
body { overflow-wrap: anywhere; }
body h3, body h4, body h5, body h6 { color: var(--galaxy-blue); font-family: var(--font-head); }
body li { margin-bottom: 0.5rem; }
body blockquote p { font-size: inherit; line-height: inherit; }
body pre { padding: 1rem; overflow-x: auto; background: var(--moon-gray); }
body code { overflow-wrap: normal; }
body table { display: block; overflow-x: auto; border-collapse: collapse; }
body th, body td { padding: 0.75rem; border-bottom: 1px solid #ddd; text-align: left; }
body hr { margin: 2rem 0; border: 0; border-top: 1px solid #ddd; }
body img { border-radius: var(--radius-sm); }
body { display: block; min-height: 0; max-width: 64rem; margin: 0 auto; padding: 1.5rem; }
h1 { color: var(--galaxy-blue); font-family: var(--font-head); font-weight: 500; line-height: 1.05; }