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

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

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

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

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

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");
.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 <dl> 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 <div> inside <dl> */
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 <figure> directly inside <aside> */
aside figure {
overflow: hidden;
margin: 0;
border-radius: 8px;
overflow: hidden;
margin: 0;
border-radius: 8px;
}
aside figure img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
aside figure embed,
aside figure video {
width: 100%;
display: block;
border: none;
width: 100%;
display: block;
border: none;
}
aside figure video {
max-height: 500px;
max-height: 500px;
}
aside figure embed {
height: clamp(300px, 80vh, 700px);
height: clamp(300px, 80vh, 700px);
}
/* figcaption under media — target <figcaption> inside <aside> */
aside figcaption {
font-size: var(--step--2);
color: var(--text-secondary);
margin: var(--space-3xs) 0 0;
font-style: italic;
font-size: var(--step--2);
color: var(--text-secondary);
margin: var(--space-3xs) 0 0;
font-style: italic;
}
/* PDF fallback download link */
.tfe-pdf-fallback {
font-size: var(--step--1);
margin: var(--space-3xs) 0 0;
font-size: var(--step--1);
margin: var(--space-3xs) 0 0;
}
.tfe-pdf-fallback a {
color: var(--text-primary);
text-decoration: underline;
text-underline-offset: 2px;
color: var(--text-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
/* "Not available" and "no files" notices */
.tfe-restricted,
.tfe-no-files {
font-size: var(--step--1);
color: var(--text-secondary);
font-style: italic;
padding: var(--space-s) 0;
margin: 0;
font-size: var(--step--1);
color: var(--text-secondary);
font-style: italic;
padding: var(--space-s) 0;
margin: 0;
}
/* Responsive */
@media (max-width: 900px) {
.tfe-layout {
grid-template-columns: 1fr;
gap: var(--space-l);
}
.tfe-layout {
grid-template-columns: 1fr;
gap: var(--space-l);
}
.tfe-title {
font-size: var(--step-2);
}
.tfe-title {
font-size: var(--step-2);
}
}
@media (max-width: 600px) {
.tfe-main {
padding: var(--space-m) var(--space-s) var(--space-l);
}
.tfe-main {
padding: var(--space-m) var(--space-s) var(--space-l);
}
.tfe-title {
font-size: var(--step-1);
}
.tfe-title {
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)
============================================================ */
/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
--step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
--step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
--step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
--step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
--step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
}
/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
/* One-up pairs */
--space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
--space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
--space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
--space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
/* Custom pairs */
--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
}
:root {
/* Fonts */
--font-body: "BBBDMSans", sans-serif;
--font-display: "Ductus", sans-serif;
/* Backgrounds */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-tertiary: #e8e8e8;
--bg-active: #d0d0d0;
/* Text */
--text-primary: #111111;
--text-secondary: #666666;
--text-tertiary: #999999;
/* Borders */
--border-primary: #dddddd;
--border-secondary: #cccccc;
/* Status */
--success: #5cd69d;
--error: #f25a5a;
--warning: #fbca51;
/* Accent */
--accent-primary: #9557b5;
--accent-secondary: #683d7f;
--accent-foreground: #ffffff;
--accent-muted: rgba(149, 87, 181, 0.12);
--accent-blue: #41adff;
--accent-green: #4caf50;
--accent-yellow: #f39c12;
--accent-red: #f25a5a;
/* Gradient (header) */
--gradient-1: #3c856c;
--gradient-2: #60ecb4;
--gradient-3: #e390ff;
--gradient-4: #9557b5;
/* Header decorative */
--header-gradient-fade: rgba(149, 87, 181, 0);
--header-shadow-strong: rgba(119, 70, 145, 1);
--header-shadow-soft: rgba(119, 70, 145, 0.8);
--header-nav-active-border: rgba(255, 255, 255, 0.6);
/* Search error block */
--search-error-bg: #fff0f0;
--search-error-border: #cc0000;
--search-error-color: #cc0000;
/* System page — log/config syntax highlight */
--sys-syntax-comment: #999999;
--sys-syntax-directive: #1a6fb5;
--sys-syntax-block: #7a2fa0;
--sys-syntax-value: #a05c00;
--sys-syntax-location: #1a7a6b;
--sys-syntax-notice: #3a6ea8;
--sys-syntax-crit: #c0392b;
/* Muted alpha overlays — derived from semantic tokens */
--success-muted-bg: rgba(92, 214, 157, 0.12);
--success-muted-border: rgba(92, 214, 157, 0.35);
--warning-muted-bg: rgba(251, 202, 81, 0.12);
--warning-muted-border: rgba(251, 202, 81, 0.35);
--error-muted-bg: rgba(242, 90, 90, 0.12);
--error-muted-border: rgba(242, 90, 90, 0.35);
--blue-muted-bg: rgba(65, 173, 255, 0.12);
--blue-muted-border: rgba(65, 173, 255, 0.30);
--blue-muted-bg-hover: rgba(65, 173, 255, 0.22);
--yellow-muted-bg: rgba(243, 156, 18, 0.12);
--yellow-muted-border: rgba(243, 156, 18, 0.30);
--yellow-muted-bg-hover: rgba(243, 156, 18, 0.22);
--green-muted-bg: rgba(76, 175, 80, 0.12);
--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);
--step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
--step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
--step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
--step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
--step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
--step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
/* One-up pairs */
--space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
--space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
--space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
--space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
/* Custom pairs */
--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
/* Fonts */
--font-body: "BBBDMSans", sans-serif;
--font-display: "Ductus", sans-serif;
/* Backgrounds */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-tertiary: #e8e8e8;
--bg-active: #d0d0d0;
/* Text */
--text-primary: #111111;
--text-secondary: #666666;
--text-tertiary: #999999;
/* Borders */
--border-primary: #dddddd;
--border-secondary: #cccccc;
/* Status */
--success: #5cd69d;
--error: #f25a5a;
--warning: #fbca51;
/* Accent */
--accent-primary: #9557b5;
--accent-secondary: #683d7f;
--accent-foreground: #ffffff;
--accent-muted: rgba(149, 87, 181, 0.12);
--accent-blue: #41adff;
--accent-green: #4caf50;
--accent-yellow: #f39c12;
--accent-red: #f25a5a;
/* Gradient (header) */
--gradient-1: #3c856c;
--gradient-2: #60ecb4;
--gradient-3: #e390ff;
--gradient-4: #9557b5;
/* Header decorative */
--header-gradient-fade: rgba(149, 87, 181, 0);
--header-shadow-strong: rgba(119, 70, 145, 1);
--header-shadow-soft: rgba(119, 70, 145, 0.8);
--header-nav-active-border: rgba(255, 255, 255, 0.6);
/* Search error block */
--search-error-bg: #fff0f0;
--search-error-border: #cc0000;
--search-error-color: #cc0000;
/* System page — log/config syntax highlight */
--sys-syntax-comment: #999999;
--sys-syntax-directive: #1a6fb5;
--sys-syntax-block: #7a2fa0;
--sys-syntax-value: #a05c00;
--sys-syntax-location: #1a7a6b;
--sys-syntax-notice: #3a6ea8;
--sys-syntax-crit: #c0392b;
/* Muted alpha overlays — derived from semantic tokens */
--success-muted-bg: rgba(92, 214, 157, 0.12);
--success-muted-border: rgba(92, 214, 157, 0.35);
--warning-muted-bg: rgba(251, 202, 81, 0.12);
--warning-muted-border: rgba(251, 202, 81, 0.35);
--error-muted-bg: rgba(242, 90, 90, 0.12);
--error-muted-border: rgba(242, 90, 90, 0.35);
--blue-muted-bg: rgba(65, 173, 255, 0.12);
--blue-muted-border: rgba(65, 173, 255, 0.3);
--blue-muted-bg-hover: rgba(65, 173, 255, 0.22);
--yellow-muted-bg: rgba(243, 156, 18, 0.12);
--yellow-muted-border: rgba(243, 156, 18, 0.3);
--yellow-muted-bg-hover: rgba(243, 156, 18, 0.22);
--green-muted-bg: rgba(76, 175, 80, 0.12);
--green-muted-border: rgba(76, 175, 80, 0.3);
--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.
*/
$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
$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
}
// Admin panel: serve files directly
if (str_starts_with($uri, '/admin')) {
if (str_starts_with($uri, "/admin")) {
// Rewrite /admin → /admin/index.php
$file = __DIR__ . '/public' . $uri;
$file = __DIR__ . "/public" . $uri;
if (is_dir($file)) {
$file .= '/index.php';
$file .= "/index.php";
}
if (file_exists($file)) {
include $file;
@@ -28,6 +49,6 @@ if (str_starts_with($uri, '/admin')) {
}
// Send everything else through the front controller
$_SERVER['SCRIPT_NAME'] = '/index.php';
require __DIR__ . '/public/index.php';
$_SERVER["SCRIPT_NAME"] = "/index.php";
require __DIR__ . "/public/index.php";
return true;

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

@@ -35,7 +35,7 @@ class HomeController
*/
public static function create(): self
{
require_once APP_ROOT . '/src/Database.php';
require_once APP_ROOT . "/src/Database.php";
return new self(Database::getInstance());
}
@@ -49,92 +49,108 @@ class HomeController
*/
public function handle(): array
{
$page = isset($_GET['page']) ? max(1, (int) $_GET['page']) : 1;
$year = isset($_GET['year']) ? (int) $_GET['year'] : null;
$page = isset($_GET["page"]) ? max(1, (int) $_GET["page"]) : 1;
$year = isset($_GET["year"]) ? (int) $_GET["year"] : null;
// Normalise zero (e.g. ?year=0) to null so it is treated as "no filter"
if ($year === 0) {
$year = null;
}
// 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 = [];
$totalItems = 0;
$itemsToLoad = [];
$totalItems = 0;
$availableYears = [];
$latestYear = null;
$coverMap = [];
$latestYear = null;
$coverMap = [];
try {
$offset = ($page - 1) * self::ITEMS_PER_PAGE;
$offset = ($page - 1) * self::ITEMS_PER_PAGE;
$availableYears = $this->db->getAvailableYears();
if ($year !== null) {
$itemsToLoad = $this->db->searchTheses(['year' => $year], self::ITEMS_PER_PAGE, $offset);
$totalItems = $this->db->countSearchResults(['year' => $year]);
$itemsToLoad = $this->db->searchTheses(
["year" => $year],
self::ITEMS_PER_PAGE,
$offset,
);
$totalItems = $this->db->countSearchResults(["year" => $year]);
} elseif ($isDefaultView) {
$latestYear = $this->db->getLatestPublishedYear();
$itemsToLoad = $this->db->getLatestYearTheses(self::ITEMS_PER_PAGE);
$totalItems = count($itemsToLoad); // no multi-page on default view
$latestYear = $this->db->getLatestPublishedYear();
$itemsToLoad = $this->db->getLatestYearTheses(
self::ITEMS_PER_PAGE,
);
$totalItems = count($itemsToLoad); // no multi-page on default view
} else {
$itemsToLoad = $this->db->getPublishedTheses(self::ITEMS_PER_PAGE, $offset);
$totalItems = $this->db->countPublishedTheses();
$itemsToLoad = $this->db->getPublishedTheses(
self::ITEMS_PER_PAGE,
$offset,
);
$totalItems = $this->db->countPublishedTheses();
}
// Batch-load cover images for theses that have no banner_path
if (!empty($itemsToLoad)) {
$needCover = array_column(
array_filter($itemsToLoad, static fn($t) => empty($t['banner_path'])),
'id'
array_filter(
$itemsToLoad,
static fn($t) => empty($t["banner_path"]),
),
"id",
);
if (!empty($needCover)) {
$coverMap = $this->db->getCoverPathsForTheses($needCover);
}
}
} catch (Exception $e) {
error_log('HomeController: ' . $e->getMessage());
error_log("HomeController: " . $e->getMessage());
// Return safe empty state; view will show "Aucun mémoire trouvé"
$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
if ($totalPages < 1) {
$totalPages = 0;
}
$baseParams = array_filter(['year' => $year]);
$baseParams = array_filter(["year" => $year]);
return [
// Pagination / filter state
'page' => $page,
'year' => $year,
'isDefaultView' => $isDefaultView,
'totalItems' => $totalItems,
'totalPages' => $totalPages,
'baseParams' => $baseParams,
"page" => $page,
"year" => $year,
"isDefaultView" => $isDefaultView,
"totalItems" => $totalItems,
"totalPages" => $totalPages,
"baseParams" => $baseParams,
// Thesis data
'itemsToLoad' => $itemsToLoad,
'latestYear' => $latestYear,
'availableYears' => $availableYears,
'coverMap' => $coverMap,
"itemsToLoad" => $itemsToLoad,
"latestYear" => $latestYear,
"availableYears" => $availableYears,
"coverMap" => $coverMap,
// Page meta
'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.',
'ogTags' => [
'type' => 'website',
'title' => 'Posterg – Mémoires de l\'ERG',
'description' => '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',
"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.',
"ogTags" => [
"type" => "website",
"title" => 'Posterg – Mémoires de l\'ERG',
"description" =>
'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
'currentNav' => '',
'extraCss' => ['/assets/css/main.css'],
'bodyClass' => 'home-body',
"currentNav" => "",
"extraCss" => ["/assets/css/public.css"],
"bodyClass" => "home-body",
];
}
}

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

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