PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 11:09:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

migrate to utopia fluid type and space scales across all CSS

Browse Source
This commit is contained in:
Pontoporeia
2026-04-07 15:13:48 +02:00
parent ad06bbbcaf
commit f6977384b9
9 changed files with 383 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
TODO.md
View File

@@ -2,6 +2,7 @@
## Done ## Done
- [x] Bump all font sizes ~10% across all CSS files (admin, system, search, main, apropos, common, tfe) - [x] Bump all font sizes ~10% across all CSS files (admin, system, search, main, apropos, common, tfe)
- [x] Migrate to utopia fluid type scale (--step--2 → --step-5) and space scale (--space-3xs → --space-3xl) across all CSS files
- [x] Split search logic into search.php - [x] Split search logic into search.php
- [x] `public/search.php` — new page for text-query search results - [x] `public/search.php` — new page for text-query search results
- [x] `public/repertoire.php` — stripped to répertoire index only - [x] `public/repertoire.php` — stripped to répertoire index only

275
public/assets/css/admin.css
View File

@@ -32,18 +32,18 @@
.admin-body main { .admin-body main {
flex: 1; flex: 1;
padding: 2.5rem 2rem 4rem; padding: var(--space-l) var(--space-l) var(--space-2xl);
max-width: 1100px; max-width: 1100px;
width: 100%; width: 100%;
margin-inline: auto; margin-inline: auto;
} }
.admin-body main > h1 { .admin-body main > h1 {
font-size: 1.98rem; font-size: var(--step-2);
font-weight: 600; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
margin: 0 0 2.5rem 0; margin: 0 0 var(--space-l) 0;
} }
/* ── Forms ─────────────────────────────────────────────────────────────── */ /* ── Forms ─────────────────────────────────────────────────────────────── */
@@ -58,8 +58,8 @@
grid-template-columns: 260px 1fr; grid-template-columns: 260px 1fr;
align-items: start; align-items: start;
border-top: 1px solid var(--border-primary); border-top: 1px solid var(--border-primary);
padding: 0.75rem 0; padding: var(--space-xs) 0;
gap: 1rem; gap: var(--space-s);
} }
.admin-form > div:not(.admin-form-footer):last-of-type { .admin-form > div:not(.admin-form-footer):last-of-type {
@@ -68,8 +68,8 @@
.admin-form > div:not(.admin-form-footer) > label, .admin-form > div:not(.admin-form-footer) > label,
.admin-form > div:not(.admin-form-footer) > span.admin-row-label { .admin-form > div:not(.admin-form-footer) > span.admin-row-label {
font-size: 1.01rem; font-size: var(--step--1);
padding-top: 0.5rem; padding-top: var(--space-2xs);
font-weight: 400; font-weight: 400;
} }
@@ -86,9 +86,9 @@
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
font-size: 1.01rem; font-size: var(--step--1);
font-family: inherit; font-family: inherit;
padding: 0.4rem 0; padding: var(--space-3xs) 0;
border-radius: 0; border-radius: 0;
transition: border-color 0.15s; transition: border-color 0.15s;
-webkit-appearance: none; -webkit-appearance: none;
@@ -109,7 +109,7 @@
.admin-form input::placeholder, .admin-form input::placeholder,
.admin-form textarea::placeholder { .admin-form textarea::placeholder {
font-size: 0.97rem; font-size: var(--step--1);
color: var(--text-tertiary); color: var(--text-tertiary);
} }
@@ -133,14 +133,14 @@
.admin-file-input { .admin-file-input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: var(--space-3xs);
} }
.admin-file-input input[type="file"] { .admin-file-input input[type="file"] {
font-size: 0.94rem; font-size: var(--step--1);
background: transparent; background: transparent;
border: 1px dashed var(--border-primary); border: 1px dashed var(--border-primary);
padding: 0.4rem 0.6rem; padding: var(--space-3xs) var(--space-2xs);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
@@ -151,16 +151,13 @@
} }
.admin-body form small { .admin-body form small {
font-size: 0.86rem; font-size: var(--step--2);
color: var(--text-secondary); color: var(--text-secondary);
margin-top: 0.15rem; margin-top: var(--space-3xs);
display: block; display: block;
} }
/* Checkbox group fieldset (languages, formats) /* Checkbox group fieldset (languages, formats) */
Wraps the <ul> of checkboxes; the visible label is a sibling <span>
in the grid row. The <legend> repeats the label text for AT only (sr-only).
.admin-body scope ensures this overrides the generic .admin-body fieldset rule. */
.admin-body fieldset.admin-checkbox-group { .admin-body fieldset.admin-checkbox-group {
border: none; border: none;
padding: 0; padding: 0;
@@ -171,21 +168,21 @@
.admin-body fieldset.admin-checkbox-group > ul { .admin-body fieldset.admin-checkbox-group > ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding-top: 0.3rem; padding-top: var(--space-3xs);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.35rem; gap: var(--space-3xs);
} }
.admin-body fieldset.admin-checkbox-group > ul > li { .admin-body fieldset.admin-checkbox-group > ul > li {
display: contents; /* let the inner label handle layout */ display: contents;
} }
.admin-checkbox-label { .admin-checkbox-label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-2xs);
font-size: 0.99rem; font-size: var(--step--1);
cursor: pointer; cursor: pointer;
} }
@@ -199,33 +196,33 @@
/* Fieldset / legend (jury) */ /* Fieldset / legend (jury) */
.admin-body fieldset { .admin-body fieldset {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
padding: 1rem 1.25rem; padding: var(--space-s) var(--space-m);
margin: 0.5rem 0 1rem; margin: var(--space-2xs) 0 var(--space-s);
background: var(--bg-secondary); background: var(--bg-secondary);
} }
.admin-body legend { .admin-body legend {
font-size: 0.9rem; font-size: var(--step--1);
font-weight: 600; font-weight: 600;
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 0.5rem; padding: 0 var(--space-2xs);
} }
/* ── Buttons ────────────────────────────────────────────────────────────── */ /* ── Buttons ────────────────────────────────────────────────────────────── */
.admin-form-footer { .admin-form-footer {
margin-top: 2rem; margin-top: var(--space-l);
padding-top: 1.5rem; padding-top: var(--space-m);
} }
.admin-btn { .admin-btn {
padding: 0.65rem 2.5rem; padding: var(--space-2xs) var(--space-l);
background: var(--accent-primary); background: var(--accent-primary);
color: var(--accent-foreground); color: var(--accent-foreground);
border: none; border: none;
border-radius: 3px; border-radius: 3px;
font-size: 1.01rem; font-size: var(--step--1);
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@@ -239,12 +236,12 @@
} }
.admin-btn-secondary { .admin-btn-secondary {
padding: 0.5rem 1.5rem; padding: var(--space-3xs) var(--space-m);
background: transparent; background: transparent;
color: var(--text-tertiary); color: var(--text-tertiary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: 3px;
font-size: 0.97rem; font-size: var(--step--1);
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@@ -260,8 +257,8 @@
/* Small size modifier */ /* Small size modifier */
.admin-btn--sm { .admin-btn--sm {
padding: 0.28rem 0.65rem; padding: var(--space-3xs) var(--space-2xs);
font-size: 0.9rem; font-size: var(--step--2);
} }
/* Semantic colour modifiers */ /* Semantic colour modifiers */
@@ -286,10 +283,10 @@
/* ── Alert messages ─────────────────────────────────────────────────────── */ /* ── Alert messages ─────────────────────────────────────────────────────── */
[role="alert"], [role="alert"],
[role="status"] { [role="status"] {
padding: 0.75rem 1rem; padding: var(--space-xs) var(--space-s);
border-radius: 3px; border-radius: 3px;
font-size: 0.99rem; font-size: var(--step--1);
margin-bottom: 1.5rem; margin-bottom: var(--space-m);
border-left: 3px solid; border-left: 3px solid;
} }
@@ -308,8 +305,8 @@
/* ── Stats cards ────────────────────────────────────────────────────────── */ /* ── Stats cards ────────────────────────────────────────────────────────── */
.admin-stats { .admin-stats {
display: flex; display: flex;
gap: 1rem; gap: var(--space-s);
margin-bottom: 2rem; margin-bottom: var(--space-l);
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -317,14 +314,14 @@
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: 4px;
padding: 1rem 1.5rem; padding: var(--space-s) var(--space-m);
min-width: 140px; min-width: 140px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.admin-stat__number { .admin-stat__number {
font-size: 2.2rem; font-size: var(--step-3);
font-weight: 700; font-weight: 700;
color: var(--accent-primary); color: var(--accent-primary);
line-height: 1; line-height: 1;
@@ -333,9 +330,9 @@
} }
.admin-stat__label { .admin-stat__label {
font-size: 0.9rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
margin-top: 0.25rem; margin-top: var(--space-3xs);
order: 2; order: 2;
} }
@@ -344,13 +341,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: var(--space-s);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: 4px;
padding: 0.65rem 1rem; padding: var(--space-2xs) var(--space-s);
margin-bottom: 1.5rem; margin-bottom: var(--space-m);
font-size: 0.97rem; font-size: var(--step--1);
} }
.admin-maintenance-bar--active { .admin-maintenance-bar--active {
@@ -366,27 +363,27 @@
/* Result-count line above the thesis table */ /* Result-count line above the thesis table */
.admin-list-meta { .admin-list-meta {
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.94rem; font-size: var(--step--1);
margin-bottom: 0.5rem; margin-bottom: var(--space-2xs);
} }
/* Empty-state message below the thesis table */ /* Empty-state message below the thesis table */
.admin-empty { .admin-empty {
color: var(--text-secondary); color: var(--text-secondary);
padding: 1rem 0; padding: var(--space-s) 0;
} }
/* Identifier column in the thesis table */ /* Identifier column in the thesis table */
.admin-table-id { .admin-table-id {
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.88rem; font-size: var(--step--2);
} }
/* ── Filters bar ────────────────────────────────────────────────────────── */ /* ── Filters bar ────────────────────────────────────────────────────────── */
.admin-filters { .admin-filters {
display: flex; display: flex;
gap: 0.75rem; gap: var(--space-xs);
margin-bottom: 1.5rem; margin-bottom: var(--space-m);
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-end; align-items: flex-end;
} }
@@ -395,9 +392,9 @@
.admin-filters select { .admin-filters select {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: 3px;
font-size: 0.97rem; font-size: var(--step--1);
font-family: inherit; font-family: inherit;
padding: 0.45rem 0.75rem; padding: var(--space-3xs) var(--space-xs);
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
} }
@@ -409,12 +406,12 @@
} }
.admin-filters-btn { .admin-filters-btn {
padding: 0.45rem 1rem; padding: var(--space-3xs) var(--space-s);
background: var(--accent-primary); background: var(--accent-primary);
color: var(--accent-foreground); color: var(--accent-foreground);
border: none; border: none;
border-radius: 3px; border-radius: 3px;
font-size: 0.97rem; font-size: var(--step--1);
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: background 0.15s;
@@ -425,7 +422,7 @@
} }
.admin-filters-reset { .admin-filters-reset {
font-size: 0.97rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
@@ -435,37 +432,37 @@
.admin-bulk-actions { .admin-bulk-actions {
display: none; display: none;
align-items: center; align-items: center;
gap: 1rem; gap: var(--space-s);
padding: 0.6rem 1rem; padding: var(--space-2xs) var(--space-s);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: 4px;
margin-bottom: 1rem; margin-bottom: var(--space-s);
font-size: 0.97rem; font-size: var(--step--1);
} }
.admin-bulk-btns { .admin-bulk-btns {
display: flex; display: flex;
gap: 0.5rem; gap: var(--space-2xs);
} }
/* ── Table ──────────────────────────────────────────────────────────────── */ /* ── Table ──────────────────────────────────────────────────────────────── */
.admin-body table { .admin-body table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: 0.97rem; font-size: var(--step--1);
} }
.admin-body main > table { .admin-body main > table {
margin-top: 1.5rem; margin-top: var(--space-m);
} }
.admin-body table th { .admin-body table th {
text-align: left; text-align: left;
font-size: 0.83rem; font-size: var(--step--2);
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
padding: 0.5rem 0.75rem; padding: var(--space-3xs) var(--space-xs);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 400; font-weight: 400;
@@ -473,7 +470,7 @@
} }
.admin-body table td { .admin-body table td {
padding: 0.65rem 0.75rem; padding: var(--space-2xs) var(--space-xs);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
vertical-align: top; vertical-align: top;
} }
@@ -487,7 +484,7 @@
} }
.admin-body table .thesis-subtitle { .admin-body table .thesis-subtitle {
font-size: 0.9rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
font-style: italic; font-style: italic;
} }
@@ -495,9 +492,9 @@
/* ── Status badges ──────────────────────────────────────────────────────── */ /* ── Status badges ──────────────────────────────────────────────────────── */
.status-badge { .status-badge {
display: inline-block; display: inline-block;
padding: 0.2rem 0.5rem; padding: var(--space-3xs) var(--space-2xs);
border-radius: 3px; border-radius: 3px;
font-size: 0.86rem; font-size: var(--step--2);
font-weight: 500; font-weight: 500;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
@@ -514,8 +511,8 @@
.status-access { .status-access {
display: inline-block; display: inline-block;
font-size: 0.77rem; font-size: var(--step--2);
padding: 0.1rem 0.4rem; padding: var(--space-3xs) var(--space-3xs);
border-radius: 3px; border-radius: 3px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
color: var(--text-secondary); color: var(--text-secondary);
@@ -540,15 +537,15 @@
/* ── Action buttons in table ────────────────────────────────────────────── */ /* ── Action buttons in table ────────────────────────────────────────────── */
.admin-actions { .admin-actions {
display: flex; display: flex;
gap: 0.4rem; gap: var(--space-3xs);
flex-wrap: wrap; flex-wrap: wrap;
} }
.admin-btn-sm { .admin-btn-sm {
padding: 0.25rem 0.6rem; padding: var(--space-3xs) var(--space-2xs);
min-height: 2rem; min-height: 2rem;
border-radius: 3px; border-radius: 3px;
font-size: 0.86rem; font-size: var(--step--2);
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
@@ -604,38 +601,38 @@
.admin-body main > section { .admin-body main > section {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 6px; border-radius: 6px;
padding: 1.5rem; padding: var(--space-m);
margin-bottom: 1.5rem; margin-bottom: var(--space-m);
} }
.admin-body main > section h2 { .admin-body main > section h2 {
margin: 0 0 1rem; margin: 0 0 var(--space-s);
font-size: 1.32rem; font-size: var(--step-1);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
padding-bottom: 0.5rem; padding-bottom: var(--space-2xs);
} }
.admin-body main > section dl { .admin-body main > section dl {
display: grid; display: grid;
grid-template-columns: 180px 1fr; grid-template-columns: 180px 1fr;
gap: 0.4rem 1rem; gap: var(--space-3xs) var(--space-s);
} }
.admin-body main > section dt { .admin-body main > section dt {
font-weight: 600; font-weight: 600;
font-size: 0.97rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
} }
.admin-body main > section dd { .admin-body main > section dd {
margin: 0; margin: 0;
font-size: 0.99rem; font-size: var(--step--1);
} }
.admin-action-bar { .admin-action-bar {
margin-top: 1.5rem; margin-top: var(--space-m);
display: flex; display: flex;
gap: 0.75rem; gap: var(--space-xs);
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -645,13 +642,13 @@
/* ── Section titles (account, etc.) ─────────────────────────────────────── */ /* ── Section titles (account, etc.) ─────────────────────────────────────── */
.admin-section-title { .admin-section-title {
font-size: 1.1rem; font-size: var(--step-0);
font-weight: 600; font-weight: 600;
letter-spacing: 0.07em; letter-spacing: 0.07em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-secondary);
margin: 2rem 0 1rem; margin: var(--space-l) 0 var(--space-s);
padding-bottom: 0.5rem; padding-bottom: var(--space-2xs);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
} }
@@ -664,18 +661,18 @@
.admin-account-status { .admin-account-status {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: 4px;
padding: 1rem 1.5rem; padding: var(--space-s) var(--space-m);
margin-bottom: 2rem; margin-bottom: var(--space-l);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: var(--space-xs);
} }
.admin-account-status__row { .admin-account-status__row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: var(--space-xs);
font-size: 0.99rem; font-size: var(--step--1);
} }
.admin-account-status__label { .admin-account-status__label {
@@ -685,16 +682,16 @@
.admin-account-status__code { .admin-account-status__code {
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 0.9rem; font-size: var(--step--2);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: 3px;
padding: 0.1rem 0.4rem; padding: var(--space-3xs) var(--space-3xs);
color: var(--text-secondary); color: var(--text-secondary);
background: var(--bg-secondary); background: var(--bg-secondary);
} }
.admin-account-status__note { .admin-account-status__note {
font-size: 0.94rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
margin: 0; margin: 0;
} }
@@ -703,16 +700,16 @@
.admin-danger-zone { .admin-danger-zone {
border: 1px solid var(--danger-border-muted); border: 1px solid var(--danger-border-muted);
border-radius: 4px; border-radius: 4px;
padding: 1.25rem 1.5rem; padding: var(--space-m) var(--space-m);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1.5rem; gap: var(--space-m);
flex-wrap: wrap; flex-wrap: wrap;
} }
.admin-danger-zone__description { .admin-danger-zone__description {
flex: 1; flex: 1;
font-size: 0.99rem; font-size: var(--step--1);
} }
/* ── Login page ─────────────────────────────────────────────────────────── */ /* ── Login page ─────────────────────────────────────────────────────────── */
@@ -727,14 +724,14 @@
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: 4px;
padding: 2rem; padding: var(--space-l);
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
} }
.admin-login-box h2 { .admin-login-box h2 {
margin: 0 0 1.5rem; margin: 0 0 var(--space-m);
font-size: 1.21rem; font-size: var(--step-0);
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
} }
@@ -742,18 +739,18 @@
.admin-login-box .admin-form > div:not(.admin-form-footer) { .admin-login-box .admin-form > div:not(.admin-form-footer) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
border: none; border: none;
padding: 0.4rem 0; padding: var(--space-3xs) 0;
} }
.admin-login-box .admin-form > div:not(.admin-form-footer) > label { .admin-login-box .admin-form > div:not(.admin-form-footer) > label {
font-size: 0.9rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 0.2rem; margin-bottom: var(--space-3xs);
} }
.admin-login-box .admin-form-footer { .admin-login-box .admin-form-footer {
margin-top: 1rem; margin-top: var(--space-s);
padding-top: 0.5rem; padding-top: var(--space-2xs);
} }
.admin-login-box .admin-btn { .admin-login-box .admin-btn {
@@ -764,30 +761,30 @@
.admin-import-area { .admin-import-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: var(--space-m);
} }
/* Error list inside role="alert" (import page) */ /* Error list inside role="alert" (import page) */
.admin-error-list { .admin-error-list {
margin: 0.5rem 0 0; margin: var(--space-2xs) 0 0;
padding-left: 1.2rem; padding-left: var(--space-s);
} }
/* Hint text under the file input (import page) */ /* Hint text under the file input (import page) */
.admin-file-hint { .admin-file-hint {
display: block; display: block;
margin-top: 0.5rem; margin-top: var(--space-2xs);
} }
/* Import results panel */ /* Import results panel */
.admin-import-results { .admin-import-results {
margin-top: 2rem; margin-top: var(--space-l);
} }
.admin-import-results__title { .admin-import-results__title {
font-size: 1.1rem; font-size: var(--step-0);
font-weight: 600; font-weight: 600;
margin-bottom: 0.75rem; margin-bottom: var(--space-xs);
color: var(--text-secondary); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
@@ -797,41 +794,39 @@
/* ── Jury fieldset ──────────────────────────────────────────────────────── */ /* ── Jury fieldset ──────────────────────────────────────────────────────── */
/* Nested lecteur·ices fieldset sits inside the outer jury fieldset:
strip heavy border/background so it reads as a sub-group, not a card. */
.admin-body fieldset fieldset.admin-jury-lecteurs { .admin-body fieldset fieldset.admin-jury-lecteurs {
border: none; border: none;
padding: 0; padding: 0;
margin: 0.75rem 0 0; margin: var(--space-xs) 0 0;
background: transparent; background: transparent;
} }
.admin-body fieldset fieldset.admin-jury-lecteurs > legend { .admin-body fieldset fieldset.admin-jury-lecteurs > legend {
font-size: 0.86rem; font-size: var(--step--2);
font-weight: 600; font-weight: 600;
letter-spacing: 0.03em; letter-spacing: 0.03em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-tertiary); color: var(--text-tertiary);
padding: 0; padding: 0;
margin-bottom: 0.5rem; margin-bottom: var(--space-2xs);
} }
.admin-jury-row { .admin-jury-row {
display: flex; display: flex;
gap: 0.75rem; gap: var(--space-xs);
flex-wrap: wrap; flex-wrap: wrap;
} }
.admin-jury-list { .admin-jury-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: var(--space-2xs);
} }
.admin-jury-entry { .admin-jury-entry {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: var(--space-xs);
} }
.admin-jury-ext { .admin-jury-ext {
@@ -843,9 +838,9 @@
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
color: var(--text-tertiary); color: var(--text-tertiary);
border-radius: 3px; border-radius: 3px;
padding: 0.2rem 0.55rem; padding: var(--space-3xs) var(--space-2xs);
min-height: 2rem; min-height: 2rem;
font-size: 0.88rem; font-size: var(--step--2);
line-height: 1; line-height: 1;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -864,25 +859,25 @@
.admin-inline-form { .admin-inline-form {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: var(--space-3xs);
flex-wrap: wrap; flex-wrap: wrap;
} }
.admin-input--inline, .admin-input--inline,
.admin-inline-form input[type="text"] { .admin-inline-form input[type="text"] {
font-size: 0.9rem; font-size: var(--step--1);
width: 160px; width: 160px;
} }
.admin-select--inline, .admin-select--inline,
.admin-inline-form select { .admin-inline-form select {
font-size: 0.9rem; font-size: var(--step--1);
width: 160px; width: 160px;
} }
/* Stack secondary forms (merge, delete) below the rename form */ /* Stack secondary forms (merge, delete) below the rename form */
.admin-inline-form + .admin-inline-form { .admin-inline-form + .admin-inline-form {
margin-top: 0.35rem; margin-top: var(--space-3xs);
} }
/* Tags table column sizing */ /* Tags table column sizing */
@@ -907,12 +902,12 @@
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: 3px;
display: block; display: block;
margin-top: 0.5rem; margin-top: var(--space-2xs);
} }
/* ── Cancel link ────────────────────────────────────────────────────────── */ /* ── Cancel link ────────────────────────────────────────────────────────── */
.admin-cancel-link { .admin-cancel-link {
font-size: 0.97rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: underline; text-decoration: underline;
} }
@@ -922,13 +917,13 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-2xs);
padding: 1.5rem 0 0.5rem; padding: var(--space-m) 0 var(--space-2xs);
} }
.admin-body .pagination-wrap ul { .admin-body .pagination-wrap ul {
display: flex; display: flex;
gap: 0.25rem; gap: var(--space-3xs);
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -940,11 +935,11 @@
justify-content: center; justify-content: center;
min-width: 2.75rem; min-width: 2.75rem;
min-height: 2.75rem; min-height: 2.75rem;
padding: 0 0.6rem; padding: 0 var(--space-2xs);
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 3px; border-radius: 3px;
color: var(--text-primary); color: var(--text-primary);
font-size: 0.99rem; font-size: var(--step--1);
text-decoration: none; text-decoration: none;
transition: transition:
border-color 0.15s, border-color 0.15s,
@@ -963,9 +958,9 @@
} }
.admin-body .pagination-info { .admin-body .pagination-info {
font-size: 0.99rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 0.5rem; padding: 0 var(--space-2xs);
} }
.admin-body #editor { .admin-body #editor {

84
public/assets/css/apropos.css
View File

@@ -17,7 +17,7 @@
.apropos-main { .apropos-main {
flex: 1; flex: 1;
padding: 3rem 2rem 5rem; padding: var(--space-xl) var(--space-l) var(--space-2xl);
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -27,7 +27,7 @@
.apropos-layout { .apropos-layout {
display: grid; display: grid;
grid-template-columns: 180px 1fr; grid-template-columns: 180px 1fr;
gap: 4rem; gap: var(--space-2xl);
max-width: 860px; max-width: 860px;
margin: 0 auto; margin: 0 auto;
align-items: start; align-items: start;
@@ -39,38 +39,38 @@
.apropos-toc { .apropos-toc {
position: sticky; position: sticky;
top: 2.5rem; top: var(--space-l);
} }
.apropos-toc-label { .apropos-toc-label {
font-family: var(--font-body); font-family: var(--font-body);
font-size: 0.79rem; font-size: var(--step--2);
font-weight: 600; font-weight: 600;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-tertiary); color: var(--text-tertiary);
margin: 0 0 0.6rem 0; margin: 0 0 var(--space-2xs) 0;
} }
.apropos-toc ul { .apropos-toc ul {
list-style: none; list-style: none;
margin: 0 0 1.5rem 0; margin: 0 0 var(--space-m) 0;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: var(--space-3xs);
} }
.apropos-toc ul a { .apropos-toc ul a {
font-family: var(--font-body); font-family: var(--font-body);
font-size: 0.96rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
display: block; display: block;
padding: 0.2rem 0; padding: var(--space-3xs) 0;
transition: color 0.15s; transition: color 0.15s;
border-left: 2px solid transparent; border-left: 2px solid transparent;
padding-left: 0.6rem; padding-left: var(--space-2xs);
} }
.apropos-toc ul a:hover { .apropos-toc ul a:hover {
@@ -79,12 +79,12 @@
} }
.apropos-toc-erg { .apropos-toc-erg {
padding-top: 1rem; padding-top: var(--space-s);
border-top: 1px solid var(--border-primary); border-top: 1px solid var(--border-primary);
} }
.apropos-toc-erg a { .apropos-toc-erg a {
font-size: 0.88rem; font-size: var(--step--2);
color: var(--accent-primary); color: var(--accent-primary);
text-decoration: none; text-decoration: none;
transition: opacity 0.15s; transition: opacity 0.15s;
@@ -105,9 +105,9 @@
} }
.apropos-section { .apropos-section {
padding-bottom: 3.5rem; padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
margin-bottom: 3.5rem; margin-bottom: var(--space-xl);
} }
.apropos-section:last-child { .apropos-section:last-child {
@@ -122,10 +122,10 @@
.apropos-section-title { .apropos-section-title {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 2.2rem; font-size: var(--step-3);
font-weight: 400; font-weight: 400;
color: var(--text-primary); color: var(--text-primary);
margin: 0 0 1.75rem 0; margin: 0 0 var(--space-m) 0;
line-height: 1.1; line-height: 1.1;
} }
@@ -135,8 +135,8 @@
.prose { .prose {
font-family: var(--font-body); font-family: var(--font-body);
font-size: 1.59rem; font-size: var(--step-0);
line-height: 1.5; line-height: 1.6;
color: var(--text-primary); color: var(--text-primary);
font-weight: 400; font-weight: 400;
} }
@@ -157,9 +157,9 @@
margin: 1.5em 0 0.5em 0; margin: 1.5em 0 0.5em 0;
} }
.prose h1 { font-size: 2.2rem; } .prose h1 { font-size: var(--step-3); }
.prose h2 { font-size: 1.65rem; } .prose h2 { font-size: var(--step-2); }
.prose h3 { font-size: 1.32rem; } .prose h3 { font-size: var(--step-1); }
.prose a { .prose a {
color: var(--accent-primary); color: var(--accent-primary);
@@ -169,8 +169,8 @@
.prose ul, .prose ul,
.prose ol { .prose ol {
padding-left: 1.5rem; padding-left: var(--space-m);
margin-bottom: 1rem; margin-bottom: var(--space-s);
} }
.prose li { .prose li {
@@ -200,7 +200,7 @@
.apropos-contact-card { .apropos-contact-card {
font-style: normal; font-style: normal;
padding: 1.1rem 0; padding: var(--space-s) 0;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
} }
@@ -210,22 +210,22 @@
.apropos-contact-card strong { .apropos-contact-card strong {
display: block; display: block;
font-size: 1.04rem; font-size: var(--step-0);
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 0.2rem; margin-bottom: var(--space-3xs);
} }
.apropos-contact-card span { .apropos-contact-card span {
display: block; display: block;
font-size: 0.94rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
line-height: 1.4; line-height: 1.4;
margin-bottom: 0.25rem; margin-bottom: var(--space-3xs);
} }
.apropos-contact-card a { .apropos-contact-card a {
font-size: 0.94rem; font-size: var(--step--1);
color: var(--accent-primary); color: var(--accent-primary);
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
@@ -251,8 +251,8 @@
.apropos-credit-row { .apropos-credit-row {
display: grid; display: grid;
grid-template-columns: 1fr 1.6fr; grid-template-columns: 1fr 1.6fr;
gap: 1rem; gap: var(--space-s);
padding: 1rem 0; padding: var(--space-s) 0;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
align-items: baseline; align-items: baseline;
} }
@@ -262,7 +262,7 @@
} }
.apropos-credits-list dt { .apropos-credits-list dt {
font-size: 0.88rem; font-size: var(--step--2);
font-weight: 600; font-weight: 600;
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
@@ -270,7 +270,7 @@
} }
.apropos-credits-list dd { .apropos-credits-list dd {
font-size: 0.99rem; font-size: var(--step--1);
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.5;
@@ -291,7 +291,7 @@
@media (max-width: 900px) { @media (max-width: 900px) {
.apropos-layout { .apropos-layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 2rem; gap: var(--space-l);
} }
.apropos-toc { .apropos-toc {
@@ -299,8 +299,8 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 1rem; gap: var(--space-s);
padding-bottom: 1rem; padding-bottom: var(--space-s);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
} }
@@ -311,7 +311,7 @@
.apropos-toc ul { .apropos-toc ul {
flex-direction: row; flex-direction: row;
margin: 0; margin: 0;
gap: 0.75rem; gap: var(--space-xs);
} }
.apropos-toc ul a { .apropos-toc ul a {
@@ -326,25 +326,25 @@
} }
.prose { .prose {
font-size: 1.32rem; font-size: var(--step-0);
} }
.apropos-section-title { .apropos-section-title {
font-size: 1.76rem; font-size: var(--step-2);
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.apropos-main { .apropos-main {
padding: 1.5rem 1rem 3rem; padding: var(--space-m) var(--space-s) var(--space-xl);
} }
.prose { .prose {
font-size: 1.1rem; font-size: var(--step-0);
} }
.apropos-credit-row { .apropos-credit-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0.25rem; gap: var(--space-3xs);
} }
} }

26
public/assets/css/common.css
View File

@@ -85,7 +85,7 @@ body > header {
} }
body > header nav { body > header nav {
padding: 1.44rem 1.5rem; padding: var(--space-s) var(--space-s);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -94,13 +94,13 @@ body > header nav {
.nav-left { .nav-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 3rem; gap: var(--space-l);
} }
.nav-left-links, .nav-left-links,
.nav-right-links { .nav-right-links {
display: flex; display: flex;
gap: 3rem; gap: var(--space-l);
align-items: center; align-items: center;
list-style: none; list-style: none;
margin: 0; margin: 0;
@@ -109,17 +109,16 @@ body > header nav {
body > header nav > a { body > header nav > a {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 1.21rem; font-size: var(--step-0);
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
color: var(--accent-foreground); color: var(--accent-foreground);
text-decoration: none; text-decoration: none;
/* font-weight: 400; */
} }
body > header nav > ul { body > header nav > ul {
display: flex; display: flex;
gap: 3rem; gap: var(--space-l);
align-items: center; align-items: center;
list-style: none; list-style: none;
margin: 0; margin: 0;
@@ -127,12 +126,11 @@ body > header nav > ul {
} }
body > header nav ul a { body > header nav ul a {
font-size: 1.04rem; font-size: var(--step--1);
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
color: var(--accent-foreground); color: var(--accent-foreground);
text-decoration: none; text-decoration: none;
/* font-weight: 400; */
transition: opacity 0.15s; transition: opacity 0.15s;
} }
@@ -162,8 +160,8 @@ body > header nav ul a[aria-current="page"] {
body > header form[role="search"] { body > header form[role="search"] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-2xs);
padding: 0.4rem 1.5rem; padding: var(--space-3xs) var(--space-s);
border: 1px solid var(--accent-primary); border: 1px solid var(--accent-primary);
border-radius: 0; border-radius: 0;
background: var(--bg-primary); background: var(--bg-primary);
@@ -182,10 +180,10 @@ body > header form[role="search"] svg {
body > header form[role="search"] input { body > header form[role="search"] input {
flex: 1; flex: 1;
border: none; border: none;
font-size: 1.04rem; font-size: var(--step--1);
color: var(--text-primary); color: var(--text-primary);
background: transparent; background: transparent;
padding: 0.15rem 0; padding: var(--space-3xs) 0;
font-family: inherit; font-family: inherit;
} }
@@ -216,10 +214,10 @@ body > header form[role="search"] input::placeholder {
top: -999px; top: -999px;
left: 1rem; left: 1rem;
z-index: 9999; z-index: 9999;
padding: 0.5rem 1rem; padding: var(--space-2xs) var(--space-s);
background: var(--accent-primary); background: var(--accent-primary);
color: var(--text-primary); color: var(--text-primary);
font-size: 0.99rem; font-size: var(--step--1);
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;

46
public/assets/css/main.css
View File

@@ -23,10 +23,10 @@
.cards-container { .cards-container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem; gap: var(--space-s);
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 1rem 1.25rem 1.5rem; padding: var(--space-xs) var(--space-s) var(--space-m);
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
@@ -100,7 +100,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-tertiary); color: var(--text-tertiary);
font-size: 2.2rem; font-size: var(--step-3);
} }
.card__media--gradient { .card__media--gradient {
@@ -110,7 +110,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1rem; padding: var(--space-s);
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
border-radius: 7px 7px 0 0; border-radius: 7px 7px 0 0;
@@ -118,7 +118,7 @@
.card__gradient-author { .card__gradient-author {
color: var(--accent-foreground); color: var(--accent-foreground);
font-size: 0.83rem; font-size: var(--step--2);
opacity: .85; opacity: .85;
margin-bottom: .25rem; margin-bottom: .25rem;
display: block; display: block;
@@ -126,7 +126,7 @@
.card__gradient-title { .card__gradient-title {
color: var(--accent-foreground); color: var(--accent-foreground);
font-size: 0.94rem; font-size: var(--step--1);
font-weight: 600; font-weight: 600;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
@@ -139,19 +139,19 @@
font-style: normal; font-style: normal;
background: transparent; background: transparent;
color: var(--text-primary); color: var(--text-primary);
font-size: 0.86rem; font-size: var(--step--2);
font-weight: 600; font-weight: 600;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
padding: 1.1rem 1.25rem 0.8rem; padding: var(--space-s) var(--space-s) var(--space-xs);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
margin: 0; margin: 0;
} }
/* Card caption — <p> directly inside the card <a> link, below the media */ /* Card caption — <p> directly inside the card <a> link, below the media */
.home-body li > a > p { .home-body li > a > p {
padding: 0.55rem 0.75rem 0.65rem; padding: var(--space-2xs) var(--space-xs) var(--space-xs);
font-size: 0.97rem; font-size: var(--step--1);
line-height: 1.35; line-height: 1.35;
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
@@ -161,9 +161,9 @@
/* Empty-state message shown when no cards exist */ /* Empty-state message shown when no cards exist */
.cards-empty { .cards-empty {
padding: 2rem; padding: var(--space-l);
color: var(--text-tertiary); color: var(--text-tertiary);
font-size: 0.99rem; font-size: var(--step--1);
list-style: none; list-style: none;
} }
@@ -171,21 +171,21 @@
.filter-info { .filter-info {
background: var(--accent-muted); background: var(--accent-muted);
color: var(--accent-secondary); color: var(--accent-secondary);
padding: 0.4rem 1.5rem; padding: var(--space-3xs) var(--space-s);
font-size: 0.94rem; font-size: var(--step--1);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: var(--space-s);
flex-shrink: 0; flex-shrink: 0;
} }
.clear-filter { .clear-filter {
color: var(--accent-secondary); color: var(--accent-secondary);
text-decoration: none; text-decoration: none;
padding: 0.15rem 0.6rem; padding: var(--space-3xs) var(--space-2xs);
background: var(--accent-muted); background: var(--accent-muted);
border-radius: 3px; border-radius: 3px;
font-size: 0.9rem; font-size: var(--step--1);
} }
.clear-filter:hover { .clear-filter:hover {
@@ -203,8 +203,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-2xs);
padding: 1rem; padding: var(--space-s);
list-style: none; list-style: none;
margin: 0; margin: 0;
} }
@@ -215,11 +215,11 @@
justify-content: center; justify-content: center;
min-width: 2.75rem; min-width: 2.75rem;
min-height: 2.75rem; min-height: 2.75rem;
padding: 0 0.6rem; padding: 0 var(--space-2xs);
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 3px; border-radius: 3px;
color: var(--text-primary); color: var(--text-primary);
font-size: 0.99rem; font-size: var(--step--1);
text-decoration: none; text-decoration: none;
transition: all 0.15s; transition: all 0.15s;
} }
@@ -236,9 +236,9 @@
} }
.pagination-info { .pagination-info {
font-size: 0.99rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 0.5rem; padding: 0 var(--space-2xs);
} }
.page-current { .page-current {

84
public/assets/css/search.css
View File

@@ -23,14 +23,14 @@
display: grid; display: grid;
grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr; grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr;
gap: 0; gap: 0;
padding: 0 1.5rem; padding: 0 var(--space-m);
min-height: 100%; min-height: 100%;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.repertoire-index { .repertoire-index {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
padding: 0 1rem; padding: 0 var(--space-s);
min-height: auto; min-height: auto;
} }
@@ -47,14 +47,14 @@
@media (max-width: 600px) { @media (max-width: 600px) {
.repertoire-index { .repertoire-index {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 0 1rem; padding: 0 var(--space-s);
min-height: auto; min-height: auto;
} }
.repertoire-col { .repertoire-col {
border-right: none; border-right: none;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
padding: 1rem 0 1.25rem; padding: var(--space-s) 0 var(--space-m);
} }
.repertoire-col:last-child { .repertoire-col:last-child {
@@ -63,7 +63,7 @@
} }
.repertoire-col { .repertoire-col {
padding: 0.75rem 0.5rem 2rem; padding: var(--space-xs) var(--space-2xs) var(--space-l);
border-right: 1px solid var(--border-secondary); border-right: 1px solid var(--border-secondary);
} }
@@ -72,13 +72,13 @@
} }
.repertoire-index section > h2 { .repertoire-index section > h2 {
font-size: 0.79rem; font-size: var(--step--2);
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 400; font-weight: 400;
margin: 0 0 0.5rem 0; margin: 0 0 var(--space-2xs) 0;
padding-bottom: 0.4rem; padding-bottom: var(--space-3xs);
border-bottom: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary);
} }
@@ -96,10 +96,10 @@
text-align: left; text-align: left;
background: none; background: none;
border: none; border: none;
padding: 0.1rem 0; padding: var(--space-3xs) 0;
margin: 0; margin: 0;
font-family: inherit; font-family: inherit;
font-size: 1.04rem; font-size: var(--step-0);
color: var(--text-primary); color: var(--text-primary);
line-height: 1.4; line-height: 1.4;
cursor: pointer; cursor: pointer;
@@ -130,18 +130,18 @@
/* Years column — big bold numbers */ /* Years column — big bold numbers */
.repertoire-col[data-col="years"] .rep-entry { .repertoire-col[data-col="years"] .rep-entry {
font-size: 2.42rem; font-size: var(--step-3);
font-weight: 700; font-weight: 700;
line-height: 1.1; line-height: 1.1;
letter-spacing: -0.02em; letter-spacing: -0.02em;
padding: 0.05rem 0; padding: var(--space-3xs) 0;
} }
/* Empty state in students column */ /* Empty state in students column */
.rep-empty { .rep-empty {
color: var(--text-tertiary); color: var(--text-tertiary);
font-size: 0.99rem; font-size: var(--step--1);
padding: 0.1rem 0; padding: var(--space-3xs) 0;
} }
/* ---- HTMX loading indicator ---- */ /* ---- HTMX loading indicator ---- */
@@ -173,18 +173,18 @@
/* ---- Search results view (grid) ---- */ /* ---- Search results view (grid) ---- */
.search-results-header { .search-results-header {
display: block; display: block;
font-size: 0.94rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
margin: 1rem 1.5rem 0.5rem; margin: var(--space-s) var(--space-m) var(--space-2xs);
} }
.results-grid { .results-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem; gap: var(--space-m);
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0.5rem 1.5rem 1.5rem; padding: var(--space-2xs) var(--space-m) var(--space-m);
} }
.result-card { .result-card {
@@ -192,17 +192,17 @@
color: inherit; color: inherit;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.4rem; gap: var(--space-3xs);
} }
.result-card__authors { .result-card__authors {
font-size: 0.99rem; font-size: var(--step--1);
font-weight: 500; font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
} }
.result-card__title { .result-card__title {
font-size: 0.94rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
line-height: 1.35; line-height: 1.35;
display: -webkit-box; display: -webkit-box;
@@ -212,7 +212,7 @@
} }
.result-card__meta { .result-card__meta {
font-size: 0.86rem; font-size: var(--step--2);
color: var(--accent-primary); color: var(--accent-primary);
font-style: normal; font-style: normal;
} }
@@ -221,8 +221,8 @@
.search-controls { .search-controls {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: var(--space-s);
padding: 0.4rem 1.5rem; padding: var(--space-3xs) var(--space-m);
border-bottom: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary);
flex-shrink: 0; flex-shrink: 0;
flex-wrap: wrap; flex-wrap: wrap;
@@ -231,8 +231,8 @@
.search-filter-label { .search-filter-label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: var(--space-3xs);
font-size: 0.86rem; font-size: var(--step--2);
color: var(--text-secondary); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
@@ -241,10 +241,10 @@
} }
.search-filter-select { .search-filter-select {
font-size: 0.9rem; font-size: var(--step--1);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: 3px;
padding: 0.2rem 0.5rem; padding: var(--space-3xs) var(--space-2xs);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
font-family: inherit; font-family: inherit;
@@ -256,8 +256,8 @@
} }
.search-apply-btn { .search-apply-btn {
font-size: 0.9rem; font-size: var(--step--1);
padding: 0.2rem 0.8rem; padding: var(--space-3xs) var(--space-xs);
background: var(--accent-primary); background: var(--accent-primary);
color: var(--accent-foreground); color: var(--accent-foreground);
border: none; border: none;
@@ -272,7 +272,7 @@
} }
.search-reset-link { .search-reset-link {
font-size: 0.9rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
@@ -283,8 +283,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-2xs);
padding: 1.5rem 0; padding: var(--space-m) 0;
} }
.pagination-btn { .pagination-btn {
@@ -293,11 +293,11 @@
justify-content: center; justify-content: center;
min-width: 2.75rem; min-width: 2.75rem;
min-height: 2.75rem; min-height: 2.75rem;
padding: 0 0.6rem; padding: 0 var(--space-2xs);
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 3px; border-radius: 3px;
color: var(--text-primary); color: var(--text-primary);
font-size: 0.99rem; font-size: var(--step--1);
text-decoration: none; text-decoration: none;
transition: all 0.15s; transition: all 0.15s;
} }
@@ -314,15 +314,15 @@
} }
.pagination-info { .pagination-info {
font-size: 0.99rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 0.5rem; padding: 0 var(--space-2xs);
} }
.search-empty { .search-empty {
padding: 3rem 1.5rem; padding: var(--space-xl) var(--space-m);
color: var(--text-secondary); color: var(--text-secondary);
font-size: 1.1rem; font-size: var(--step-0);
text-align: center; text-align: center;
} }
@@ -331,8 +331,8 @@
background: var(--search-error-bg); background: var(--search-error-bg);
border-left: 3px solid var(--search-error-border); border-left: 3px solid var(--search-error-border);
color: var(--search-error-color); color: var(--search-error-color);
padding: 0.5rem 1rem; padding: var(--space-2xs) var(--space-s);
font-size: 0.97rem; font-size: var(--step--1);
margin: 0.5rem 1.5rem; margin: var(--space-2xs) var(--space-m);
flex-shrink: 0; flex-shrink: 0;
} }

141
public/assets/css/system.css
View File

@@ -9,12 +9,12 @@
display: flex; display: flex;
gap: 0; gap: 0;
border-bottom: 1px solid var(--sys-border); border-bottom: 1px solid var(--sys-border);
margin-bottom: 1.75rem; margin-bottom: var(--space-m);
} }
.sys-tab { .sys-tab {
display: inline-block; display: inline-block;
padding: .55rem 1.1rem; padding: var(--space-3xs) var(--space-s);
font-size: 0.92rem; font-size: var(--step--1);
font-weight: 500; font-weight: 500;
color: var(--sys-text-dim); color: var(--sys-text-dim);
text-decoration: none; text-decoration: none;
@@ -35,23 +35,23 @@
background: var(--sys-bg-panel); background: var(--sys-bg-panel);
border: 1px solid var(--sys-border); border: 1px solid var(--sys-border);
border-radius: 6px; border-radius: 6px;
padding: 1rem 1.25rem 1.25rem; padding: var(--space-s) var(--space-m);
margin-bottom: 1.75rem; margin-bottom: var(--space-m);
} }
.sys-status-header { .sys-status-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 1rem; margin-bottom: var(--space-s);
} }
.sys-status-toggle { .sys-status-toggle {
background: none; background: none;
border: 1px solid var(--sys-border); border: 1px solid var(--sys-border);
color: var(--sys-text-dim); color: var(--sys-text-dim);
border-radius: 3px; border-radius: 3px;
font-size: 0.79rem; font-size: var(--step--2);
font-family: inherit; font-family: inherit;
padding: .2rem .55rem; padding: var(--space-3xs) var(--space-2xs);
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
transition: color .15s, border-color .15s; transition: color .15s, border-color .15s;
@@ -63,9 +63,9 @@
.sys-status-meta { .sys-status-meta {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1.5rem 2rem; gap: var(--space-m) var(--space-l);
margin-top: 1.5rem; margin-top: var(--space-m);
padding-top: 1.25rem; padding-top: var(--space-m);
border-top: 1px solid var(--sys-border-deep); border-top: 1px solid var(--sys-border-deep);
} }
@media (max-width: 700px) { @media (max-width: 700px) {
@@ -76,47 +76,47 @@
.srv-grid { .srv-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem; gap: var(--space-s);
margin-bottom: 2.5rem; margin-bottom: var(--space-l);
} }
.srv-card { .srv-card {
background: var(--sys-bg-surface); background: var(--sys-bg-surface);
border: 1px solid var(--sys-border); border: 1px solid var(--sys-border);
border-radius: 5px; border-radius: 5px;
padding: 1rem 1.25rem; padding: var(--space-s) var(--space-m);
} }
.srv-card__header { .srv-card__header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: .4rem; margin-bottom: var(--space-3xs);
} }
.srv-card__name { .srv-card__name {
font-size: 0.9rem; font-size: var(--step--1);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .07em; letter-spacing: .07em;
color: var(--sys-text-dim); color: var(--sys-text-dim);
font-weight: 500; font-weight: 500;
} }
.srv-card__detail { .srv-card__detail {
font-size: 0.88rem; font-size: var(--step--2);
color: var(--sys-text-dim); color: var(--sys-text-dim);
margin-top: .25rem; margin-top: var(--space-3xs);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
} }
.status-ok { color: var(--accent-green); font-weight: 600; font-size: 0.94rem; } .status-ok { color: var(--accent-green); font-weight: 600; font-size: var(--step--1); }
.status-warn { color: var(--warning); font-weight: 600; font-size: 0.94rem; } .status-warn { color: var(--warning); font-weight: 600; font-size: var(--step--1); }
.status-err { color: var(--error); font-weight: 600; font-size: 0.94rem; } .status-err { color: var(--error); font-weight: 600; font-size: var(--step--1); }
.status-unknown { color: var(--text-tertiary); font-weight: 600; font-size: 0.94rem; } .status-unknown { color: var(--text-tertiary); font-weight: 600; font-size: var(--step--1); }
.srv-section-title { .srv-section-title {
font-size: 0.9rem; font-size: var(--step--1);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .1em; letter-spacing: .1em;
color: var(--sys-text-dim); color: var(--sys-text-dim);
border-bottom: 1px solid var(--sys-border); border-bottom: 1px solid var(--sys-border);
padding-bottom: .4rem; padding-bottom: var(--space-3xs);
margin: 0 0 1rem; margin: 0 0 var(--space-s);
font-weight: 500; font-weight: 500;
} }
/* Compact variant: no border, no margin — used inside sys-status-header */ /* Compact variant: no border, no margin — used inside sys-status-header */
@@ -126,14 +126,14 @@
padding: 0; padding: 0;
} }
/* Sub-section variant: tighter bottom margin — used for PHP/disk sub-headings */ /* Sub-section variant: tighter bottom margin — used for PHP/disk sub-headings */
.srv-section-title--sub { margin-bottom: .75rem; } .srv-section-title--sub { margin-bottom: var(--space-xs); }
/* ── PHP info grid ─────────────────────────────────────────────────────── */ /* ── PHP info grid ─────────────────────────────────────────────────────── */
.php-grid { .php-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: .5rem .75rem; gap: var(--space-3xs) var(--space-xs);
margin-bottom: 2.5rem; margin-bottom: var(--space-l);
} }
/* Flush variant: no bottom margin — used inside sys-status-meta cell */ /* Flush variant: no bottom margin — used inside sys-status-meta cell */
.php-grid--flush { margin-bottom: 0; } .php-grid--flush { margin-bottom: 0; }
@@ -141,19 +141,19 @@
background: var(--sys-bg-surface); background: var(--sys-bg-surface);
border: 1px solid var(--sys-border); border: 1px solid var(--sys-border);
border-radius: 4px; border-radius: 4px;
padding: .5rem .75rem; padding: var(--space-3xs) var(--space-xs);
} }
.php-item__key { .php-item__key {
font-size: 0.83rem; font-size: var(--step--2);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .06em; letter-spacing: .06em;
color: var(--sys-text-dim); color: var(--sys-text-dim);
} }
.php-item__val { .php-item__val {
font-size: 1.01rem; font-size: var(--step--1);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
color: var(--sys-text-bright); color: var(--sys-text-bright);
margin-top: .15rem; margin-top: var(--space-3xs);
} }
/* ── Disk bar ──────────────────────────────────────────────────────────── */ /* ── Disk bar ──────────────────────────────────────────────────────────── */
@@ -161,13 +161,12 @@
background: var(--sys-border); background: var(--sys-border);
border-radius: 3px; border-radius: 3px;
height: 6px; height: 6px;
margin-top: .5rem; margin-top: var(--space-2xs);
overflow: hidden; overflow: hidden;
} }
.disk-bar { .disk-bar {
height: 100%; height: 100%;
border-radius: 3px; border-radius: 3px;
/* width and color driven by PHP via --disk-pct and --disk-color inline vars */
width: var(--disk-pct, 0%); width: var(--disk-pct, 0%);
background: var(--disk-color, var(--accent-green)); background: var(--disk-color, var(--accent-green));
transition: width .3s; transition: width .3s;
@@ -175,14 +174,14 @@
.disk-stats { .disk-stats {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 0.86rem; font-size: var(--step--2);
color: var(--sys-text-dim); color: var(--sys-text-dim);
margin-top: .25rem; margin-top: var(--space-3xs);
} }
/* ── Tab panel loading state ───────────────────────────────────────────── */ /* ── Tab panel loading state ───────────────────────────────────────────── */
#sys-tab-panel { #sys-tab-panel {
min-height: 8rem; /* prevent layout jump while fetching */ min-height: 8rem;
position: relative; position: relative;
} }
#sys-tab-panel.sys-panel-loading { #sys-tab-panel.sys-panel-loading {
@@ -215,11 +214,11 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: .6rem; gap: var(--space-2xs);
margin-bottom: 1.25rem; margin-bottom: var(--space-m);
} }
.log-toolbar label { .log-toolbar label {
font-size: 0.92rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
} }
.log-toolbar select { .log-toolbar select {
@@ -227,19 +226,19 @@
border: 1px solid var(--sys-border); border: 1px solid var(--sys-border);
color: var(--sys-text-bright); color: var(--sys-text-bright);
border-radius: 4px; border-radius: 4px;
padding: .4rem .7rem; padding: var(--space-3xs) var(--space-xs);
font-size: 0.94rem; font-size: var(--step--1);
font-family: inherit; font-family: inherit;
} }
.log-toolbar select:focus { outline: 2px solid var(--accent-primary); } .log-toolbar select:focus { outline: 2px solid var(--accent-primary); }
.log-meta { .log-meta {
font-size: 0.86rem; font-size: var(--step--2);
color: var(--sys-text-dim); color: var(--sys-text-dim);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
margin-bottom: .75rem; margin-bottom: var(--space-xs);
display: flex; display: flex;
gap: 1.5rem; gap: var(--space-m);
flex-wrap: wrap; flex-wrap: wrap;
} }
.log-meta span::before { content: attr(data-label) ": "; opacity: .6; } .log-meta span::before { content: attr(data-label) ": "; opacity: .6; }
@@ -248,34 +247,34 @@
background: var(--sys-bg-surface); background: var(--sys-bg-surface);
border: 1px solid var(--sys-border); border: 1px solid var(--sys-border);
border-radius: 4px; border-radius: 4px;
padding: 1.5rem; padding: var(--space-m);
color: var(--sys-text-dim); color: var(--sys-text-dim);
font-size: 0.97rem; font-size: var(--step--1);
} }
.log-unavail-path { .log-unavail-path {
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 0.88rem; font-size: var(--step--2);
margin-top: .4rem; margin-top: var(--space-3xs);
opacity: .7; opacity: .7;
} }
.log-unavail-dev { .log-unavail-dev {
margin-top: .6rem; margin-top: var(--space-2xs);
font-size: 0.88rem; font-size: var(--step--2);
opacity: .7; opacity: .7;
} }
.log-empty { .log-empty {
color: var(--sys-text-dim); color: var(--sys-text-dim);
font-size: 0.97rem; font-size: var(--step--1);
padding: 1rem 0; padding: var(--space-s) 0;
} }
.log-output { .log-output {
background: var(--sys-bg-deep); background: var(--sys-bg-deep);
border: 1px solid var(--sys-border); border: 1px solid var(--sys-border);
border-radius: 4px; border-radius: 4px;
padding: 1rem; padding: var(--space-s);
overflow-x: auto; overflow-x: auto;
font-family: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
font-size: 0.84rem; font-size: var(--step--2);
line-height: 1.55; line-height: 1.55;
max-height: 62vh; max-height: 62vh;
overflow-y: auto; overflow-y: auto;
@@ -284,7 +283,7 @@
.log-line { .log-line {
display: block; display: block;
white-space: pre; white-space: pre;
padding: .05rem .1rem; padding: var(--space-3xs) var(--space-3xs);
border-radius: 2px; border-radius: 2px;
color: var(--sys-text-body); color: var(--sys-text-body);
} }
@@ -297,7 +296,7 @@
content: attr(data-n); content: attr(data-n);
display: inline-block; display: inline-block;
min-width: 4ch; min-width: 4ch;
margin-right: .75rem; margin-right: var(--space-xs);
opacity: .3; opacity: .3;
text-align: right; text-align: right;
user-select: none; user-select: none;
@@ -306,21 +305,21 @@
background: var(--sys-bg-surface); background: var(--sys-bg-surface);
border: 1px solid var(--sys-border); border: 1px solid var(--sys-border);
border-radius: 3px; border-radius: 3px;
font-size: 0.84rem; font-size: var(--step--2);
padding: .15rem .5rem; padding: var(--space-3xs) var(--space-2xs);
color: var(--sys-text-dim); color: var(--sys-text-dim);
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
} }
.log-copy-btn { .log-copy-btn {
position: absolute; position: absolute;
top: .6rem; top: var(--space-2xs);
right: .6rem; right: var(--space-2xs);
background: var(--sys-bg-surface); background: var(--sys-bg-surface);
border: 1px solid var(--sys-border); border: 1px solid var(--sys-border);
color: var(--sys-text-dim); color: var(--sys-text-dim);
border-radius: 4px; border-radius: 4px;
font-size: 0.84rem; font-size: var(--step--2);
padding: .25rem .6rem; padding: var(--space-3xs) var(--space-2xs);
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
transition: color .15s, border-color .15s; transition: color .15s, border-color .15s;
@@ -336,9 +335,9 @@
} }
.sys-refresh-note { .sys-refresh-note {
font-size: 0.86rem; font-size: var(--step--2);
color: var(--sys-text-dim); color: var(--sys-text-dim);
margin-bottom: 1.25rem; margin-bottom: var(--space-m);
} }
.sys-refresh-note a { .sys-refresh-note a {
color: var(--accent-primary); color: var(--accent-primary);
@@ -349,12 +348,12 @@
/* ── Cache freshness badges ────────────────────────────────────────────── */ /* ── Cache freshness badges ────────────────────────────────────────────── */
.sys-cache-badge { .sys-cache-badge {
display: inline-block; display: inline-block;
font-size: 0.75rem; font-size: var(--step--2);
font-weight: 400; font-weight: 400;
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
padding: .1rem .45rem; padding: var(--space-3xs) var(--space-3xs);
border-radius: 3px; border-radius: 3px;
margin-left: .7rem; margin-left: var(--space-xs);
vertical-align: middle; vertical-align: middle;
line-height: 1.6; line-height: 1.6;
} }
@@ -372,11 +371,11 @@
/* ── Nginx config viewer ───────────────────────────────────────────────── */ /* ── Nginx config viewer ───────────────────────────────────────────────── */
.nginx-source-badge { .nginx-source-badge {
display: inline-block; display: inline-block;
font-size: 0.79rem; font-size: var(--step--2);
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
padding: .15rem .55rem; padding: var(--space-3xs) var(--space-2xs);
border-radius: 3px; border-radius: 3px;
margin-left: .6rem; margin-left: var(--space-2xs);
vertical-align: middle; vertical-align: middle;
} }
.nginx-source-badge--live { .nginx-source-badge--live {

40
public/assets/css/tfe.css
View File

@@ -13,14 +13,14 @@
.tfe-main { .tfe-main {
flex: 1; flex: 1;
padding: 2rem 1.5rem 3rem; padding: var(--space-l) var(--space-m) var(--space-xl);
} }
/* Two-column article layout */ /* Two-column article layout */
.tfe-layout { .tfe-layout {
display: grid; display: grid;
grid-template-columns: 1fr 1.4fr; grid-template-columns: 1fr 1.4fr;
gap: 3rem; gap: var(--space-xl);
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
align-items: start; align-items: start;
@@ -30,13 +30,13 @@
.tfe-left { .tfe-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: var(--space-m);
} }
/* Author (p) — above title */ /* Author (p) — above title */
.tfe-author { .tfe-author {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 1.54rem; font-size: var(--step-1);
font-weight: 400; font-weight: 400;
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
@@ -46,7 +46,7 @@
/* Title (h1) — primary heading, very large */ /* Title (h1) — primary heading, very large */
.tfe-title { .tfe-title {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 2.42rem; font-size: var(--step-3);
font-weight: 400; font-weight: 400;
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
@@ -58,8 +58,8 @@
article dl { article dl {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.45rem; gap: var(--space-3xs);
font-size: 1.04rem; font-size: var(--step--1);
line-height: 1.4; line-height: 1.4;
margin: 0; margin: 0;
} }
@@ -67,7 +67,7 @@ article dl {
/* Each dt/dd pair grouped in a <div> inside <dl> */ /* Each dt/dd pair grouped in a <div> inside <dl> */
article dl > div { article dl > div {
display: flex; display: flex;
gap: 0.4rem; gap: var(--space-3xs);
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -100,7 +100,7 @@ article dl dd a {
/* Synopsis paragraph */ /* Synopsis paragraph */
.tfe-synopsis-text { .tfe-synopsis-text {
font-size: 1.04rem; font-size: var(--step--1);
line-height: 1.7; line-height: 1.7;
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
@@ -110,7 +110,7 @@ article dl dd a {
.tfe-right { .tfe-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: var(--space-m);
} }
/* Each file display unit — target <figure> directly inside <aside> */ /* Each file display unit — target <figure> directly inside <aside> */
@@ -144,16 +144,16 @@ aside figure embed {
/* figcaption under media — target <figcaption> inside <aside> */ /* figcaption under media — target <figcaption> inside <aside> */
aside figcaption { aside figcaption {
font-size: 0.88rem; font-size: var(--step--2);
color: var(--text-secondary); color: var(--text-secondary);
margin: 0.3rem 0 0; margin: var(--space-3xs) 0 0;
font-style: italic; font-style: italic;
} }
/* PDF fallback download link */ /* PDF fallback download link */
.tfe-pdf-fallback { .tfe-pdf-fallback {
font-size: 0.94rem; font-size: var(--step--1);
margin: 0.4rem 0 0; margin: var(--space-3xs) 0 0;
} }
.tfe-pdf-fallback a { .tfe-pdf-fallback a {
@@ -165,10 +165,10 @@ aside figcaption {
/* "Not available" and "no files" notices */ /* "Not available" and "no files" notices */
.tfe-restricted, .tfe-restricted,
.tfe-no-files { .tfe-no-files {
font-size: 1.04rem; font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
font-style: italic; font-style: italic;
padding: 1rem 0; padding: var(--space-s) 0;
margin: 0; margin: 0;
} }
@@ -176,20 +176,20 @@ aside figcaption {
@media (max-width: 900px) { @media (max-width: 900px) {
.tfe-layout { .tfe-layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 2rem; gap: var(--space-l);
} }
.tfe-title { .tfe-title {
font-size: 1.87rem; font-size: var(--step-2);
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.tfe-main { .tfe-main {
padding: 1.5rem 1rem 2rem; padding: var(--space-m) var(--space-s) var(--space-l);
} }
.tfe-title { .tfe-title {
font-size: 1.54rem; font-size: var(--step-1);
} }
} }

38
public/assets/css/variables.css
View File

@@ -2,6 +2,44 @@
CSS VARIABLES (CUSTOM PROPERTIES) CSS VARIABLES (CUSTOM PROPERTIES)
============================================================ */ ============================================================ */
/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
--step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
--step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
--step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
--step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
--step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
}
/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
/* One-up pairs */
--space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
--space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
--space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
--space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
/* Custom pairs */
--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
}
:root { :root {
/* Fonts */ /* Fonts */
--font-body: "BBBDMSans", sans-serif; --font-body: "BBBDMSans", sans-serif;