From 78449afe641f89c7d619152589617a1cf67f740d Mon Sep 17 00:00:00 2001 From: Pontoporeia Date: Mon, 20 Apr 2026 16:48:15 +0200 Subject: [PATCH] some css changes --- TODO.md | 13 +- app/public/assets/css/apropos.css | 363 +++++++++--------- app/public/assets/css/common.css | 301 +++++++-------- app/public/assets/css/main.css | 275 ------------- app/public/assets/css/public.css | 276 +++++++++++++ app/public/assets/css/repertoire.css | 340 ++++++++++++++++ app/public/assets/css/search.css | 338 ---------------- app/public/assets/css/tfe.css | 187 +++++---- app/public/assets/css/variables.css | 269 +++++++------ app/public/assets/{ => favicon}/favicon.svg | 0 app/router.php | 35 +- app/src/Controllers/HomeController.php | 100 +++-- app/src/Controllers/SearchController.php | 286 +++++++------- .../f528764d624db129b32c21fbca0cb8d6.json | 1 + app/storage/test.db | Bin 270336 -> 282624 bytes app/templates/footer.php | 3 - app/templates/{ => partials}/search-bar.php | 0 .../{flash-messages.php => toast.php} | 0 18 files changed, 1426 insertions(+), 1361 deletions(-) delete mode 100644 app/public/assets/css/main.css create mode 100644 app/public/assets/css/public.css create mode 100644 app/public/assets/css/repertoire.css delete mode 100644 app/public/assets/css/search.css rename app/public/assets/{ => favicon}/favicon.svg (100%) create mode 100644 app/storage/cache/rate_limit/f528764d624db129b32c21fbca0cb8d6.json rename app/templates/{ => partials}/search-bar.php (100%) rename app/templates/partials/{flash-messages.php => toast.php} (100%) diff --git a/TODO.md b/TODO.md index ee8dee5..d445ce3 100644 --- a/TODO.md +++ b/TODO.md @@ -1,6 +1,7 @@ -[x] Audit required fields in both admin and student forms -[x] Fix: `checkbox-list.php` partial supports `$required` (fieldset gets `required` + `aria-required`) -[x] Mark `languages` checkbox list as required in both forms -[x] Added visual `*` indicator on all required fields (CSS bold labels + red asterisk) -[x] Added "* Champs obligatoires" note at top of both forms -[x] Verified: all server-side required fields match client-side `required` attrs and visual indicators +# TODO + +## Fix repertoire.php +- [ ] Fix AP and orientation columns not working like other columns +- [ ] Make main element scrollable instead of body +- [ ] Update public.css (general) +- [ ] Update repertoire.css (page-specific) diff --git a/app/public/assets/css/apropos.css b/app/public/assets/css/apropos.css index cfdc410..9112303 100644 --- a/app/public/assets/css/apropos.css +++ b/app/public/assets/css/apropos.css @@ -8,16 +8,9 @@ /* Page shell */ /* ------------------------------------------------------------------ */ -.apropos-body { - display: flex; - flex-direction: column; - min-height: 100vh; - background: var(--bg-primary); -} - .apropos-main { - flex: 1; - padding: var(--space-xl) var(--space-l) var(--space-2xl); + flex: 1; + padding: var(--space-xl) var(--space-l) var(--space-2xl); } /* ------------------------------------------------------------------ */ @@ -25,12 +18,12 @@ /* ------------------------------------------------------------------ */ .apropos-layout { - display: grid; - grid-template-columns: 180px 1fr; - gap: var(--space-2xl); - max-width: 860px; - margin: 0 auto; - align-items: start; + display: grid; + grid-template-columns: 180px 1fr; + gap: var(--space-2xl); + max-width: 860px; + margin: 0 auto; + align-items: start; } /* ------------------------------------------------------------------ */ @@ -38,60 +31,60 @@ /* ------------------------------------------------------------------ */ .apropos-toc { - position: sticky; - top: var(--space-l); + position: sticky; + top: var(--space-l); } .apropos-toc-label { - font-family: var(--font-body); - font-size: var(--step--2); - font-weight: 600; - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--text-tertiary); - margin: 0 0 var(--space-2xs) 0; + font-family: var(--font-body); + font-size: var(--step--2); + font-weight: 600; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--text-tertiary); + margin: 0 0 var(--space-2xs) 0; } .apropos-toc ul { - list-style: none; - margin: 0 0 var(--space-m) 0; - padding: 0; - display: flex; - flex-direction: column; - gap: var(--space-3xs); + list-style: none; + margin: 0 0 var(--space-m) 0; + padding: 0; + display: flex; + flex-direction: column; + gap: var(--space-3xs); } .apropos-toc ul a { - font-family: var(--font-body); - font-size: var(--step--1); - color: var(--text-secondary); - text-decoration: none; - display: block; - padding: var(--space-3xs) 0; - transition: color 0.15s; - border-left: 2px solid transparent; - padding-left: var(--space-2xs); + font-family: var(--font-body); + font-size: var(--step--1); + color: var(--text-secondary); + text-decoration: none; + display: block; + padding: var(--space-3xs) 0; + transition: color 0.15s; + border-left: 2px solid transparent; + padding-left: var(--space-2xs); } .apropos-toc ul a:hover { - color: var(--text-primary); - border-left-color: var(--accent-primary); + color: var(--text-primary); + border-left-color: var(--accent-primary); } .apropos-toc-erg { - padding-top: var(--space-s); - border-top: 1px solid var(--border-primary); + padding-top: var(--space-s); + border-top: 1px solid var(--border-primary); } .apropos-toc-erg a { - font-size: var(--step--2); - color: var(--accent-primary); - text-decoration: none; - transition: opacity 0.15s; + font-size: var(--step--2); + color: var(--accent-primary); + text-decoration: none; + transition: opacity 0.15s; } .apropos-toc-erg a:hover { - opacity: 0.75; + opacity: 0.75; } /* ------------------------------------------------------------------ */ @@ -99,21 +92,21 @@ /* ------------------------------------------------------------------ */ .apropos-content { - display: flex; - flex-direction: column; - gap: 0; + display: flex; + flex-direction: column; + gap: 0; } .apropos-section { - padding-bottom: var(--space-xl); - border-bottom: 1px solid var(--border-primary); - margin-bottom: var(--space-xl); + padding-bottom: var(--space-xl); + border-bottom: 1px solid var(--border-primary); + margin-bottom: var(--space-xl); } .apropos-section:last-child { - border-bottom: none; - margin-bottom: 0; - padding-bottom: 0; + border-bottom: none; + margin-bottom: 0; + padding-bottom: 0; } /* ------------------------------------------------------------------ */ @@ -121,12 +114,12 @@ /* ------------------------------------------------------------------ */ .apropos-section-title { - font-family: var(--font-display); - font-size: var(--step-3); - font-weight: 400; - color: var(--text-primary); - margin: 0 0 var(--space-m) 0; - line-height: 1.1; + font-family: var(--font-display); + font-size: var(--step-3); + font-weight: 400; + color: var(--text-primary); + margin: 0 0 var(--space-m) 0; + line-height: 1.1; } /* ------------------------------------------------------------------ */ @@ -134,58 +127,68 @@ /* ------------------------------------------------------------------ */ .prose { - font-family: var(--font-body); - font-size: var(--step-0); - line-height: 1.6; - color: var(--text-primary); - font-weight: 400; + font-family: var(--font-body); + font-size: var(--step-0); + line-height: 1.6; + color: var(--text-primary); + font-weight: 400; } .prose p { - margin: 0 0 1em 0; + margin: 0 0 1em 0; } .prose p:last-child { - margin-bottom: 0; + margin-bottom: 0; } .prose h1, .prose h2, .prose h3 { - font-family: var(--font-display); - font-weight: 400; - margin: 1.5em 0 0.5em 0; + font-family: var(--font-display); + font-weight: 400; + margin: 1.5em 0 0.5em 0; } -.prose h1 { font-size: var(--step-3); } -.prose h2 { font-size: var(--step-2); } -.prose h3 { font-size: var(--step-1); } +.prose h1 { + font-size: var(--step-3); +} +.prose h2 { + font-size: var(--step-2); +} +.prose h3 { + font-size: var(--step-1); +} .prose a { - color: var(--accent-primary); - text-decoration: underline; - text-underline-offset: 2px; + color: var(--accent-primary); + text-decoration: underline; + text-underline-offset: 2px; } .prose ul, .prose ol { - padding-left: var(--space-m); - margin-bottom: var(--space-s); + padding-left: var(--space-m); + margin-bottom: var(--space-s); } .prose li { - margin-bottom: 0.3em; + margin-bottom: 0.3em; } -.prose strong { font-weight: 700; } -.prose em { font-style: italic; } +.prose strong { + font-weight: 700; +} +.prose em { + font-style: italic; +} .prose code { - font-family: "Courier New", Courier, monospace; - font-size: 0.88em; - background: var(--bg-tertiary); - padding: 0.1em 0.3em; - border-radius: 2px; + font-family: "Courier New", Courier, monospace; + font-size: 0.88em; + background: var(--bg-tertiary); + padding: 0.1em 0.3em; + border-radius: 2px; } /* ------------------------------------------------------------------ */ @@ -193,47 +196,47 @@ /* ------------------------------------------------------------------ */ .apropos-contacts-grid { - display: flex; - flex-direction: column; - gap: 0; + display: flex; + flex-direction: column; + gap: 0; } .apropos-contact-card { - font-style: normal; - padding: var(--space-s) 0; - border-bottom: 1px solid var(--border-primary); + font-style: normal; + padding: var(--space-s) 0; + border-bottom: 1px solid var(--border-primary); } .apropos-contact-card:first-child { - border-top: 1px solid var(--border-primary); + border-top: 1px solid var(--border-primary); } .apropos-contact-card strong { - display: block; - font-size: var(--step-0); - font-weight: 600; - color: var(--text-primary); - margin-bottom: var(--space-3xs); + display: block; + font-size: var(--step-0); + font-weight: 600; + color: var(--text-primary); + margin-bottom: var(--space-3xs); } .apropos-contact-card span { - display: block; - font-size: var(--step--1); - color: var(--text-secondary); - line-height: 1.4; - margin-bottom: var(--space-3xs); + display: block; + font-size: var(--step--1); + color: var(--text-secondary); + line-height: 1.4; + margin-bottom: var(--space-3xs); } .apropos-contact-card a { - font-size: var(--step--1); - color: var(--accent-primary); - text-decoration: underline; - text-underline-offset: 2px; - transition: opacity 0.15s; + font-size: var(--step--1); + color: var(--accent-primary); + text-decoration: underline; + text-underline-offset: 2px; + transition: opacity 0.15s; } .apropos-contact-card a:hover { - opacity: 0.75; + opacity: 0.75; } /* ------------------------------------------------------------------ */ @@ -241,39 +244,39 @@ /* ------------------------------------------------------------------ */ .apropos-credits-list { - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 0; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 0; } .apropos-credit-row { - display: grid; - grid-template-columns: 1fr 1.6fr; - gap: var(--space-s); - padding: var(--space-s) 0; - border-bottom: 1px solid var(--border-primary); - align-items: baseline; + display: grid; + grid-template-columns: 1fr 1.6fr; + gap: var(--space-s); + padding: var(--space-s) 0; + border-bottom: 1px solid var(--border-primary); + align-items: baseline; } .apropos-credit-row:first-child { - border-top: 1px solid var(--border-primary); + border-top: 1px solid var(--border-primary); } .apropos-credits-list dt { - font-size: var(--step--2); - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; - color: var(--text-tertiary); + font-size: var(--step--2); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text-tertiary); } .apropos-credits-list dd { - font-size: var(--step--1); - color: var(--text-primary); - margin: 0; - line-height: 1.5; + font-size: var(--step--1); + color: var(--text-primary); + margin: 0; + line-height: 1.5; } /* ------------------------------------------------------------------ */ @@ -281,7 +284,7 @@ /* ------------------------------------------------------------------ */ .apropos-single { - max-width: 720px; + max-width: 720px; } /* ------------------------------------------------------------------ */ @@ -289,62 +292,62 @@ /* ------------------------------------------------------------------ */ @media (max-width: 900px) { - .apropos-layout { - grid-template-columns: 1fr; - gap: var(--space-l); - } + .apropos-layout { + grid-template-columns: 1fr; + gap: var(--space-l); + } - .apropos-toc { - position: static; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--space-s); - padding-bottom: var(--space-s); - border-bottom: 1px solid var(--border-primary); - } + .apropos-toc { + position: static; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--space-s); + padding-bottom: var(--space-s); + border-bottom: 1px solid var(--border-primary); + } - .apropos-toc-label { - margin: 0; - } + .apropos-toc-label { + margin: 0; + } - .apropos-toc ul { - flex-direction: row; - margin: 0; - gap: var(--space-xs); - } + .apropos-toc ul { + flex-direction: row; + margin: 0; + gap: var(--space-xs); + } - .apropos-toc ul a { - border-left: none; - padding-left: 0; - } + .apropos-toc ul a { + border-left: none; + padding-left: 0; + } - .apropos-toc-erg { - border-top: none; - padding-top: 0; - margin-left: auto; - } + .apropos-toc-erg { + border-top: none; + padding-top: 0; + margin-left: auto; + } - .prose { - font-size: var(--step-0); - } + .prose { + font-size: var(--step-0); + } - .apropos-section-title { - font-size: var(--step-2); - } + .apropos-section-title { + font-size: var(--step-2); + } } @media (max-width: 600px) { - .apropos-main { - padding: var(--space-m) var(--space-s) var(--space-xl); - } + .apropos-main { + padding: var(--space-m) var(--space-s) var(--space-xl); + } - .prose { - font-size: var(--step-0); - } + .prose { + font-size: var(--step-0); + } - .apropos-credit-row { - grid-template-columns: 1fr; - gap: var(--space-3xs); - } + .apropos-credit-row { + grid-template-columns: 1fr; + gap: var(--space-3xs); + } } diff --git a/app/public/assets/css/common.css b/app/public/assets/css/common.css index 13a9d6e..e560856 100644 --- a/app/public/assets/css/common.css +++ b/app/public/assets/css/common.css @@ -1,213 +1,182 @@ @import url("./variables.css"); -@font-face { - font-family: "Ductus"; - src: url("../fonts/DuctusRegular.otf") format("opentype"); - font-style: normal; - font-weight: 400; - font-display: swap; -} - -@font-face { - font-family: "BBBDMSans"; - src: url("../fonts/BBBDMSans-Light.otf") format("opentype"); - font-style: normal; - font-weight: 300; - font-display: swap; -} - -@font-face { - font-family: "BBBDMSans"; - src: url("../fonts/BBBDMSans-Regular.otf") format("opentype"); - font-style: normal; - font-weight: 400; - font-display: swap; -} - -@font-face { - font-family: "BBBDMSans"; - src: url("../fonts/BBBDMSans-Medium.otf") format("opentype"); - font-style: normal; - font-weight: 500; - font-display: swap; -} - -@font-face { - font-family: "BBBDMSans"; - src: url("../fonts/BBBDMSans-Bold.otf") format("opentype"); - font-style: normal; - font-weight: 700; - font-display: swap; -} - *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } html, body { - margin: 0; - padding: 0; - height: 100%; + margin: 0; + padding: 0; + height: 100%; } body { - font-family: var(--font-body); - background: var(--bg-primary); - color: var(--text-primary); + font-family: var(--font-body); + background: var(--bg-primary); + color: var(--text-primary); + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 92%, + rgba(149, 87, 181, 1) 100% + ); +} + +html, +body { + margin: 0; + height: 100%; + overflow: hidden; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } a:hover { - text-decoration: none; + text-decoration: none; } -/* ============================================================ - HEADER / NAV BAR (public pages) - ============================================================ */ body > header { - flex-shrink: 0; - background: linear-gradient( - 180deg, - var(--gradient-1) 0%, - var(--gradient-2) 33%, - var(--gradient-3) 66%, - var(--gradient-4) 100% - ); + flex-shrink: 0; + background: linear-gradient( + 180deg, + var(--gradient-1) 0%, + var(--gradient-2) 33%, + var(--gradient-3) 66%, + var(--gradient-4) 100% + ); } body > header nav { - padding: var(--space-s) var(--space-s); - display: flex; - align-items: center; - justify-content: space-between; + padding: var(--space-s) var(--space-s); + display: flex; + align-items: center; + justify-content: space-between; } .nav-logo { - font-family: var(--font-display); - font-size: var(--step-2); - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--accent-foreground); - text-decoration: none; - text-shadow: - 0 0 16px var(--header-shadow-strong), - 0 0 32px var(--header-shadow-soft); + font-family: var(--font-display); + font-size: var(--step-2); + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--accent-foreground); + text-decoration: none; + text-shadow: + 0 0 16px var(--header-shadow-strong), + 0 0 32px var(--header-shadow-soft); } .nav-left { - display: flex; - align-items: center; - gap: var(--space-l); + display: flex; + align-items: center; + gap: var(--space-l); } .nav-left-links, .nav-right-links { - display: flex; - gap: var(--space-l); - align-items: center; - list-style: none; - margin: 0; - padding: 0; + display: flex; + gap: var(--space-l); + align-items: center; + list-style: none; + margin: 0; + padding: 0; } body > header nav > a { - font-family: var(--font-display); - font-size: var(--step-0); - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--accent-foreground); - text-decoration: none; + font-family: var(--font-display); + font-size: var(--step-0); + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--accent-foreground); + text-decoration: none; } body > header nav > ul { - display: flex; - gap: var(--space-l); - align-items: center; - list-style: none; - margin: 0; - padding: 0; + display: flex; + gap: var(--space-l); + align-items: center; + list-style: none; + margin: 0; + padding: 0; } body > header nav ul a { - font-size: var(--step--1); - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--accent-foreground); - text-decoration: none; - transition: opacity 0.15s; + font-size: var(--step--1); + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--accent-foreground); + text-decoration: none; + transition: opacity 0.15s; } /* Subtle shadow on all header text to improve legibility against the gradient */ body > header nav > a, body > header nav ul a { - text-shadow: - 0 0 16px var(--header-shadow-strong), - 0 0 32px var(--header-shadow-soft); + text-shadow: + 0 0 16px var(--header-shadow-strong), + 0 0 32px var(--header-shadow-soft); } body > header nav ul a:hover { - opacity: 1; + opacity: 1; } body > header nav ul a[aria-current="page"] { - opacity: 1; - border-bottom: 1px solid var(--header-nav-active-border); - padding-bottom: 1px; + opacity: 1; + border-bottom: 1px solid var(--header-nav-active-border); + padding-bottom: 1px; +} + +main { + overflow: scroll; } /* ============================================================ SEARCH BAR (shared) ============================================================ */ .header-search-wrap { - padding: 0 0; - background-color: var(--gradient-4); + padding: 0 0; + background-color: var(--gradient-4); - background: linear-gradient( - 180deg, - var(--gradient-4) 0%, - #ffffffee 100% - ); + background: linear-gradient(180deg, var(--gradient-4) 0%, #ffffffee 100%); } .header-search-wrap form[role="search"] { - display: flex; - align-items: center; - gap: var(--space-2xs); - padding: var(--space-3xs) var(--space-s); - border: 1px solid var(--accent-primary); - border-radius: 10px; - background: var(--bg-primary); - width: 100%; - color: var(--accent-primary); + display: flex; + align-items: center; + gap: var(--space-2xs); + padding: var(--space-3xs) var(--space-s); + border: 1px solid var(--accent-primary); + border-radius: 10px; + background: var(--bg-primary); + width: 100%; + color: var(--accent-primary); } .header-search-wrap form[role="search"] svg { - color: var(--text-tertiary); - flex-shrink: 0; - width: 16px; - height: 16px; - stroke: var(--accent-primary); + color: var(--text-tertiary); + flex-shrink: 0; + width: 16px; + height: 16px; + stroke: var(--accent-primary); } .header-search-wrap form[role="search"] input { - flex: 1; - border: none; - font-size: var(--step--1); - color: var(--text-primary); - background: transparent; - padding: var(--space-3xs) 0; - font-family: inherit; + flex: 1; + border: none; + font-size: var(--step--1); + color: var(--text-primary); + background: transparent; + padding: var(--space-3xs) 0; + font-family: inherit; } .header-search-wrap form[role="search"] input::placeholder { - color: var(--accent-primary); + color: var(--accent-primary); } /* ============================================================ @@ -216,48 +185,48 @@ body > header nav ul a[aria-current="page"] { /* Visually-hidden but screen-reader-accessible */ .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } /* Skip-to-content link (visible only on keyboard focus) */ .skip-link { - position: absolute; - top: -999px; - left: 1rem; - z-index: 9999; - padding: var(--space-2xs) var(--space-s); - background: var(--accent-primary); - color: var(--text-primary); - font-size: var(--step--1); - font-weight: 600; - text-decoration: none; - border-radius: 0 0 4px 4px; + position: absolute; + top: -999px; + left: 1rem; + z-index: 9999; + padding: var(--space-2xs) var(--space-s); + background: var(--accent-primary); + color: var(--text-primary); + font-size: var(--step--1); + font-weight: 600; + text-decoration: none; + border-radius: 0 0 4px 4px; } .skip-link:focus { - top: 0; + top: 0; } /* Consistent keyboard-focus outline for all interactive elements */ :focus-visible { - outline: 2px solid var(--accent-primary); - outline-offset: 2px; + outline: 2px solid var(--accent-primary); + outline-offset: 2px; } /* Respect user motion preferences */ @media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - transition-duration: 0.01ms !important; - animation-duration: 0.01ms !important; - } + *, + *::before, + *::after { + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + } } diff --git a/app/public/assets/css/main.css b/app/public/assets/css/main.css deleted file mode 100644 index b1b25cd..0000000 --- a/app/public/assets/css/main.css +++ /dev/null @@ -1,275 +0,0 @@ -/* ============================================================ - HOME PAGE (index.php) - ============================================================ */ - -@import url("./variables.css"); - -.home-body { - display: flex; - flex-direction: column; - height: 100vh; - overflow: hidden; - background: var(--bg-primary); -} - -/* Cards grid — scrollable main area */ -.home-main { - flex: 1; - overflow-y: auto; - overflow-x: hidden; - padding: 0; -} - -.cards-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: var(--space-s); - list-style: none; - margin: 0; - padding: var(--space-xs) var(--space-s) var(--space-m); -} - -@media (min-width: 1400px) { - .cards-container { - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - } -} - -@media (max-width: 768px) { - .cards-container { - grid-template-columns: repeat(2, 1fr); - } -} - -/* Each card = list item containing a block link */ -.card { - display: flex; - flex-direction: column; - cursor: pointer; - border: 1px solid var(--border-primary); - border-radius: 8px; - background: var(--bg-primary); - overflow: hidden; - transition: box-shadow 0.2s ease, transform 0.2s ease; -} - -.card:hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); - transform: translateY(-2px); -} - -.card > a { - text-decoration: none; - color: inherit; - display: flex; - flex-direction: column; - flex: 1; - border-radius: inherit; -} - -/* Media wrapper:
for real images/video,
for placeholders */ -.home-body figure { - width: 100%; - aspect-ratio: 4/3; - overflow: hidden; - background: var(--bg-tertiary); - position: relative; - margin: 0; /* reset
default margin */ - border-radius: 7px 7px 0 0; -} - -.home-body figure img, -.home-body figure video { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - transition: transform 0.3s ease; -} - -.card:hover figure img, -.card:hover figure video { - transform: scale(1.02); -} - -.card__media--placeholder { - width: 100%; - height: 100%; - background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-active)); - display: flex; - align-items: center; - justify-content: center; - color: var(--text-tertiary); - font-size: var(--step-3); -} - -.card__media--gradient { - width: 100%; - aspect-ratio: 4/3; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: var(--space-s); - text-align: center; - box-sizing: border-box; - border-radius: 7px 7px 0 0; - background: linear-gradient( - 180deg, - rgba(60, 133, 108, 1) 0%, - rgba(96, 236, 180, 1) 33%, - rgba(227, 144, 255, 1) 66%, - rgba(149, 87, 181, 1) 100% - ); -} - -.card__gradient-author { - color: var(--accent-foreground); - font-size: var(--step--2); - opacity: 0.85; - margin-bottom: 0.25rem; - display: block; -} - -.card__gradient-title { - color: var(--accent-foreground); - font-size: var(--step--1); - font-weight: 600; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Section label */ -.home-section-label { - font-style: normal; - background: transparent; - color: var(--text-primary); - font-size: var(--step--2); - font-weight: 600; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: var(--space-s) var(--space-s) var(--space-xs); - border-bottom: 1px solid var(--border-primary); - margin: 0; -} - -/* Card caption —

directly inside the card link, below the media */ -.home-body li > a > p { - padding: var(--space-2xs) var(--space-xs) var(--space-xs); - font-size: var(--step--1); - line-height: 1.35; - color: var(--text-primary); - margin: 0; - font-weight: 400; - border-top: 1px solid var(--border-primary); -} - -/* Empty-state message shown when no cards exist */ -.cards-empty { - padding: var(--space-l); - color: var(--text-tertiary); - font-size: var(--step--1); - list-style: none; -} - -/* Filter info */ -.filter-info { - background: var(--accent-muted); - color: var(--accent-secondary); - padding: var(--space-3xs) var(--space-s); - font-size: var(--step--1); - display: flex; - align-items: center; - gap: var(--space-s); - flex-shrink: 0; -} - -.clear-filter { - color: var(--accent-secondary); - text-decoration: none; - padding: var(--space-3xs) var(--space-2xs); - background: var(--accent-muted); - border-radius: 3px; - font-size: var(--step--1); -} - -.clear-filter:hover { - background: var(--accent-secondary); -} - -/* Pagination */ -.pagination-wrap { - border-top: 1px solid var(--border-secondary); - background: var(--bg-primary); - flex-shrink: 0; -} - -.pagination-wrap ul { - display: flex; - justify-content: center; - align-items: center; - gap: var(--space-2xs); - padding: var(--space-s); - list-style: none; - margin: 0; -} - -.pagination-btn { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 2.75rem; - min-height: 2.75rem; - padding: 0 var(--space-2xs); - border: 1px solid var(--border-secondary); - border-radius: 3px; - color: var(--text-primary); - font-size: var(--step--1); - text-decoration: none; - transition: all 0.15s; -} - -.pagination-btn:hover:not(.disabled) { - border-color: var(--accent-primary); - color: var(--accent-primary); -} - -.pagination-btn.disabled { - opacity: 0.3; - cursor: not-allowed; - pointer-events: none; -} - -.pagination-info { - font-size: var(--step--1); - color: var(--text-secondary); - padding: 0 var(--space-2xs); -} - -.page-current { - font-weight: 600; - color: var(--text-primary); -} - -/* Suppress card hover scale for users who prefer reduced motion */ -@media (prefers-reduced-motion: reduce) { - .home-body figure img, - .home-body figure video { - transition: none; - } - .card:hover figure img, - .card:hover figure video { - transform: none; - } - .card__media--gradient { - transition: none; - } - .card { - transition: none; - } - .card:hover { - transform: none; - } -} diff --git a/app/public/assets/css/public.css b/app/public/assets/css/public.css new file mode 100644 index 0000000..c4237cd --- /dev/null +++ b/app/public/assets/css/public.css @@ -0,0 +1,276 @@ +/* ============================================================ + HOME PAGE (index.php) + ============================================================ */ + +@import url("./variables.css"); + +main { + display: flex; + flex-direction: column; + min-height: 100vh; + overflow: hidden; +} + +/* Cards grid — scrollable main area */ +.home-main { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + padding: 0; +} + +.cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: var(--space-s); + list-style: none; + margin: 0; + padding: var(--space-xs) var(--space-s) var(--space-m); +} + +@media (min-width: 1400px) { + .cards-container { + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + } +} + +@media (max-width: 768px) { + .cards-container { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Each card = list item containing a block link */ +.card { + display: flex; + flex-direction: column; + cursor: pointer; + border: 1px solid var(--border-primary); + border-radius: 8px; + background: var(--bg-primary); + overflow: hidden; + transition: + box-shadow 0.2s ease, + transform 0.2s ease; +} + +.card:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); + transform: translateY(-2px); +} + +.card > a { + text-decoration: none; + color: inherit; + display: flex; + flex-direction: column; + flex: 1; + border-radius: inherit; +} + +/* Media wrapper:

for real images/video,
for placeholders */ +.home-body figure { + width: 100%; + aspect-ratio: 4/3; + overflow: hidden; + background: var(--bg-tertiary); + position: relative; + margin: 0; /* reset
default margin */ + border-radius: 7px 7px 0 0; +} + +.home-body figure img, +.home-body figure video { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform 0.3s ease; +} + +.card:hover figure img, +.card:hover figure video { + transform: scale(1.02); +} + +.card__media--placeholder { + width: 100%; + height: 100%; + background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-active)); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-tertiary); + font-size: var(--step-3); +} + +.card__media--gradient { + width: 100%; + aspect-ratio: 4/3; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--space-s); + text-align: center; + box-sizing: border-box; + border-radius: 7px 7px 0 0; + background: linear-gradient( + 180deg, + rgba(60, 133, 108, 1) 0%, + rgba(96, 236, 180, 1) 33%, + rgba(227, 144, 255, 1) 66%, + rgba(149, 87, 181, 1) 100% + ); +} + +.card__gradient-author { + color: var(--accent-foreground); + font-size: var(--step--2); + opacity: 0.85; + margin-bottom: 0.25rem; + display: block; +} + +.card__gradient-title { + color: var(--accent-foreground); + font-size: var(--step--1); + font-weight: 600; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Section label */ +.home-section-label { + font-style: normal; + background: transparent; + color: var(--text-primary); + font-size: var(--step--2); + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + padding: var(--space-s) var(--space-s) var(--space-xs); + border-bottom: 1px solid var(--border-primary); + margin: 0; +} + +/* Card caption —

directly inside the card link, below the media */ +.home-body li > a > p { + padding: var(--space-2xs) var(--space-xs) var(--space-xs); + font-size: var(--step--1); + line-height: 1.35; + color: var(--text-primary); + margin: 0; + font-weight: 400; + border-top: 1px solid var(--border-primary); +} + +/* Empty-state message shown when no cards exist */ +.cards-empty { + padding: var(--space-l); + color: var(--text-tertiary); + font-size: var(--step--1); + list-style: none; +} + +/* Filter info */ +.filter-info { + background: var(--accent-muted); + color: var(--accent-secondary); + padding: var(--space-3xs) var(--space-s); + font-size: var(--step--1); + display: flex; + align-items: center; + gap: var(--space-s); + flex-shrink: 0; +} + +.clear-filter { + color: var(--accent-secondary); + text-decoration: none; + padding: var(--space-3xs) var(--space-2xs); + background: var(--accent-muted); + border-radius: 3px; + font-size: var(--step--1); +} + +.clear-filter:hover { + background: var(--accent-secondary); +} + +/* Pagination */ +.pagination-wrap { + border-top: 1px solid var(--border-secondary); + background: var(--bg-primary); + flex-shrink: 0; +} + +.pagination-wrap ul { + display: flex; + justify-content: center; + align-items: center; + gap: var(--space-2xs); + padding: var(--space-s); + list-style: none; + margin: 0; +} + +.pagination-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.75rem; + min-height: 2.75rem; + padding: 0 var(--space-2xs); + border: 1px solid var(--border-secondary); + border-radius: 3px; + color: var(--text-primary); + font-size: var(--step--1); + text-decoration: none; + transition: all 0.15s; +} + +.pagination-btn:hover:not(.disabled) { + border-color: var(--accent-primary); + color: var(--accent-primary); +} + +.pagination-btn.disabled { + opacity: 0.3; + cursor: not-allowed; + pointer-events: none; +} + +.pagination-info { + font-size: var(--step--1); + color: var(--text-secondary); + padding: 0 var(--space-2xs); +} + +.page-current { + font-weight: 600; + color: var(--text-primary); +} + +/* Suppress card hover scale for users who prefer reduced motion */ +@media (prefers-reduced-motion: reduce) { + .home-body figure img, + .home-body figure video { + transition: none; + } + .card:hover figure img, + .card:hover figure video { + transform: none; + } + .card__media--gradient { + transition: none; + } + .card { + transition: none; + } + .card:hover { + transform: none; + } +} diff --git a/app/public/assets/css/repertoire.css b/app/public/assets/css/repertoire.css new file mode 100644 index 0000000..e19a446 --- /dev/null +++ b/app/public/assets/css/repertoire.css @@ -0,0 +1,340 @@ +/* ============================================================ + RÉPERTOIRE / SEARCH PAGE (repertoire.php) + ============================================================ */ + +@import url("./variables.css"); + +.search-main { + flex: 1; + overflow-y: auto; + overflow-x: hidden; +} + +/* ---- 6-column index layout ---- */ +.repertoire-index { + display: grid; + grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr; + gap: 0; + padding: 0 var(--space-m); + min-height: 100%; +} + +@media (max-width: 1024px) { + .repertoire-index { + grid-template-columns: 1fr 1fr 1fr; + padding: 0 var(--space-s); + min-height: auto; + } + + .repertoire-col { + border-bottom: 1px solid var(--border-primary); + } + + .repertoire-col:nth-child(3n) { + border-right: none; + } +} + +@media (max-width: 600px) { + .repertoire-index { + grid-template-columns: 1fr; + padding: 0 var(--space-s); + min-height: auto; + } + + .repertoire-col { + border-right: none; + border-bottom: 1px solid var(--border-primary); + padding: var(--space-s) 0 var(--space-m); + } + + .repertoire-col:last-child { + border-bottom: none; + } +} + +.repertoire-col { + padding: var(--space-xs) var(--space-2xs) var(--space-l); +} + +.repertoire-col:last-child { + border-right: none; +} + +.repertoire-index section > h2 { + font-family: var(--font-display); + font-size: var(--step--2); + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--text-secondary); + font-weight: 400; + margin: 0 0 var(--space-2xs) 0; + padding-bottom: var(--space-3xs); + border-bottom: 1px solid var(--border-secondary); +} + +/* Strip list chrome inside repertoire columns */ +.repertoire-col ul { + list-style: none; + margin: 0; + padding: 0; +} + +/* ---- rep-entry: shared base (button + link variants) ---- */ +.rep-entry { + display: block; + width: 100%; + text-align: left; + background: none; + border: none; + padding: var(--space-3xs) 0; + margin: 0; + font-family: inherit; + font-size: var(--step-0); + color: var(--text-primary); + line-height: 1.4; + cursor: pointer; + text-decoration: none; + transition: + color 0.15s, + opacity 0.15s; +} + +.rep-entry:hover { + color: var(--accent-primary); +} + +/* Link variant (students col) — no underline by default */ +.rep-entry--link { + text-decoration: none; +} + +/* Selected: accent color */ +.rep-entry--selected { + color: var(--accent-primary) !important; +} + +/* Faded/disabled: muted, not interactive */ +.rep-entry--faded { + opacity: 0.3; + cursor: not-allowed; + pointer-events: none; +} + +/* Years column — big bold numbers */ +.repertoire-col[data-col="years"] .rep-entry { + font-size: var(--step-3); + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.02em; + padding: var(--space-3xs) 0; +} + +/* Empty state in students column */ +.rep-empty { + color: var(--text-tertiary); + font-size: var(--step--1); + padding: var(--space-3xs) 0; +} + +/* ---- HTMX loading indicator ---- */ +.rep-indicator { + display: block; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 2px; + background: var(--accent-primary); + opacity: 0; + transition: opacity 0.15s; + z-index: 100; + pointer-events: none; +} + +.rep-indicator.htmx-request { + opacity: 1; + animation: rep-progress 1.2s ease-in-out infinite; +} + +@keyframes rep-progress { + 0% { + transform: scaleX(0); + transform-origin: left; + } + 50% { + transform: scaleX(0.7); + transform-origin: left; + } + 100% { + transform: scaleX(1); + transform-origin: left; + } +} + +/* ---- Search results view (grid) ---- */ +.search-results-header { + display: block; + font-size: var(--step--1); + color: var(--text-secondary); + margin: var(--space-s) var(--space-m) var(--space-2xs); +} + +.results-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: var(--space-m); + list-style: none; + margin: 0; + padding: var(--space-2xs) var(--space-m) var(--space-m); +} + +.result-card { + text-decoration: none; + color: inherit; + display: flex; + flex-direction: column; + gap: var(--space-3xs); +} + +.result-card__authors { + font-size: var(--step--1); + font-weight: 500; + color: var(--text-primary); +} + +.result-card__title { + font-size: var(--step--1); + color: var(--text-secondary); + line-height: 1.35; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.result-card__meta { + font-size: var(--step--2); + color: var(--accent-primary); + font-style: normal; +} + +/* Search controls bar */ +.search-controls { + display: flex; + align-items: center; + gap: var(--space-s); + padding: var(--space-3xs) var(--space-m); + border-bottom: 1px solid var(--border-secondary); + flex-shrink: 0; + flex-wrap: wrap; +} + +.search-filter-label { + display: flex; + align-items: center; + gap: var(--space-3xs); + font-size: var(--step--2); + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.06em; + white-space: nowrap; + cursor: default; +} + +.search-filter-select { + font-size: var(--step--1); + border: 1px solid var(--border-primary); + border-radius: 3px; + padding: var(--space-3xs) var(--space-2xs); + background: var(--bg-primary); + color: var(--text-primary); + font-family: inherit; + cursor: pointer; +} + +.search-filter-select:focus { + border-color: var(--accent-primary); +} + +.search-apply-btn { + font-size: var(--step--1); + padding: var(--space-3xs) var(--space-xs); + background: var(--accent-primary); + color: var(--accent-foreground); + border: none; + border-radius: 3px; + cursor: pointer; + font-family: inherit; + transition: background 0.15s; +} + +.search-apply-btn:hover { + background: var(--accent-secondary); +} + +.search-reset-link { + font-size: var(--step--1); + color: var(--text-secondary); + text-decoration: underline; + cursor: pointer; +} + +/* Search results pagination */ +.pagination-wrap { + display: flex; + justify-content: center; + align-items: center; + gap: var(--space-2xs); + padding: var(--space-m) 0; +} + +.pagination-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.75rem; + min-height: 2.75rem; + padding: 0 var(--space-2xs); + border: 1px solid var(--border-secondary); + border-radius: 3px; + color: var(--text-primary); + font-size: var(--step--1); + text-decoration: none; + transition: all 0.15s; +} + +.pagination-btn:hover:not(.disabled) { + border-color: var(--accent-primary); + color: var(--accent-primary); +} + +.pagination-btn.disabled { + opacity: 0.3; + cursor: not-allowed; + pointer-events: none; +} + +.pagination-info { + font-size: var(--step--1); + color: var(--text-secondary); + padding: 0 var(--space-2xs); +} + +.search-empty { + padding: var(--space-xl) var(--space-m); + color: var(--text-secondary); + font-size: var(--step-0); + text-align: center; +} + +/* Error message */ +.search-error { + background: var(--search-error-bg); + border-left: 3px solid var(--search-error-border); + color: var(--search-error-color); + padding: var(--space-2xs) var(--space-s); + font-size: var(--step--1); + margin: var(--space-2xs) var(--space-m); + flex-shrink: 0; +} diff --git a/app/public/assets/css/search.css b/app/public/assets/css/search.css deleted file mode 100644 index 37aff92..0000000 --- a/app/public/assets/css/search.css +++ /dev/null @@ -1,338 +0,0 @@ -/* ============================================================ - RÉPERTOIRE / SEARCH PAGE (repertoire.php) - ============================================================ */ - -@import url("./variables.css"); - -.search-body { - display: flex; - flex-direction: column; - height: 100vh; - overflow: hidden; - background: var(--bg-primary); -} - -.search-main { - flex: 1; - overflow-y: auto; - overflow-x: hidden; -} - -/* ---- 6-column index layout ---- */ -.repertoire-index { - display: grid; - grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr; - gap: 0; - padding: 0 var(--space-m); - min-height: 100%; -} - -@media (max-width: 1024px) { - .repertoire-index { - grid-template-columns: 1fr 1fr 1fr; - padding: 0 var(--space-s); - min-height: auto; - } - - .repertoire-col { - border-right: 1px solid var(--border-secondary); - border-bottom: 1px solid var(--border-primary); - } - - .repertoire-col:nth-child(3n) { - border-right: none; - } -} - -@media (max-width: 600px) { - .repertoire-index { - grid-template-columns: 1fr; - padding: 0 var(--space-s); - min-height: auto; - } - - .repertoire-col { - border-right: none; - border-bottom: 1px solid var(--border-primary); - padding: var(--space-s) 0 var(--space-m); - } - - .repertoire-col:last-child { - border-bottom: none; - } -} - -.repertoire-col { - padding: var(--space-xs) var(--space-2xs) var(--space-l); - border-right: 1px solid var(--border-secondary); -} - -.repertoire-col:last-child { - border-right: none; -} - -.repertoire-index section > h2 { - font-size: var(--step--2); - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--text-secondary); - font-weight: 400; - margin: 0 0 var(--space-2xs) 0; - padding-bottom: var(--space-3xs); - border-bottom: 1px solid var(--border-secondary); -} - -/* Strip list chrome inside repertoire columns */ -.repertoire-col ul { - list-style: none; - margin: 0; - padding: 0; -} - -/* ---- rep-entry: shared base (button + link variants) ---- */ -.rep-entry { - display: block; - width: 100%; - text-align: left; - background: none; - border: none; - padding: var(--space-3xs) 0; - margin: 0; - font-family: inherit; - font-size: var(--step-0); - color: var(--text-primary); - line-height: 1.4; - cursor: pointer; - text-decoration: none; - transition: color 0.15s, opacity 0.15s; -} - -.rep-entry:hover { - color: var(--accent-primary); -} - -/* Link variant (students col) — no underline by default */ -.rep-entry--link { - text-decoration: none; -} - -/* Selected: accent color */ -.rep-entry--selected { - color: var(--accent-primary) !important; -} - -/* Faded/disabled: muted, not interactive */ -.rep-entry--faded { - opacity: 0.3; - cursor: not-allowed; - pointer-events: none; -} - -/* Years column — big bold numbers */ -.repertoire-col[data-col="years"] .rep-entry { - font-size: var(--step-3); - font-weight: 700; - line-height: 1.1; - letter-spacing: -0.02em; - padding: var(--space-3xs) 0; -} - -/* Empty state in students column */ -.rep-empty { - color: var(--text-tertiary); - font-size: var(--step--1); - padding: var(--space-3xs) 0; -} - -/* ---- HTMX loading indicator ---- */ -.rep-indicator { - display: block; - position: fixed; - top: 0; - left: 0; - right: 0; - height: 2px; - background: var(--accent-primary); - opacity: 0; - transition: opacity 0.15s; - z-index: 100; - pointer-events: none; -} - -.rep-indicator.htmx-request { - opacity: 1; - animation: rep-progress 1.2s ease-in-out infinite; -} - -@keyframes rep-progress { - 0% { transform: scaleX(0); transform-origin: left; } - 50% { transform: scaleX(0.7); transform-origin: left; } - 100% { transform: scaleX(1); transform-origin: left; } -} - -/* ---- Search results view (grid) ---- */ -.search-results-header { - display: block; - font-size: var(--step--1); - color: var(--text-secondary); - margin: var(--space-s) var(--space-m) var(--space-2xs); -} - -.results-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: var(--space-m); - list-style: none; - margin: 0; - padding: var(--space-2xs) var(--space-m) var(--space-m); -} - -.result-card { - text-decoration: none; - color: inherit; - display: flex; - flex-direction: column; - gap: var(--space-3xs); -} - -.result-card__authors { - font-size: var(--step--1); - font-weight: 500; - color: var(--text-primary); -} - -.result-card__title { - font-size: var(--step--1); - color: var(--text-secondary); - line-height: 1.35; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.result-card__meta { - font-size: var(--step--2); - color: var(--accent-primary); - font-style: normal; -} - -/* Search controls bar */ -.search-controls { - display: flex; - align-items: center; - gap: var(--space-s); - padding: var(--space-3xs) var(--space-m); - border-bottom: 1px solid var(--border-secondary); - flex-shrink: 0; - flex-wrap: wrap; -} - -.search-filter-label { - display: flex; - align-items: center; - gap: var(--space-3xs); - font-size: var(--step--2); - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.06em; - white-space: nowrap; - cursor: default; -} - -.search-filter-select { - font-size: var(--step--1); - border: 1px solid var(--border-primary); - border-radius: 3px; - padding: var(--space-3xs) var(--space-2xs); - background: var(--bg-primary); - color: var(--text-primary); - font-family: inherit; - cursor: pointer; -} - -.search-filter-select:focus { - border-color: var(--accent-primary); -} - -.search-apply-btn { - font-size: var(--step--1); - padding: var(--space-3xs) var(--space-xs); - background: var(--accent-primary); - color: var(--accent-foreground); - border: none; - border-radius: 3px; - cursor: pointer; - font-family: inherit; - transition: background 0.15s; -} - -.search-apply-btn:hover { - background: var(--accent-secondary); -} - -.search-reset-link { - font-size: var(--step--1); - color: var(--text-secondary); - text-decoration: underline; - cursor: pointer; -} - -/* Search results pagination */ -.pagination-wrap { - display: flex; - justify-content: center; - align-items: center; - gap: var(--space-2xs); - padding: var(--space-m) 0; -} - -.pagination-btn { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 2.75rem; - min-height: 2.75rem; - padding: 0 var(--space-2xs); - border: 1px solid var(--border-secondary); - border-radius: 3px; - color: var(--text-primary); - font-size: var(--step--1); - text-decoration: none; - transition: all 0.15s; -} - -.pagination-btn:hover:not(.disabled) { - border-color: var(--accent-primary); - color: var(--accent-primary); -} - -.pagination-btn.disabled { - opacity: 0.3; - cursor: not-allowed; - pointer-events: none; -} - -.pagination-info { - font-size: var(--step--1); - color: var(--text-secondary); - padding: 0 var(--space-2xs); -} - -.search-empty { - padding: var(--space-xl) var(--space-m); - color: var(--text-secondary); - font-size: var(--step-0); - text-align: center; -} - -/* Error message */ -.search-error { - background: var(--search-error-bg); - border-left: 3px solid var(--search-error-border); - color: var(--search-error-color); - padding: var(--space-2xs) var(--space-s); - font-size: var(--step--1); - margin: var(--space-2xs) var(--space-m); - flex-shrink: 0; -} diff --git a/app/public/assets/css/tfe.css b/app/public/assets/css/tfe.css index 3ccb3e2..960d1c7 100644 --- a/app/public/assets/css/tfe.css +++ b/app/public/assets/css/tfe.css @@ -4,192 +4,185 @@ @import url("./variables.css"); -.tfe-body { - display: flex; - flex-direction: column; - min-height: 100vh; - background: var(--bg-primary); -} - .tfe-main { - flex: 1; - padding: var(--space-l) var(--space-m) var(--space-xl); + flex: 1; + padding: var(--space-l) var(--space-m) var(--space-xl); } /* Two-column article layout */ .tfe-layout { - display: grid; - grid-template-columns: 1fr 1.4fr; - gap: var(--space-xl); - width: 100%; - max-width: 1200px; - align-items: start; + display: grid; + grid-template-columns: 1fr 1.4fr; + gap: var(--space-xl); + width: 100%; + max-width: 1200px; + align-items: start; } /* Left column — article header */ .tfe-left { - display: flex; - flex-direction: column; - gap: var(--space-m); + display: flex; + flex-direction: column; + gap: var(--space-m); } /* Author (p) — above title */ .tfe-author { - font-family: var(--font-display); - font-size: var(--step-1); - font-weight: 400; - color: var(--text-primary); - margin: 0; - line-height: 1.3; + font-family: var(--font-display); + font-size: var(--step-1); + font-weight: 400; + color: var(--text-primary); + margin: 0; + line-height: 1.3; } /* Title (h1) — primary heading, very large */ .tfe-title { - font-family: var(--font-display); - font-size: var(--step-3); - font-weight: 400; - color: var(--text-primary); - margin: 0; - line-height: 1.15; - letter-spacing: -0.01em; + font-family: var(--font-display); + font-size: var(--step-3); + font-weight: 400; + color: var(--text-primary); + margin: 0; + line-height: 1.15; + letter-spacing: -0.01em; } /* Metadata description list — target

directly inside article > header */ article dl { - display: flex; - flex-direction: column; - gap: var(--space-3xs); - font-size: var(--step--1); - line-height: 1.4; - margin: 0; + display: flex; + flex-direction: column; + gap: var(--space-3xs); + font-size: var(--step--1); + line-height: 1.4; + margin: 0; } /* Each dt/dd pair grouped in a
inside
*/ article dl > div { - display: flex; - gap: var(--space-3xs); - flex-wrap: wrap; + display: flex; + gap: var(--space-3xs); + flex-wrap: wrap; } article dl dt { - color: var(--text-primary); - font-weight: 400; - flex-shrink: 0; + color: var(--text-primary); + font-weight: 400; + flex-shrink: 0; } article dl dd { - color: var(--text-primary); - font-weight: 700; - margin: 0; + color: var(--text-primary); + font-weight: 700; + margin: 0; } article dl dd a { - color: inherit; - text-decoration: underline; - text-underline-offset: 2px; + color: inherit; + text-decoration: underline; + text-underline-offset: 2px; } /* Note field: align dt/dd to top, value in italics */ .tfe-meta-note { - align-items: start; + align-items: start; } .tfe-note-value { - font-style: italic; + font-style: italic; } /* Synopsis paragraph */ .tfe-synopsis-text { - font-size: var(--step--1); - line-height: 1.7; - color: var(--text-primary); - margin: 0; + font-size: var(--step--1); + line-height: 1.7; + color: var(--text-primary); + margin: 0; } /* Right column — aside (supplementary media) */ .tfe-right { - display: flex; - flex-direction: column; - gap: var(--space-m); + display: flex; + flex-direction: column; + gap: var(--space-m); } /* Each file display unit — target
directly inside