From a450035533906f6ebb3b6758f4ed1d9b49c29132 Mon Sep 17 00:00:00 2001
From: Anhgelus Morhtuuzh <william@herges.fr>
Date: Mon, 29 Sep 2025 16:26:52 +0200
Subject: feat(design): base list and readability

---
 design/index.html | 10 ++++++++++
 design/style.css  | 44 +++++++++++++++++++++++++++++++++++++-------
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/design/index.html b/design/index.html
index 3086a33..313544f 100644
--- a/design/index.html
+++ b/design/index.html
@@ -52,9 +52,19 @@
         <p>
             Ignorant. Animi autem voluptates et dolores nasci fatemur e corporis voluptatibus et doloribus -- itaque concedo, quod modo dicebas, cadere causa, si qui incurrunt, numquam vim tantam habent, ut non dicas, quid non probes. Principio, inquam, in physicis, quibus maxime gloriatur, primum totus est alienus. <a href="">Democritea dicit perpauca mutans</a>, sed ita, ut ea, quae dicta sunt ab iis quos probamus, eisque nostrum iudicium et.
         </p>
+        <ul>
+            <li>Item A</li>
+            <li>Item B</li>
+            <li>Item C</li>
+        </ul>
         <p>
             Lorem ipsum dolor sit amet, consectetur <em>adipiscing</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. <b>Quod idem licet transferre in voluptatem</b>, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis.
         </p>
+        <ol>
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+        </ol>
     </article>
 </body>
 </html>
diff --git a/design/style.css b/design/style.css
index e8823cd..79b4ca5 100644
--- a/design/style.css
+++ b/design/style.css
@@ -6,6 +6,8 @@
     --color-light-rose: #F6CBE1; /* link accent hover */
     --color-green: #C9CBA3; /* highlight */
 
+    --font-size-tiny: 0.85rem; /* quote, legend */
+
     font-size: 20px;
 }
 
@@ -15,7 +17,7 @@ body {
     background: var(--color-dark);
     color: var(--color-light);
 
-    padding: 2rem 4rem;
+    padding: 2rem;
 }
 
 body * {
@@ -23,7 +25,7 @@ body * {
 }
 
 article {
-    max-width: 800px;
+    max-width: 700px;
     margin: 0 auto;
 }
 
@@ -39,11 +41,13 @@ h1 {
 
 h2 {
     font-size: 2rem;
+
     margin-top: 2rem;
 }
 
 h3 {
     font-size: 1.5rem;
+
     margin-top: 1.5rem;
 }
 
@@ -54,6 +58,7 @@ p {
 a {
     color: var(--color-rose);
     text-decoration: underline;
+
     &:hover {
         color: #F6CBE1;
     }
@@ -66,14 +71,36 @@ em, cite {
 b, *::selection {
     background: var(--color-green);
     color: var(--color-dark);
+
     padding: 0.05em 0.1em;
+
     &::selection {
         background: var(--color-light);
     }
 }
 
+ul, ol {
+    margin-top: -0.5rem;
+    margin-bottom: 1rem;
+    margin-left: 1rem;
+
+    list-style-position: outside;
+}
+
+ul {
+    list-style-type: disc;
+}
+
+ol {
+    list-style-type: roman;
+}
+
+li {
+    margin-bottom: 0.25rem;
+}
+
 .quote {
-    font-size: 0.85rem;
+    font-size: var(--font-size-tiny);
 }
 
 blockquote {
@@ -89,22 +116,25 @@ figure {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    text-align: center;
     gap: 0.5rem;
 
+    text-align: center;
+
     & img {
         width: auto;
         max-height: 60vh;
+
         &.larger {
-            width: 120%;
-            margin-left: -10%;
+            margin-left: -15%;
+            width: 130%;
             max-height: none;
         }
     }
 }
 
 figcaption {
-    font-size: 0.85rem;
+    font-size: var(--font-size-tiny);
+
     color: var(--color-gray);
 }
 
-- 
cgit v1.2.3