Work on the admin section styling

.ignore

@@ -0,0 +1,2 @@
+docs
+nginx

public/admin/add.php

@@ -78,11 +78,12 @@ function wasSelected($key, $value)
             <input type="text" id="auteurice" name="auteurice" placeholder="Nom de l'auteur·ice" value="<?php echo old(
                                                                                                             "auteurice",
                                                                                                         ); ?>" required>
-
+            <br>
             <label for="mail">Contact (email, site web, insta, ...)</label>
             <input type="text" id="mail" name="mail" placeholder="votre.email@example.com ou @instagram" value="<?php echo old(
                                                                                                                     "mail",
                                                                                                                 ); ?>">
+            <br>
             <label for="année">Année diplômante *</label>
             <input type="number" id="année" name="année" min="2000" max="<?php echo date(
                                                                                 "Y",
@@ -113,6 +114,7 @@ function wasSelected($key, $value)
                 <?php endforeach; ?>
             </select>
 
+            <br>
             <label for="ap">Atelier Pratique (AP) *</label>
             <select id="ap" name="ap" required>
                 <option value="">-- Sélectionner un AP --</option>
@@ -132,6 +134,7 @@ function wasSelected($key, $value)
                 <?php endforeach; ?>
             </select>
 
+            <br>
             <label for="finality">Finalité du master *</label>
             <select id="finality" name="finality" required>
                 <option value="">-- Sélectionner une finalité --</option>
@@ -149,6 +152,7 @@ function wasSelected($key, $value)
                 <?php endforeach; ?>
             </select>
 
+            <br>
             <label for="promoteurice">Promoteur·ice(s)</label>
             <input type="text" id="promoteurice" name="promoteurice" placeholder="Nom du/de la promoteur·ice (si plusieurs, séparer par des virgules)" value="<?php echo old(
                                                                                                                                                                     "promoteurice",
@@ -164,18 +168,22 @@ function wasSelected($key, $value)
                                                                                                     "titre",
                                                                                                 ); ?>" required>
 
+            <br>
             <label for="subtitle">Sous-titre (si applicable)</label>
             <input type="text" id="subtitle" name="subtitle" placeholder="Sous-titre de votre TFE" value="<?php echo old(
                                                                                                                 "subtitle",
                                                                                                             ); ?>">
+            <br>
             <label for="synopsis">Synopsis (environ 200 mots) *</label>
             <textarea id="synopsis" name="synopsis" rows="8" placeholder="Décrivez votre TFE en quelques paragraphes..." required><?php echo old(
                                                                                                                                         "synopsis",
                                                                                                                                     ); ?></textarea>
+            <br>
             <label for="problématique">Problématique</label>
             <textarea id="problématique" name="problématique" rows="4" placeholder="La problématique principale de votre mémoire..."><?php echo old(
                                                                                                                                             "problématique",
                                                                                                                                         ); ?></textarea>
+            <br>
             <label>Langue(s) du TFE * (sélection multiple possible)</label>
             <ul class="no-style">
                 <?php foreach ($languages as $language): ?>
@@ -195,6 +203,7 @@ function wasSelected($key, $value)
                 <?php endforeach; ?>
             </ul>
 
+            <br>
             <label>Format(s) (sélection multiple possible)</label>
             <ul class="no-style">
                 <?php foreach ($formatTypes as $format): ?>
@@ -214,15 +223,18 @@ function wasSelected($key, $value)
                 <?php endforeach; ?>
             </ul>
 
+            <br>
             <label for="tag">Mots-clés (max 10, séparés par des virgules)</label>
             <input type="text" id="tag" name="tag" placeholder="typographie, photographie, outils libre, post-colonial..." value="<?php echo old(
                                                                                                                                         "tag",
                                                                                                                                     ); ?>">
+            <br>
             <small>Séparez les mots-clés par des virgules. Maximum 10 mots-clés.</small>
             <label for="duration_info">Durée/Taille (si applicable)</label>
             <input type="text" id="duration_info" name="duration_info" placeholder="Ex: 68 minutes, 128 pages, 78 pages + 15 minutes" value="<?php echo old(
                                                                                                                                                     "duration_info",
                                                                                                                                                 ); ?>">
+            <br>
             <small>Indiquez la durée (en minutes) ou le nombre de pages de votre TFE.</small>
             <label for="lien">Lien vers un site web ou ressource en ligne</label>
             <input type="url" id="lien" name="lien" placeholder="https://monmemoire.erg.be/..." value="<?php echo old(

public/admin/inc/head.php

