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

some css changes

Browse Source
This commit is contained in:
Pontoporeia
2026-04-20 16:48:15 +02:00
parent 1b02ccb1d5
commit 78449afe64
18 changed files with 1426 additions and 1361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
TODO.md
View File

@@ -1,6 +1,7 @@
[x] Audit required fields in both admin and student forms # TODO
[x] Fix: `checkbox-list.php` partial supports `$required` (fieldset gets `required` + `aria-required`)
[x] Mark `languages` checkbox list as required in both forms ## Fix repertoire.php
[x] Added visual `*` indicator on all required fields (CSS bold labels + red asterisk) - [ ] Fix AP and orientation columns not working like other columns
[x] Added "* Champs obligatoires" note at top of both forms - [ ] Make main element scrollable instead of body
[x] Verified: all server-side required fields match client-side `required` attrs and visual indicators - [ ] Update public.css (general)
- [ ] Update repertoire.css (page-specific)

363
app/public/assets/css/apropos.css
View File

@@ -8,16 +8,9 @@
/* Page shell */ /* Page shell */
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-body {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--bg-primary);
}
.apropos-main { .apropos-main {
flex: 1; flex: 1;
padding: var(--space-xl) var(--space-l) var(--space-2xl); padding: var(--space-xl) var(--space-l) var(--space-2xl);
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -25,12 +18,12 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-layout { .apropos-layout {
display: grid; display: grid;
grid-template-columns: 180px 1fr; grid-template-columns: 180px 1fr;
gap: var(--space-2xl); gap: var(--space-2xl);
max-width: 860px; max-width: 860px;
margin: 0 auto; margin: 0 auto;
align-items: start; align-items: start;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -38,60 +31,60 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-toc { .apropos-toc {
position: sticky; position: sticky;
top: var(--space-l); top: var(--space-l);
} }
.apropos-toc-label { .apropos-toc-label {
font-family: var(--font-body); font-family: var(--font-body);
font-size: var(--step--2); 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 var(--space-2xs) 0; margin: 0 0 var(--space-2xs) 0;
} }
.apropos-toc ul { .apropos-toc ul {
list-style: none; list-style: none;
margin: 0 0 var(--space-m) 0; margin: 0 0 var(--space-m) 0;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-3xs); gap: var(--space-3xs);
} }
.apropos-toc ul a { .apropos-toc ul a {
font-family: var(--font-body); font-family: var(--font-body);
font-size: var(--step--1); font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
display: block; display: block;
padding: var(--space-3xs) 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: var(--space-2xs); padding-left: var(--space-2xs);
} }
.apropos-toc ul a:hover { .apropos-toc ul a:hover {
color: var(--text-primary); color: var(--text-primary);
border-left-color: var(--accent-primary); border-left-color: var(--accent-primary);
} }
.apropos-toc-erg { .apropos-toc-erg {
padding-top: var(--space-s); 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: var(--step--2); 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;
} }
.apropos-toc-erg a:hover { .apropos-toc-erg a:hover {
opacity: 0.75; opacity: 0.75;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -99,21 +92,21 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-content { .apropos-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
} }
.apropos-section { .apropos-section {
padding-bottom: var(--space-xl); padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
margin-bottom: var(--space-xl); margin-bottom: var(--space-xl);
} }
.apropos-section:last-child { .apropos-section:last-child {
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -121,12 +114,12 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-section-title { .apropos-section-title {
font-family: var(--font-display); font-family: var(--font-display);
font-size: var(--step-3); font-size: var(--step-3);
font-weight: 400; font-weight: 400;
color: var(--text-primary); color: var(--text-primary);
margin: 0 0 var(--space-m) 0; margin: 0 0 var(--space-m) 0;
line-height: 1.1; line-height: 1.1;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -134,58 +127,68 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.prose { .prose {
font-family: var(--font-body); font-family: var(--font-body);
font-size: var(--step-0); font-size: var(--step-0);
line-height: 1.6; line-height: 1.6;
color: var(--text-primary); color: var(--text-primary);
font-weight: 400; font-weight: 400;
} }
.prose p { .prose p {
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
.prose p:last-child { .prose p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.prose h1, .prose h1,
.prose h2, .prose h2,
.prose h3 { .prose h3 {
font-family: var(--font-display); font-family: var(--font-display);
font-weight: 400; font-weight: 400;
margin: 1.5em 0 0.5em 0; margin: 1.5em 0 0.5em 0;
} }
.prose h1 { font-size: var(--step-3); } .prose h1 {
.prose h2 { font-size: var(--step-2); } font-size: var(--step-3);
.prose h3 { font-size: var(--step-1); } }
.prose h2 {
font-size: var(--step-2);
}
.prose h3 {
font-size: var(--step-1);
}
.prose a { .prose a {
color: var(--accent-primary); color: var(--accent-primary);
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
.prose ul, .prose ul,
.prose ol { .prose ol {
padding-left: var(--space-m); padding-left: var(--space-m);
margin-bottom: var(--space-s); margin-bottom: var(--space-s);
} }
.prose li { .prose li {
margin-bottom: 0.3em; margin-bottom: 0.3em;
} }
.prose strong { font-weight: 700; } .prose strong {
.prose em { font-style: italic; } font-weight: 700;
}
.prose em {
font-style: italic;
}
.prose code { .prose code {
font-family: "Courier New", Courier, monospace; font-family: "Courier New", Courier, monospace;
font-size: 0.88em; font-size: 0.88em;
background: var(--bg-tertiary); background: var(--bg-tertiary);
padding: 0.1em 0.3em; padding: 0.1em 0.3em;
border-radius: 2px; border-radius: 2px;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -193,47 +196,47 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-contacts-grid { .apropos-contacts-grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
} }
.apropos-contact-card { .apropos-contact-card {
font-style: normal; font-style: normal;
padding: var(--space-s) 0; padding: var(--space-s) 0;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
} }
.apropos-contact-card:first-child { .apropos-contact-card:first-child {
border-top: 1px solid var(--border-primary); border-top: 1px solid var(--border-primary);
} }
.apropos-contact-card strong { .apropos-contact-card strong {
display: block; display: block;
font-size: var(--step-0); font-size: var(--step-0);
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: var(--space-3xs); margin-bottom: var(--space-3xs);
} }
.apropos-contact-card span { .apropos-contact-card span {
display: block; display: block;
font-size: var(--step--1); font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
line-height: 1.4; line-height: 1.4;
margin-bottom: var(--space-3xs); margin-bottom: var(--space-3xs);
} }
.apropos-contact-card a { .apropos-contact-card a {
font-size: var(--step--1); 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;
transition: opacity 0.15s; transition: opacity 0.15s;
} }
.apropos-contact-card a:hover { .apropos-contact-card a:hover {
opacity: 0.75; opacity: 0.75;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -241,39 +244,39 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-credits-list { .apropos-credits-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
} }
.apropos-credit-row { .apropos-credit-row {
display: grid; display: grid;
grid-template-columns: 1fr 1.6fr; grid-template-columns: 1fr 1.6fr;
gap: var(--space-s); gap: var(--space-s);
padding: var(--space-s) 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;
} }
.apropos-credit-row:first-child { .apropos-credit-row:first-child {
border-top: 1px solid var(--border-primary); border-top: 1px solid var(--border-primary);
} }
.apropos-credits-list dt { .apropos-credits-list dt {
font-size: var(--step--2); 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;
color: var(--text-tertiary); color: var(--text-tertiary);
} }
.apropos-credits-list dd { .apropos-credits-list dd {
font-size: var(--step--1); 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;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -281,7 +284,7 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-single { .apropos-single {
max-width: 720px; max-width: 720px;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -289,62 +292,62 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@media (max-width: 900px) { @media (max-width: 900px) {
.apropos-layout { .apropos-layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--space-l); gap: var(--space-l);
} }
.apropos-toc { .apropos-toc {
position: static; position: static;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: var(--space-s); gap: var(--space-s);
padding-bottom: var(--space-s); padding-bottom: var(--space-s);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
} }
.apropos-toc-label { .apropos-toc-label {
margin: 0; margin: 0;
} }
.apropos-toc ul { .apropos-toc ul {
flex-direction: row; flex-direction: row;
margin: 0; margin: 0;
gap: var(--space-xs); gap: var(--space-xs);
} }
.apropos-toc ul a { .apropos-toc ul a {
border-left: none; border-left: none;
padding-left: 0; padding-left: 0;
} }
.apropos-toc-erg { .apropos-toc-erg {
border-top: none; border-top: none;
padding-top: 0; padding-top: 0;
margin-left: auto; margin-left: auto;
} }
.prose { .prose {
font-size: var(--step-0); font-size: var(--step-0);
} }
.apropos-section-title { .apropos-section-title {
font-size: var(--step-2); font-size: var(--step-2);
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.apropos-main { .apropos-main {
padding: var(--space-m) var(--space-s) var(--space-xl); padding: var(--space-m) var(--space-s) var(--space-xl);
} }
.prose { .prose {
font-size: var(--step-0); font-size: var(--step-0);
} }
.apropos-credit-row { .apropos-credit-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--space-3xs); gap: var(--space-3xs);
} }
} }

301
app/public/assets/css/common.css
View File

@@ -1,213 +1,182 @@
@import url("./variables.css"); @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, *::before,
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
} }
html, html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
} }
body { body {
font-family: var(--font-body); font-family: var(--font-body);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-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 { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }
/* ============================================================
HEADER / NAV BAR (public pages)
============================================================ */
body > header { body > header {
flex-shrink: 0; flex-shrink: 0;
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
var(--gradient-1) 0%, var(--gradient-1) 0%,
var(--gradient-2) 33%, var(--gradient-2) 33%,
var(--gradient-3) 66%, var(--gradient-3) 66%,
var(--gradient-4) 100% var(--gradient-4) 100%
); );
} }
body > header nav { body > header nav {
padding: var(--space-s) var(--space-s); 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;
} }
.nav-logo { .nav-logo {
font-family: var(--font-display); font-family: var(--font-display);
font-size: var(--step-2); font-size: var(--step-2);
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;
text-shadow: text-shadow:
0 0 16px var(--header-shadow-strong), 0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft); 0 0 32px var(--header-shadow-soft);
} }
.nav-left { .nav-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-l); gap: var(--space-l);
} }
.nav-left-links, .nav-left-links,
.nav-right-links { .nav-right-links {
display: flex; display: flex;
gap: var(--space-l); gap: var(--space-l);
align-items: center; align-items: center;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body > header nav > a { body > header nav > a {
font-family: var(--font-display); font-family: var(--font-display);
font-size: var(--step-0); 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;
} }
body > header nav > ul { body > header nav > ul {
display: flex; display: flex;
gap: var(--space-l); gap: var(--space-l);
align-items: center; align-items: center;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body > header nav ul a { body > header nav ul a {
font-size: var(--step--1); 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;
transition: opacity 0.15s; transition: opacity 0.15s;
} }
/* Subtle shadow on all header text to improve legibility against the gradient */ /* Subtle shadow on all header text to improve legibility against the gradient */
body > header nav > a, body > header nav > a,
body > header nav ul a { body > header nav ul a {
text-shadow: text-shadow:
0 0 16px var(--header-shadow-strong), 0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft); 0 0 32px var(--header-shadow-soft);
} }
body > header nav ul a:hover { body > header nav ul a:hover {
opacity: 1; opacity: 1;
} }
body > header nav ul a[aria-current="page"] { body > header nav ul a[aria-current="page"] {
opacity: 1; opacity: 1;
border-bottom: 1px solid var(--header-nav-active-border); border-bottom: 1px solid var(--header-nav-active-border);
padding-bottom: 1px; padding-bottom: 1px;
}
main {
overflow: scroll;
} }
/* ============================================================ /* ============================================================
SEARCH BAR (shared) SEARCH BAR (shared)
============================================================ */ ============================================================ */
.header-search-wrap { .header-search-wrap {
padding: 0 0; padding: 0 0;
background-color: var(--gradient-4); background-color: var(--gradient-4);
background: linear-gradient( background: linear-gradient(180deg, var(--gradient-4) 0%, #ffffffee 100%);
180deg,
var(--gradient-4) 0%,
#ffffffee 100%
);
} }
.header-search-wrap form[role="search"] { .header-search-wrap form[role="search"] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-2xs); gap: var(--space-2xs);
padding: var(--space-3xs) var(--space-s); padding: var(--space-3xs) var(--space-s);
border: 1px solid var(--accent-primary); border: 1px solid var(--accent-primary);
border-radius: 10px; border-radius: 10px;
background: var(--bg-primary); background: var(--bg-primary);
width: 100%; width: 100%;
color: var(--accent-primary); color: var(--accent-primary);
} }
.header-search-wrap form[role="search"] svg { .header-search-wrap form[role="search"] svg {
color: var(--text-tertiary); color: var(--text-tertiary);
flex-shrink: 0; flex-shrink: 0;
width: 16px; width: 16px;
height: 16px; height: 16px;
stroke: var(--accent-primary); stroke: var(--accent-primary);
} }
.header-search-wrap form[role="search"] input { .header-search-wrap form[role="search"] input {
flex: 1; flex: 1;
border: none; border: none;
font-size: var(--step--1); font-size: var(--step--1);
color: var(--text-primary); color: var(--text-primary);
background: transparent; background: transparent;
padding: var(--space-3xs) 0; padding: var(--space-3xs) 0;
font-family: inherit; font-family: inherit;
} }
.header-search-wrap form[role="search"] input::placeholder { .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 */ /* Visually-hidden but screen-reader-accessible */
.sr-only { .sr-only {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 1px; height: 1px;
padding: 0; padding: 0;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
white-space: nowrap; white-space: nowrap;
border: 0; border: 0;
} }
/* Skip-to-content link (visible only on keyboard focus) */ /* Skip-to-content link (visible only on keyboard focus) */
.skip-link { .skip-link {
position: absolute; position: absolute;
top: -999px; top: -999px;
left: 1rem; left: 1rem;
z-index: 9999; z-index: 9999;
padding: var(--space-2xs) var(--space-s); 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: var(--step--1); 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;
} }
.skip-link:focus { .skip-link:focus {
top: 0; top: 0;
} }
/* Consistent keyboard-focus outline for all interactive elements */ /* Consistent keyboard-focus outline for all interactive elements */
:focus-visible { :focus-visible {
outline: 2px solid var(--accent-primary); outline: 2px solid var(--accent-primary);
outline-offset: 2px; outline-offset: 2px;
} }
/* Respect user motion preferences */ /* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *,
*::before, *::before,
*::after { *::after {
transition-duration: 0.01ms !important; transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important; animation-duration: 0.01ms !important;
} }
} }

275
app/public/assets/css/main.css
View File

@@ -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 <a> 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: <figure> for real images/video, <div class="card__media--gradient"> for placeholders */
.home-body figure {
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--bg-tertiary);
position: relative;
margin: 0; /* reset <figure> 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 — <p> directly inside the card <a> 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;
}
}

276
app/public/assets/css/public.css Normal file
View File

@@ -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 <a> 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: <figure> for real images/video, <div class="card__media--gradient"> for placeholders */
.home-body figure {
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--bg-tertiary);
position: relative;
margin: 0; /* reset <figure> 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 — <p> directly inside the card <a> 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;
}
}

340
app/public/assets/css/repertoire.css Normal file
View File

@@ -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;
}

338
app/public/assets/css/search.css
View File

@@ -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;
}

187
app/public/assets/css/tfe.css
View File

@@ -4,192 +4,185 @@
@import url("./variables.css"); @import url("./variables.css");
.tfe-body {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--bg-primary);
}
.tfe-main { .tfe-main {
flex: 1; flex: 1;
padding: var(--space-l) var(--space-m) var(--space-xl); 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: var(--space-xl); gap: var(--space-xl);
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
align-items: start; align-items: start;
} }
/* Left column — article header */ /* Left column — article header */
.tfe-left { .tfe-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-m); 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: var(--step-1); font-size: var(--step-1);
font-weight: 400; font-weight: 400;
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
line-height: 1.3; line-height: 1.3;
} }
/* 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: var(--step-3); font-size: var(--step-3);
font-weight: 400; font-weight: 400;
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
line-height: 1.15; line-height: 1.15;
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
/* Metadata description list — target <dl> directly inside article > header */ /* Metadata description list — target <dl> directly inside article > header */
article dl { article dl {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-3xs); gap: var(--space-3xs);
font-size: var(--step--1); font-size: var(--step--1);
line-height: 1.4; line-height: 1.4;
margin: 0; margin: 0;
} }
/* 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: var(--space-3xs); gap: var(--space-3xs);
flex-wrap: wrap; flex-wrap: wrap;
} }
article dl dt { article dl dt {
color: var(--text-primary); color: var(--text-primary);
font-weight: 400; font-weight: 400;
flex-shrink: 0; flex-shrink: 0;
} }
article dl dd { article dl dd {
color: var(--text-primary); color: var(--text-primary);
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
} }
article dl dd a { article dl dd a {
color: inherit; color: inherit;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
/* Note field: align dt/dd to top, value in italics */ /* Note field: align dt/dd to top, value in italics */
.tfe-meta-note { .tfe-meta-note {
align-items: start; align-items: start;
} }
.tfe-note-value { .tfe-note-value {
font-style: italic; font-style: italic;
} }
/* Synopsis paragraph */ /* Synopsis paragraph */
.tfe-synopsis-text { .tfe-synopsis-text {
font-size: var(--step--1); 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;
} }
/* Right column — aside (supplementary media) */ /* Right column — aside (supplementary media) */
.tfe-right { .tfe-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-m); gap: var(--space-m);
} }
/* Each file display unit — target <figure> directly inside <aside> */ /* Each file display unit — target <figure> directly inside <aside> */
aside figure { aside figure {
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
border-radius: 8px; border-radius: 8px;
} }
aside figure img { aside figure img {
width: 100%; width: 100%;
height: auto; height: auto;
display: block; display: block;
border-radius: 8px; border-radius: 8px;
} }
aside figure embed, aside figure embed,
aside figure video { aside figure video {
width: 100%; width: 100%;
display: block; display: block;
border: none; border: none;
} }
aside figure video { aside figure video {
max-height: 500px; max-height: 500px;
} }
aside figure embed { aside figure embed {
height: clamp(300px, 80vh, 700px); height: clamp(300px, 80vh, 700px);
} }
/* figcaption under media — target <figcaption> inside <aside> */ /* figcaption under media — target <figcaption> inside <aside> */
aside figcaption { aside figcaption {
font-size: var(--step--2); font-size: var(--step--2);
color: var(--text-secondary); color: var(--text-secondary);
margin: var(--space-3xs) 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: var(--step--1); font-size: var(--step--1);
margin: var(--space-3xs) 0 0; margin: var(--space-3xs) 0 0;
} }
.tfe-pdf-fallback a { .tfe-pdf-fallback a {
color: var(--text-primary); color: var(--text-primary);
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
/* "Not available" and "no files" notices */ /* "Not available" and "no files" notices */
.tfe-restricted, .tfe-restricted,
.tfe-no-files { .tfe-no-files {
font-size: var(--step--1); font-size: var(--step--1);
color: var(--text-secondary); color: var(--text-secondary);
font-style: italic; font-style: italic;
padding: var(--space-s) 0; padding: var(--space-s) 0;
margin: 0; margin: 0;
} }
/* Responsive */ /* Responsive */
@media (max-width: 900px) { @media (max-width: 900px) {
.tfe-layout { .tfe-layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--space-l); gap: var(--space-l);
} }
.tfe-title { .tfe-title {
font-size: var(--step-2); font-size: var(--step-2);
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.tfe-main { .tfe-main {
padding: var(--space-m) var(--space-s) var(--space-l); padding: var(--space-m) var(--space-s) var(--space-l);
} }
.tfe-title { .tfe-title {
font-size: var(--step-1); font-size: var(--step-1);
} }
} }

269
app/public/assets/css/variables.css
View File

@@ -1,121 +1,162 @@
/* ============================================================
Fonts
============================================================ */
@font-face {
font-family: "Ductus";
src: url("/assets/fonts/DuctusRegular.otf") format("opentype");
font-style: normal;
font-weight: 398;
font-display: swap;
}
@font-face {
font-family: "BBBDMSans";
src: url("../fonts/BBBDMSans-Light.otf") format("opentype");
font-style: normal;
font-weight: 298;
font-display: swap;
}
@font-face {
font-family: "BBBDMSans";
src: url("/assets/fonts/BBBDMSans-Regular.otf") format("opentype");
font-style: normal;
font-weight: 398;
font-display: swap;
}
@font-face {
font-family: "BBBDMSans";
src: url("../fonts/BBBDMSans-Medium.otf") format("opentype");
font-style: normal;
font-weight: 498;
font-display: swap;
}
@font-face {
font-family: "BBBDMSans";
src: url("../fonts/BBBDMSans-Bold.otf") format("opentype");
font-style: normal;
font-weight: 698;
font-display: swap;
}
/* ============================================================ /* ============================================================
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 */ /* @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 { :root {
--step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem); --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
--step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem); --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem); --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem); --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
--step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem); --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
--step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem); --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
--step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem); --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
--step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem); --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 */
/* @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-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem); --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem); --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem); --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem); --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem); --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem); --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem); --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem); --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
/* One-up pairs */
/* One-up pairs */ --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
--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-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem); --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
--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-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem); --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
--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-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem); --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem); --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
/* Custom pairs */
/* Custom pairs */ --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
} /* Fonts */
--font-body: "BBBDMSans", sans-serif;
:root { --font-display: "Ductus", sans-serif;
/* Fonts */
--font-body: "BBBDMSans", sans-serif; /* Backgrounds */
--font-display: "Ductus", sans-serif; --bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
/* Backgrounds */ --bg-tertiary: #e8e8e8;
--bg-primary: #ffffff; --bg-active: #d0d0d0;
--bg-secondary: #f5f5f5;
--bg-tertiary: #e8e8e8; /* Text */
--bg-active: #d0d0d0; --text-primary: #111111;
--text-secondary: #666666;
/* Text */ --text-tertiary: #999999;
--text-primary: #111111;
--text-secondary: #666666; /* Borders */
--text-tertiary: #999999; --border-primary: #dddddd;
--border-secondary: #cccccc;
/* Borders */
--border-primary: #dddddd; /* Status */
--border-secondary: #cccccc; --success: #5cd69d;
--error: #f25a5a;
/* Status */ --warning: #fbca51;
--success: #5cd69d;
--error: #f25a5a; /* Accent */
--warning: #fbca51; --accent-primary: #9557b5;
--accent-secondary: #683d7f;
/* Accent */ --accent-foreground: #ffffff;
--accent-primary: #9557b5; --accent-muted: rgba(149, 87, 181, 0.12);
--accent-secondary: #683d7f; --accent-blue: #41adff;
--accent-foreground: #ffffff; --accent-green: #4caf50;
--accent-muted: rgba(149, 87, 181, 0.12); --accent-yellow: #f39c12;
--accent-blue: #41adff; --accent-red: #f25a5a;
--accent-green: #4caf50;
--accent-yellow: #f39c12; /* Gradient (header) */
--accent-red: #f25a5a; --gradient-1: #3c856c;
--gradient-2: #60ecb4;
/* Gradient (header) */ --gradient-3: #e390ff;
--gradient-1: #3c856c; --gradient-4: #9557b5;
--gradient-2: #60ecb4;
--gradient-3: #e390ff; /* Header decorative */
--gradient-4: #9557b5; --header-gradient-fade: rgba(149, 87, 181, 0);
--header-shadow-strong: rgba(119, 70, 145, 1);
/* Header decorative */ --header-shadow-soft: rgba(119, 70, 145, 0.8);
--header-gradient-fade: rgba(149, 87, 181, 0); --header-nav-active-border: rgba(255, 255, 255, 0.6);
--header-shadow-strong: rgba(119, 70, 145, 1);
--header-shadow-soft: rgba(119, 70, 145, 0.8); /* Search error block */
--header-nav-active-border: rgba(255, 255, 255, 0.6); --search-error-bg: #fff0f0;
--search-error-border: #cc0000;
/* Search error block */ --search-error-color: #cc0000;
--search-error-bg: #fff0f0;
--search-error-border: #cc0000; /* System page — log/config syntax highlight */
--search-error-color: #cc0000; --sys-syntax-comment: #999999;
--sys-syntax-directive: #1a6fb5;
/* System page — log/config syntax highlight */ --sys-syntax-block: #7a2fa0;
--sys-syntax-comment: #999999; --sys-syntax-value: #a05c00;
--sys-syntax-directive: #1a6fb5; --sys-syntax-location: #1a7a6b;
--sys-syntax-block: #7a2fa0; --sys-syntax-notice: #3a6ea8;
--sys-syntax-value: #a05c00; --sys-syntax-crit: #c0392b;
--sys-syntax-location: #1a7a6b;
--sys-syntax-notice: #3a6ea8; /* Muted alpha overlays — derived from semantic tokens */
--sys-syntax-crit: #c0392b; --success-muted-bg: rgba(92, 214, 157, 0.12);
--success-muted-border: rgba(92, 214, 157, 0.35);
/* Muted alpha overlays — derived from semantic tokens */ --warning-muted-bg: rgba(251, 202, 81, 0.12);
--success-muted-bg: rgba(92, 214, 157, 0.12); --warning-muted-border: rgba(251, 202, 81, 0.35);
--success-muted-border: rgba(92, 214, 157, 0.35); --error-muted-bg: rgba(242, 90, 90, 0.12);
--warning-muted-bg: rgba(251, 202, 81, 0.12); --error-muted-border: rgba(242, 90, 90, 0.35);
--warning-muted-border: rgba(251, 202, 81, 0.35); --blue-muted-bg: rgba(65, 173, 255, 0.12);
--error-muted-bg: rgba(242, 90, 90, 0.12); --blue-muted-border: rgba(65, 173, 255, 0.3);
--error-muted-border: rgba(242, 90, 90, 0.35); --blue-muted-bg-hover: rgba(65, 173, 255, 0.22);
--blue-muted-bg: rgba(65, 173, 255, 0.12); --yellow-muted-bg: rgba(243, 156, 18, 0.12);
--blue-muted-border: rgba(65, 173, 255, 0.30); --yellow-muted-border: rgba(243, 156, 18, 0.3);
--blue-muted-bg-hover: rgba(65, 173, 255, 0.22); --yellow-muted-bg-hover: rgba(243, 156, 18, 0.22);
--yellow-muted-bg: rgba(243, 156, 18, 0.12); --green-muted-bg: rgba(76, 175, 80, 0.12);
--yellow-muted-border: rgba(243, 156, 18, 0.30); --green-muted-border: rgba(76, 175, 80, 0.3);
--yellow-muted-bg-hover: rgba(243, 156, 18, 0.22); --green-muted-bg-hover: rgba(76, 175, 80, 0.22);
--green-muted-bg: rgba(76, 175, 80, 0.12); --danger-border-muted: rgba(242, 90, 90, 0.35);
--green-muted-border: rgba(76, 175, 80, 0.30);
--green-muted-bg-hover: rgba(76, 175, 80, 0.22);
--danger-border-muted: rgba(242, 90, 90, 0.35);
} }

0
app/public/assets/favicon.svg → app/public/assets/favicon/favicon.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

35
app/router.php
View File

@@ -6,20 +6,41 @@
* Admin panel and static files are served directly. * Admin panel and static files are served directly.
*/ */
$uri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH); $uri = parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH);
// Static assets: let the dev server handle them directly // Static assets: let the dev server handle them directly
$ext = pathinfo($uri, PATHINFO_EXTENSION); $ext = pathinfo($uri, PATHINFO_EXTENSION);
if (in_array($ext, ['css', 'js', 'png', 'jpg', 'jpeg', 'gif', 'ico', 'svg', 'woff', 'woff2', 'ttf', 'eot', 'map'], true)) { if (
in_array(
$ext,
[
"css",
"js",
"png",
"jpg",
"jpeg",
"gif",
"ico",
"svg",
"woff",
"woff2",
"ttf",
"eot",
"otf",
"map",
],
true,
)
) {
return false; // serve directly return false; // serve directly
} }
// Admin panel: serve files directly // Admin panel: serve files directly
if (str_starts_with($uri, '/admin')) { if (str_starts_with($uri, "/admin")) {
// Rewrite /admin → /admin/index.php // Rewrite /admin → /admin/index.php
$file = __DIR__ . '/public' . $uri; $file = __DIR__ . "/public" . $uri;
if (is_dir($file)) { if (is_dir($file)) {
$file .= '/index.php'; $file .= "/index.php";
} }
if (file_exists($file)) { if (file_exists($file)) {
include $file; include $file;
@@ -28,6 +49,6 @@ if (str_starts_with($uri, '/admin')) {
} }
// Send everything else through the front controller // Send everything else through the front controller
$_SERVER['SCRIPT_NAME'] = '/index.php'; $_SERVER["SCRIPT_NAME"] = "/index.php";
require __DIR__ . '/public/index.php'; require __DIR__ . "/public/index.php";
return true; return true;

100
app/src/Controllers/HomeController.php
View File

@@ -35,7 +35,7 @@ class HomeController
*/ */
public static function create(): self public static function create(): self
{ {
require_once APP_ROOT . '/src/Database.php'; require_once APP_ROOT . "/src/Database.php";
return new self(Database::getInstance()); return new self(Database::getInstance());
} }
@@ -49,92 +49,108 @@ class HomeController
*/ */
public function handle(): array public function handle(): array
{ {
$page = isset($_GET['page']) ? max(1, (int) $_GET['page']) : 1; $page = isset($_GET["page"]) ? max(1, (int) $_GET["page"]) : 1;
$year = isset($_GET['year']) ? (int) $_GET['year'] : null; $year = isset($_GET["year"]) ? (int) $_GET["year"] : null;
// Normalise zero (e.g. ?year=0) to null so it is treated as "no filter" // Normalise zero (e.g. ?year=0) to null so it is treated as "no filter"
if ($year === 0) { if ($year === 0) {
$year = null; $year = null;
} }
// Default home view: random theses from latest year (no year filter, no explicit page) // Default home view: random theses from latest year (no year filter, no explicit page)
$isDefaultView = ($year === null && $page === 1); $isDefaultView = $year === null && $page === 1;
$itemsToLoad = []; $itemsToLoad = [];
$totalItems = 0; $totalItems = 0;
$availableYears = []; $availableYears = [];
$latestYear = null; $latestYear = null;
$coverMap = []; $coverMap = [];
try { try {
$offset = ($page - 1) * self::ITEMS_PER_PAGE; $offset = ($page - 1) * self::ITEMS_PER_PAGE;
$availableYears = $this->db->getAvailableYears(); $availableYears = $this->db->getAvailableYears();
if ($year !== null) { if ($year !== null) {
$itemsToLoad = $this->db->searchTheses(['year' => $year], self::ITEMS_PER_PAGE, $offset); $itemsToLoad = $this->db->searchTheses(
$totalItems = $this->db->countSearchResults(['year' => $year]); ["year" => $year],
self::ITEMS_PER_PAGE,
$offset,
);
$totalItems = $this->db->countSearchResults(["year" => $year]);
} elseif ($isDefaultView) { } elseif ($isDefaultView) {
$latestYear = $this->db->getLatestPublishedYear(); $latestYear = $this->db->getLatestPublishedYear();
$itemsToLoad = $this->db->getLatestYearTheses(self::ITEMS_PER_PAGE); $itemsToLoad = $this->db->getLatestYearTheses(
$totalItems = count($itemsToLoad); // no multi-page on default view self::ITEMS_PER_PAGE,
);
$totalItems = count($itemsToLoad); // no multi-page on default view
} else { } else {
$itemsToLoad = $this->db->getPublishedTheses(self::ITEMS_PER_PAGE, $offset); $itemsToLoad = $this->db->getPublishedTheses(
$totalItems = $this->db->countPublishedTheses(); self::ITEMS_PER_PAGE,
$offset,
);
$totalItems = $this->db->countPublishedTheses();
} }
// Batch-load cover images for theses that have no banner_path // Batch-load cover images for theses that have no banner_path
if (!empty($itemsToLoad)) { if (!empty($itemsToLoad)) {
$needCover = array_column( $needCover = array_column(
array_filter($itemsToLoad, static fn($t) => empty($t['banner_path'])), array_filter(
'id' $itemsToLoad,
static fn($t) => empty($t["banner_path"]),
),
"id",
); );
if (!empty($needCover)) { if (!empty($needCover)) {
$coverMap = $this->db->getCoverPathsForTheses($needCover); $coverMap = $this->db->getCoverPathsForTheses($needCover);
} }
} }
} catch (Exception $e) { } catch (Exception $e) {
error_log('HomeController: ' . $e->getMessage()); error_log("HomeController: " . $e->getMessage());
// Return safe empty state; view will show "Aucun mémoire trouvé" // Return safe empty state; view will show "Aucun mémoire trouvé"
$isDefaultView = false; $isDefaultView = false;
} }
$totalPages = $isDefaultView ? 1 : (int) ceil($totalItems / self::ITEMS_PER_PAGE); $totalPages = $isDefaultView
? 1
: (int) ceil($totalItems / self::ITEMS_PER_PAGE);
// Avoid division by zero on empty DB // Avoid division by zero on empty DB
if ($totalPages < 1) { if ($totalPages < 1) {
$totalPages = 0; $totalPages = 0;
} }
$baseParams = array_filter(['year' => $year]); $baseParams = array_filter(["year" => $year]);
return [ return [
// Pagination / filter state // Pagination / filter state
'page' => $page, "page" => $page,
'year' => $year, "year" => $year,
'isDefaultView' => $isDefaultView, "isDefaultView" => $isDefaultView,
'totalItems' => $totalItems, "totalItems" => $totalItems,
'totalPages' => $totalPages, "totalPages" => $totalPages,
'baseParams' => $baseParams, "baseParams" => $baseParams,
// Thesis data // Thesis data
'itemsToLoad' => $itemsToLoad, "itemsToLoad" => $itemsToLoad,
'latestYear' => $latestYear, "latestYear" => $latestYear,
'availableYears' => $availableYears, "availableYears" => $availableYears,
'coverMap' => $coverMap, "coverMap" => $coverMap,
// Page meta // Page meta
'pageTitle' => 'Posterg – Mémoires de l\'ERG', "pageTitle" => 'Posterg – Mémoires de l\'ERG',
'metaDescription' => 'Posterg répertorie et valorise les mémoires de fin d\'études (TFE) de l\'erg – École de Recherches Graphiques de Bruxelles.', "metaDescription" =>
'ogTags' => [ 'Posterg répertorie et valorise les mémoires de fin d\'études (TFE) de l\'erg – École de Recherches Graphiques de Bruxelles.',
'type' => 'website', "ogTags" => [
'title' => 'Posterg – Mémoires de l\'ERG', "type" => "website",
'description' => 'Posterg répertorie et valorise les mémoires de fin d\'études (TFE) de l\'erg – École de Recherches Graphiques de Bruxelles.', "title" => 'Posterg – Mémoires de l\'ERG',
'url' => 'https://posterg.erg.be/', "description" =>
'site_name' => 'Posterg – ERG', 'Posterg répertorie et valorise les mémoires de fin d\'études (TFE) de l\'erg – École de Recherches Graphiques de Bruxelles.',
"url" => "https://posterg.erg.be/",
"site_name" => "Posterg – ERG",
], ],
// Layout // Layout
'currentNav' => '', "currentNav" => "",
'extraCss' => ['/assets/css/main.css'], "extraCss" => ["/assets/css/public.css"],
'bodyClass' => 'home-body', "bodyClass" => "home-body",
]; ];
} }
} }

286
app/src/Controllers/SearchController.php
View File

@@ -21,16 +21,16 @@
*/ */
class SearchController class SearchController
{ {
private const RATE_LIMIT_MAX = 30; private const RATE_LIMIT_MAX = 30;
private const RATE_LIMIT_WINDOW = 60; // seconds private const RATE_LIMIT_WINDOW = 60; // seconds
private const ITEMS_PER_PAGE = 30; private const ITEMS_PER_PAGE = 30;
private Database $db; private Database $db;
private RateLimit $rateLimit; private RateLimit $rateLimit;
public function __construct(Database $db, RateLimit $rateLimit) public function __construct(Database $db, RateLimit $rateLimit)
{ {
$this->db = $db; $this->db = $db;
$this->rateLimit = $rateLimit; $this->rateLimit = $rateLimit;
} }
@@ -42,10 +42,13 @@ class SearchController
*/ */
public static function create(): self public static function create(): self
{ {
require_once APP_ROOT . '/src/Database.php'; require_once APP_ROOT . "/src/Database.php";
require_once APP_ROOT . '/src/RateLimit.php'; require_once APP_ROOT . "/src/RateLimit.php";
$rateLimit = new RateLimit(self::RATE_LIMIT_MAX, self::RATE_LIMIT_WINDOW); $rateLimit = new RateLimit(
self::RATE_LIMIT_MAX,
self::RATE_LIMIT_WINDOW,
);
if (!$rateLimit->check()) { if (!$rateLimit->check()) {
self::sendRateLimitResponse($rateLimit); self::sendRateLimitResponse($rateLimit);
@@ -71,65 +74,74 @@ class SearchController
*/ */
public function handleSearch(): array public function handleSearch(): array
{ {
$searchParams = $this->collectSearchParams(); $searchParams = $this->collectSearchParams();
$page = isset($_GET['page']) ? max(1, (int) $_GET['page']) : 1; $page = isset($_GET["page"]) ? max(1, (int) $_GET["page"]) : 1;
$offset = ($page - 1) * self::ITEMS_PER_PAGE; $offset = ($page - 1) * self::ITEMS_PER_PAGE;
$validationError = null; $validationError = null;
$results = []; $results = [];
$totalItems = 0; $totalItems = 0;
$totalPages = 0; $totalPages = 0;
$years = []; $years = [];
$orientations = []; $orientations = [];
$apPrograms = []; $apPrograms = [];
try { try {
$results = $this->db->searchTheses($searchParams, self::ITEMS_PER_PAGE, $offset); $results = $this->db->searchTheses(
$searchParams,
self::ITEMS_PER_PAGE,
$offset,
);
$totalItems = $this->db->countSearchResults($searchParams); $totalItems = $this->db->countSearchResults($searchParams);
$totalPages = (int) ceil($totalItems / self::ITEMS_PER_PAGE); $totalPages = (int) ceil($totalItems / self::ITEMS_PER_PAGE);
$years = $this->db->getAvailableYears(); $years = $this->db->getAvailableYears();
$orientations = $this->db->getAllOrientations(); $orientations = $this->db->getAllOrientations();
$apPrograms = $this->db->getAllAPPrograms(); $apPrograms = $this->db->getAllAPPrograms();
} catch (InvalidArgumentException $e) { } catch (InvalidArgumentException $e) {
$validationError = $e->getMessage(); $validationError = $e->getMessage();
} catch (Exception $e) { } catch (Exception $e) {
error_log('SearchController: ' . $e->getMessage()); error_log("SearchController: " . $e->getMessage());
$validationError = 'Une erreur est survenue.'; $validationError = "Une erreur est survenue.";
} }
// Preserve all active params, strip 'page' (pagination partial adds it) // Preserve all active params, strip 'page' (pagination partial adds it)
$baseParams = array_diff_key($_GET, ['page' => '']); $baseParams = array_diff_key($_GET, ["page" => ""]);
$query = $_GET['query'] ?? ''; $query = $_GET["query"] ?? "";
return [ return [
'searchParams' => $searchParams, "searchParams" => $searchParams,
'page' => $page, "page" => $page,
'totalItems' => $totalItems, "totalItems" => $totalItems,
'totalPages' => $totalPages, "totalPages" => $totalPages,
'results' => $results, "results" => $results,
'validationError' => $validationError, "validationError" => $validationError,
'baseParams' => $baseParams, "baseParams" => $baseParams,
// Filter dropdowns // Filter dropdowns
'years' => $years, "years" => $years,
'orientations' => $orientations, "orientations" => $orientations,
'apPrograms' => $apPrograms, "apPrograms" => $apPrograms,
// Page meta // Page meta
'searchBarValue' => $query, "searchBarValue" => $query,
'pageTitle' => $query !== '' ? 'Recherche : ' . $query . ' – Posterg' : 'Recherche – Posterg', "pageTitle" =>
'metaDescription' => "Résultats de recherche dans le répertoire des TFE de l'erg.", $query !== ""
'ogTags' => [ ? "Recherche : " . $query . " – Posterg"
'type' => 'website', : "Recherche – Posterg",
'title' => 'Recherche – Posterg', "metaDescription" =>
'description' => "Résultats de recherche dans le répertoire des TFE de l'erg.", "Résultats de recherche dans le répertoire des TFE de l'erg.",
'url' => 'https://posterg.erg.be/search', "ogTags" => [
'site_name' => 'Posterg – ERG', "type" => "website",
"title" => "Recherche – Posterg",
"description" =>
"Résultats de recherche dans le répertoire des TFE de l'erg.",
"url" => "https://posterg.erg.be/search",
"site_name" => "Posterg – ERG",
], ],
'currentNav' => 'repertoire', "currentNav" => "repertoire",
'extraCss' => ['/assets/css/search.css'], "extraCss" => ["/assets/css/repertoire.css"],
'bodyClass' => 'search-body', "bodyClass" => "search-body",
]; ];
} }
@@ -141,9 +153,9 @@ class SearchController
*/ */
public function handleRepertoire(): array public function handleRepertoire(): array
{ {
$isHtmx = !empty($_SERVER['HTTP_HX_REQUEST']); $isHtmx = !empty($_SERVER["HTTP_HX_REQUEST"]);
$activeFilters = $this->collectFilterParams(); $activeFilters = $this->collectFilterParams();
$repData = null; $repData = null;
$validationError = null; $validationError = null;
try { try {
@@ -151,8 +163,8 @@ class SearchController
} catch (InvalidArgumentException $e) { } catch (InvalidArgumentException $e) {
$validationError = $e->getMessage(); $validationError = $e->getMessage();
} catch (Exception $e) { } catch (Exception $e) {
error_log('SearchController: ' . $e->getMessage()); error_log("SearchController: " . $e->getMessage());
$validationError = 'Une erreur est survenue.'; $validationError = "Une erreur est survenue.";
} }
// HTMX partial: render just the index div and exit // HTMX partial: render just the index div and exit
@@ -161,25 +173,27 @@ class SearchController
} }
return [ return [
'repData' => $repData, "repData" => $repData,
'activeFilters' => $activeFilters, "activeFilters" => $activeFilters,
'isHtmx' => $isHtmx, "isHtmx" => $isHtmx,
'validationError' => $validationError, "validationError" => $validationError,
// Page meta // Page meta
'searchBarValue' => '', "searchBarValue" => "",
'pageTitle' => 'Répertoire – Posterg', "pageTitle" => "Répertoire – Posterg",
'metaDescription' => "Parcourez le répertoire des mémoires de fin d'études (TFE) de l'erg – École de Recherches Graphiques de Bruxelles.", "metaDescription" =>
'ogTags' => [ "Parcourez le répertoire des mémoires de fin d'études (TFE) de l'erg – École de Recherches Graphiques de Bruxelles.",
'type' => 'website', "ogTags" => [
'title' => 'Répertoire – Posterg', "type" => "website",
'description' => "Parcourez le répertoire des mémoires de fin d'études (TFE) de l'erg – École de Recherches Graphiques de Bruxelles.", "title" => "Répertoire – Posterg",
'url' => 'https://posterg.erg.be/repertoire', "description" =>
'site_name' => 'Posterg – ERG', "Parcourez le répertoire des mémoires de fin d'études (TFE) de l'erg – École de Recherches Graphiques de Bruxelles.",
"url" => "https://posterg.erg.be/repertoire",
"site_name" => "Posterg – ERG",
], ],
'currentNav' => 'repertoire', "currentNav" => "repertoire",
'extraCss' => ['/assets/css/search.css'], "extraCss" => ["/assets/css/repertoire.css"],
'bodyClass' => 'search-body', "bodyClass" => "search-body",
]; ];
} }
@@ -189,12 +203,14 @@ class SearchController
* Render the repertoire index partial and exit (for HTMX swaps). * Render the repertoire index partial and exit (for HTMX swaps).
* Never returns. * Never returns.
*/ */
private function renderRepertoirePartial(array $repData, array $activeFilters): never private function renderRepertoirePartial(
{ array $repData,
header('Content-Type: text/html; charset=UTF-8'); array $activeFilters,
): never {
header("Content-Type: text/html; charset=UTF-8");
$isHtmx = true; $isHtmx = true;
include APP_ROOT . '/templates/partials/repertoire-index.php'; include APP_ROOT . "/templates/partials/repertoire-index.php";
exit; exit();
} }
/** /**
@@ -206,12 +222,14 @@ class SearchController
*/ */
private function collectFilterParams(): array private function collectFilterParams(): array
{ {
$sanitiseStrings = function(mixed $raw, int $maxLen = 100): array { $sanitiseStrings = function (mixed $raw, int $maxLen = 100): array {
if (!is_array($raw)) return []; if (!is_array($raw)) {
return [];
}
$out = []; $out = [];
foreach ($raw as $v) { foreach ($raw as $v) {
$v = trim((string)$v); $v = trim((string) $v);
if ($v !== '' && strlen($v) <= $maxLen) { if ($v !== "" && strlen($v) <= $maxLen) {
$out[] = $v; $out[] = $v;
} }
} }
@@ -219,20 +237,22 @@ class SearchController
}; };
$years = []; $years = [];
if (!empty($_GET['fy']) && is_array($_GET['fy'])) { if (!empty($_GET["fy"]) && is_array($_GET["fy"])) {
foreach ($_GET['fy'] as $y) { foreach ($_GET["fy"] as $y) {
$y = (int)$y; $y = (int) $y;
if ($y >= 1900 && $y <= 2100) $years[] = $y; if ($y >= 1900 && $y <= 2100) {
$years[] = $y;
}
} }
$years = array_values(array_unique($years)); $years = array_values(array_unique($years));
} }
return [ return [
'years' => $years, "years" => $years,
'ap' => $sanitiseStrings($_GET['ap'] ?? []), "ap" => $sanitiseStrings($_GET["ap"] ?? []),
'or' => $sanitiseStrings($_GET['or'] ?? []), "or" => $sanitiseStrings($_GET["or"] ?? []),
'fi' => $sanitiseStrings($_GET['fi'] ?? []), "fi" => $sanitiseStrings($_GET["fi"] ?? []),
'kw' => $sanitiseStrings($_GET['kw'] ?? []), "kw" => $sanitiseStrings($_GET["kw"] ?? []),
]; ];
} }
@@ -245,20 +265,20 @@ class SearchController
{ {
$params = []; $params = [];
if (!empty($_GET['query'])) { if (!empty($_GET["query"])) {
$params['query'] = trim((string) $_GET['query']); $params["query"] = trim((string) $_GET["query"]);
} }
if (!empty($_GET['year'])) { if (!empty($_GET["year"])) {
$params['year'] = (int) $_GET['year']; $params["year"] = (int) $_GET["year"];
} }
if (!empty($_GET['orientation'])) { if (!empty($_GET["orientation"])) {
$params['orientation'] = (string) $_GET['orientation']; $params["orientation"] = (string) $_GET["orientation"];
} }
if (!empty($_GET['ap_program'])) { if (!empty($_GET["ap_program"])) {
$params['ap_program'] = (string) $_GET['ap_program']; $params["ap_program"] = (string) $_GET["ap_program"];
} }
if (!empty($_GET['keyword'])) { if (!empty($_GET["keyword"])) {
$params['keyword'] = (string) $_GET['keyword']; $params["keyword"] = (string) $_GET["keyword"];
} }
return $params; return $params;
@@ -272,48 +292,48 @@ class SearchController
private static function sendRateLimitResponse(RateLimit $rateLimit): never private static function sendRateLimitResponse(RateLimit $rateLimit): never
{ {
http_response_code(429); http_response_code(429);
header('Retry-After: ' . $rateLimit->getResetTime()); header("Retry-After: " . $rateLimit->getResetTime());
$retrySeconds = (int) $rateLimit->getResetTime(); $retrySeconds = (int) $rateLimit->getResetTime();
echo <<<HTML echo <<<HTML
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trop de requêtes – Posterg</title> <title>Trop de requêtes – Posterg</title>
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { body {
background: #0d0d0d; background: #0d0d0d;
color: #e0e0e0; color: #e0e0e0;
font-family: 'Helvetica Neue', Arial, sans-serif; font-family: 'Helvetica Neue', Arial, sans-serif;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 2rem; padding: 2rem;
} }
.box { max-width: 520px; text-align: center; } .box { max-width: 520px; text-align: center; }
.box__logo { .box__logo {
font-size: 1.1rem; font-weight: 700; font-size: 1.1rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; letter-spacing: .12em; text-transform: uppercase;
color: #fff; margin-bottom: 2.5rem; color: #fff; margin-bottom: 2.5rem;
} }
.box__title { font-size: 1.6rem; font-weight: 300; margin-bottom: 1rem; } .box__title { font-size: 1.6rem; font-weight: 300; margin-bottom: 1rem; }
.box__text { font-size: .95rem; color: #999; line-height: 1.7; } .box__text { font-size: .95rem; color: #999; line-height: 1.7; }
</style> </style>
</head> </head>
<body> <body>
<div class="box"> <div class="box">
<div class="box__logo">POSTERG</div> <div class="box__logo">POSTERG</div>
<h1 class="box__title">Trop de requêtes</h1> <h1 class="box__title">Trop de requêtes</h1>
<p class="box__text">Vous avez effectué trop de recherches en peu de temps.<br> <p class="box__text">Vous avez effectué trop de recherches en peu de temps.<br>
Réessayez dans {$retrySeconds} secondes.</p> Réessayez dans {$retrySeconds} secondes.</p>
</div> </div>
</body> </body>
</html> </html>
HTML; HTML;
exit; exit();
} }
} }

1
app/storage/cache/rate_limit/f528764d624db129b32c21fbca0cb8d6.json vendored Normal file
View File

@@ -0,0 +1 @@
[1777059009,1777059010,1777059010,1777059010,1777059010,1777059010,1777059010,1777059010,1777059011,1777059011,1777059011,1777059011,1777059011,1777059011,1777059011,1777059011,1777059011,1777059011,1777059012,1777059012,1777059012,1777059012,1777059013,1777059013,1777059013,1777059013,1777059013,1777059013,1777059013,1777059013]

BIN
app/storage/test.db
View File

Binary file not shown.

3
app/templates/footer.php
View File

@@ -1,6 +1,3 @@
<!-- footer.php --> <!-- footer.php -->
<footer>
</footer>
</body> </body>
</html> </html>

0
app/templates/search-bar.php → app/templates/partials/search-bar.php
View File

0
app/templates/partials/flash-messages.php → app/templates/partials/toast.php
View File