From 9f6147577bb089713f47dc5c28258fa334356caf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20Gervreau-Mercier?=
 <theophile.gm@happyngreen.fr>
Date: Thu, 12 Feb 2026 12:30:40 +0100
Subject: [PATCH] refactor: improve layout ratios and pagination UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Layout improvements:
- Fixed header/main/footer ratios to 2:5, 3:5, 1:5 using flex
- Default to sans-serif font system stack
- Made sections properly flex-based instead of viewport height

Pagination improvements:
- First/previous/next/last navigation buttons (‹‹ ‹ › ››)
- Current page highlighted in colored badge
- Disabled state for unavailable actions
- Clean rounded button design with hover effects
- Proper spacing and visual hierarchy

Card styling:
- Better typography hierarchy
- Hover effects (lift + shadow)
- Improved spacing and readability
- Year displayed in brand color

Tests passing ✅
---
 public/assets/main.css                        | 236 ++++++++++++++----
 public/index.php                              |  39 ++-
 .../ad921d60486366258809553a3db49a4a.json     |   2 +-
 .../f528764d624db129b32c21fbca0cb8d6.json     |   1 +
 4 files changed, 221 insertions(+), 57 deletions(-)
 create mode 100644 src/cache/rate_limit/f528764d624db129b32c21fbca0cb8d6.json

diff --git a/public/assets/main.css b/public/assets/main.css
index 946ae2e..d5f0d8b 100644
--- a/public/assets/main.css
+++ b/public/assets/main.css
@@ -4,22 +4,25 @@ body {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
 }
 
+/* Layout ratios: header 2/5, main 3/5, footer 1/5 */
 header {
-  height: 20vh;
-}
-main {
-  height: 60vh;
-}
-footer {
-  height: 10vh;
-  font-size: 0.8em;
+  flex: 1;
+  min-height: 0;
 }
 