@@ -7,7 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?php echo htmlspecialchars($pageTitle ?? 'Admin'); ?> - Post-ERG</title>
     <link rel="stylesheet" href="/assets/modern-normalize.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
     <link rel="stylesheet" href="/assets/admin.css">
     <link rel="shortcut icon" href="/assets/admin_favicon.svg" type="image/svg+xml">
     <?php if (php_sapi_name() === 'cli-server'): ?>
@@ -16,7 +15,10 @@
             (function poll() {
                 fetch('/live-reload.php')
                     .then(r => r.json())
-                    .then(d => { if (d.changed) location.reload(); else setTimeout(poll, 1000); })
+                    .then(d => {
+                        if (d.changed) location.reload();
+                        else setTimeout(poll, 1000);
+                    })
                     .catch(() => setTimeout(poll, 2000));
             })();
         </script>

public/assets/admin.css

@@ -1,19 +1,164 @@
+:root {
+  --background-body: #3c856bff;
+  --background: #161f27;
+  --background-alt: #1a242f;
+  --selection: #1c76c5;
+  --text-main: #dbdbdb;
+  --text-bright: #fff;
+  --text-muted: #a9b1ba;
+  --links: #41adff;
+  --focus: #0096bfab;
+  --border: ;
+  --code: #ffbe85;
+  --animation-duration: 0.1s;
+  --button-base: #0c151c;
+  --button-hover: #040a0f;
+  --scrollbar-thumb: var(--button-hover);
+  --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%));
+  --form-placeholder: #a9a9a9;
+  --form-text: #fff;
+  --variable: #d941e2;
+  --highlight: #efdb43;
+  --select-arrow: svg-load("./assets/select-arrow.svg", fill: #efefef);
+}
+
+/* @media (prefers-color-scheme: dark) { */
+/* --background-body: #202b38; */
+/* --background: #161f27; */
+/* --background-alt: #1a242f; */
+/* --selection: #1c76c5; */
+/* --text-main: #dbdbdb; */
+/* --text-bright: #fff; */
+/* --text-muted: #a9b1ba; */
+/* --links: #41adff; */
+/* --focus: #0096bfab; */
+/* --border: #526980; */
+/* --code: #ffbe85; */
+/* --animation-duration: 0.1s; */
+/* --button-base: #0c151c; */
+/* --button-hover: #040a0f; */
+/* --scrollbar-thumb: var(--button-hover); */
+/* --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%)); */
+/* --form-placeholder: #a9a9a9; */
+/* --form-text: #fff; */
+/* --variable: #d941e2; */
+/* --highlight: #efdb43; */
+/* --select-arrow: svg-load("./assets/select-arrow.svg", fill: #efefef); */
+/* } */
+
 /* Base Styles */
 body {
-  max-width: 95vw;
   margin: auto;
-  /* background-color: yellow; */
+  padding: 0;
+  background-color: var(--background-body);
+  color: var(--text-main);
+  font-size: 1.2em;
 }
+
+header, main, footer {
+  margin: auto 2ch;
+}
+
+header, footer {
+  text-align: center;
+}
+
 main {
+  padding: 2ch;
   max-width: 80vw;
   margin: auto 1.2rem;
-  /* background-color: yellow; */
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+  position: relative;
+}
+table {
+  table-layout: auto;
+  margin: auto;
+  width: 95vw;
+  margin-left: calc(50% - 45vw);
+  /* margin: auto; */
+}
+table {
+  width: max-content;
+  min-width: 95vw; /* optional fallback */
+  table-layout: auto;
+}
+
+/* https://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css */
+
+tr:nth-child(even) {
+  background-color: #204639;
+}
+
+tr:nth-child(odd) {
+  background-color: #2f6a55;
 }
 
 nav {
   margin-top: 1rem;
 }
 
+fieldset {
+  border: 1px solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 12px;
+  padding: 1em;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
+label {
+  vertical-align: middle;
+  margin-bottom: 1em;
+  display: inline-block;
+}
+
+button,
+select,
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="checkbox"],
+input[type="range"],
+input[type="radio"] {
+  cursor: pointer;
+}
+
+input,
+select {
+  display: block;
+}
+
+input,
+button,
+textarea,
+select {
+  color: var(--form-text);
+  background-color: var(--background);
+  font-family: inherit;
+  font-size: inherit;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  background-color: var(--button-base);
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
 /* Alert Messages */
 .error-message,
 .alert-error {
@@ -49,9 +194,9 @@ nav {
 }
 
 /* Lists */
-ul.no-style {
+/* ul.no-style { */
-  list-style: none;
+/* list-style: none; */
-}
+/* } */
 
 /* Filters */
 .filters {