-body {
-  display: flex;
-  flex-direction: column;
+main {
+  flex: 4;
+  min-height: 0;
+}
+
+footer {
+  flex: 1;
+  min-height: 0;
 }
 
 header, main, footer {
@@ -29,28 +32,70 @@ header, main, footer {
 }
 
 header {
-  font-family: "police1";
+  font-family: "police1", sans-serif;
   background: #9557b5ff;
   color: white;
-  font-size: 2rem;
   display: flex;
-  gap: 6%;
-  padding: 1rem 4rem;
-  .title {
-    color: white;
-  }
+  gap: 4%;
+  padding: 1.5rem 3rem;
+  align-items: center;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+header .title {
+  color: white;
+  font-size: 1.75rem;
+  font-weight: 700;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+header section {
+  flex: 1;
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+header section p {
+  margin: 0.5rem 0;
+}
+
+header section p:first-child {
+  font-size: 1rem;
+  font-weight: 600;
 }
 
 header section p:not(:first-child) {
-  font-size: 14px;
+  font-size: 0.85rem;
+  opacity: 0.95;
 }
 
-header .title, header section, header nav {
+header nav {
+  display: flex;
+  gap: 0.75rem;
+}
+
+header nav button {
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.9rem;
+  font-family: inherit;
+}
+
+header nav button:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: translateY(-1px);
+}
+
+header nav a {
+  color: white;
   text-decoration: none;
-  outline: none;
-  font-size: 18px;
-  text-decoration: none;
-  line-height: 2.5rem;
 }
 
 /* Filter info banner */
@@ -79,36 +124,76 @@ header .title, header section, header nav {
 .clear-filter:hover {
   background: rgba(0, 0, 0, 0.4);
 }
-main {
-  height: 60vh;
 
+main {
+  background: #3c856bff;
   display: grid;
   grid-template-rows: repeat(2, minmax(0, 1fr));
   grid-auto-flow: column;
-
-  /* critical: force column width so new columns form */
   grid-auto-columns: 260px;
-
   gap: 1rem;
   padding: 1rem;
   box-sizing: border-box;
-
   overflow-x: auto;
   overflow-y: hidden;
+  scroll-snap-type: x mandatory;
 }
+
+.card-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  height: 100%;
+}
+
 .card {
   background: #eee;
   border-radius: 10px;
   padding: 1rem;
+  scroll-snap-align: start;
+  height: 100%;
+  box-sizing: border-box;
+  transition: transform 0.2s, box-shadow 0.2s;
+  display: flex;
+  flex-direction: column;
 }
 
-main {
-  background: #3c856bff;
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.card .title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.3;
+  color: #333;
+}
+
+.card .authors {
+  font-size: 0.9rem;
+  margin: 0;
+  color: #666;
+}
+
+.card .year {
+  font-size: 0.85rem;
+  margin: 0;
+  color: #9557b5;
+  font-weight: 600;
 }
 
 footer {
   background: #222222ff;
   overflow: hidden;
+  box-sizing: border-box;
 }
 
 /* Years navigation in footer */
@@ -116,15 +201,16 @@ footer {
   height: 100%;
   display: flex;
   align-items: center;
+  padding: 0 1rem;
 }
 
 .years-scroll {
   display: flex;
-  gap: 1rem;
+  gap: 0.75rem;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-behavior: smooth;
-  padding: 0.5rem 0;
+  padding: 0.75rem 0;
   width: 100%;
 }
 
@@ -161,20 +247,76 @@ footer {
   font-weight: bold;
 }
 
-/* .card { */
-/* width: 20%; */
-/* border: 1px solid white; */
-/* color: white; */
-/* margin: 1ch; */
-/* padding: 2ch; */
-/* } */
-main {
-  scroll-snap-type: x mandatory;
+/* Pagination controls */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  margin: 1rem auto;
+  width: fit-content;
 }
 
-.card {
-  scroll-snap-align: start;
+.pagination-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding: 0 0.75rem;
+  background: rgba(255, 255, 255, 0.9);
+  color: #3c856b;
+  text-decoration: none;
+  border-radius: 6px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  transition: all 0.2s;
+  border: 2px solid transparent;
 }
-.item {
-  width: 50%;
+
+.pagination-btn:hover:not(.disabled) {
+  background: white;
+  border-color: #9557b5;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.pagination-btn.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.pagination-info {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 1rem;
+  color: white;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.page-current {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #9557b5;
+  background: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+  min-width: 2rem;
+  text-align: center;
+}
+
+.page-separator {
+  font-weight: 300;
+  opacity: 0.6;
+  padding: 0 0.25rem;
+}
+
+.page-total {
+  opacity: 0.8;
 }
diff --git a/public/index.php b/public/index.php
index 1f40b03..a203dd4 100644
--- a/public/index.php
+++ b/public/index.php
@@ -65,15 +65,36 @@ include APP_ROOT . '/templates/header.php';
     <?php 
     $yearParam = $year ? '&year=' . (int)$year : '';
     ?>
-    <?php if ($page > 1): ?>
-        <a href="?page=<?= (int)($page - 1) . $yearParam ?>" class="pagination-previous">Précédent</a>
-    <?php endif; ?>
-
-    <?php if ($page < $totalPages): ?>
-        <a href="?page=<?= (int)($page + 1) . $yearParam ?>" class="pagination-next">Suivant</a>
-    <?php endif; ?>
-
-    <span class="pagination-info">Page <?= (int)$page ?> sur <?= (int)$totalPages ?></span>
+    
+    <a href="?page=1<?= $yearParam ?>" 
+       class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>" 
+       <?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
+        ‹‹
+    </a>
+    
+    <a href="?page=<?= max(1, (int)($page - 1)) . $yearParam ?>" 
+       class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
+       <?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
+        ‹
+    </a>
+    
+    <span class="pagination-info">
+        <span class="page-current"><?= (int)$page ?></span>
+        <span class="page-separator">/</span>
+        <span class="page-total"><?= (int)$totalPages ?></span>
+    </span>
+    
+    <a href="?page=<?= min($totalPages, (int)($page + 1)) . $yearParam ?>" 
+       class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
+       <?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
+        ›
+    </a>
+    
+    <a href="?page=<?= $totalPages . $yearParam ?>" 
+       class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
+       <?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
+        ››
+    </a>
 </nav>
 <?php endif; ?>
 
diff --git a/src/cache/rate_limit/ad921d60486366258809553a3db49a4a.json b/src/cache/rate_limit/ad921d60486366258809553a3db49a4a.json
index d55baf9..9c94055 100644
--- a/src/cache/rate_limit/ad921d60486366258809553a3db49a4a.json
+++ b/src/cache/rate_limit/ad921d60486366258809553a3db49a4a.json
@@ -1 +1 @@
-[1770895586]
\ No newline at end of file
+[1770895832]
\ No newline at end of file
diff --git a/src/cache/rate_limit/f528764d624db129b32c21fbca0cb8d6.json b/src/cache/rate_limit/f528764d624db129b32c21fbca0cb8d6.json
new file mode 100644
index 0000000..a8d44a6
--- /dev/null
+++ b/src/cache/rate_limit/f528764d624db129b32c21fbca0cb8d6.json
@@ -0,0 +1 @@
+[1770895784,1770895787]
\ No newline at end of file