style(format): install prettier and run

author: Anhgelus Morhtuuzh <william@herges.fr> 2025-10-06 19:22:14 +0200
committer: Anhgelus Morhtuuzh <william@herges.fr> 2025-10-06 19:22:14 +0200
commit: 9cfcbabb032c729b06d581412a64a9e7cefed6b1 (patch)
tree: e5ff64ed658ef1af98d53191a252c0d0c7e1c7f5 /design
parent: 412a77b7c1ba1819f4bf1c0697ddd19d7af21e19 (diff)
4 files changed, 434 insertions, 310 deletions
diff --git a/design/index.html b/design/index.html
index e42aa98..7d31b19 100644
--- a/design/index.html
+++ b/design/index.html
@@ -1,65 +1,71 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>anhgelus</title>
-    <link href="reset.css" rel="stylesheet">
-    <link href="styles.css" rel="stylesheet">
-</head>
-<body>
+    <link href="reset.css" rel="stylesheet" />
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+  <body>
     <header>
-        <img src="https://cdn.anhgelus.world/pfp.jpg" alt="pfp">
-        <nav>
-            <a href="">Home</a>
-            <a href="">Logs</a>
-            <a href="">Work</a>
-            <a href="">Philosophy</a>
-            <a href="">Lien 1</a>
-            <a href="">Lien 2</a>
-            <a href="">Lien 3</a>
-            <a href="">Lien 4</a>
-        </nav>
+      <img src="https://cdn.anhgelus.world/pfp.jpg" alt="pfp" />
+      <nav>
+        <a href="">Home</a>
+        <a href="">Logs</a>
+        <a href="">Work</a>
+        <a href="">Philosophy</a>
+        <a href="">Lien 1</a>
+        <a href="">Lien 2</a>
+        <a href="">Lien 3</a>
+        <a href="">Lien 4</a>
+      </nav>
     </header>
     <main>
-        <div class="introduction">
-            <h1>logs</h1>
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing 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.
-            </p>
-        </div>
+      <div class="introduction">
+        <h1>logs</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+        </p>
+      </div>
+      <article>
+        <article>
+          <h2><a href="log.html">Article title</a></h2>
+          <figure>
+            <a href="log.html"><img src="https://placehold.co/1920x1080" alt="" /></a>
+            <figcaption>A placeholder.</figcaption>
+          </figure>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+          </p>
+        </article>
         <article>
-            <article>
-                <h2><a href="log.html">Article title</a></h2>
-                <figure>
-                    <a href="log.html"><img src="https://placehold.co/1920x1080" alt=""></a>
-                    <figcaption>A placeholder.</figcaption>
-                </figure>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing 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. 
-                </p>
-            </article>
-            <article>
-                <h2><a href="log.html">Article title</a></h2>
-                <figure>
-                    <a href="log.html"><img src="https://placehold.co/1920x1080" alt=""></a>
-                    <figcaption>A placeholder.</figcaption>
-                </figure>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing 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. 
-                </p>
-            </article>
-            <div class="pagination">
-                <a href="">Précédent</a>
-                <p>01/15</p>
-                <a href="">Suivant</a>
-            </div>
+          <h2><a href="log.html">Article title</a></h2>
+          <figure>
+            <a href="log.html"><img src="https://placehold.co/1920x1080" alt="" /></a>
+            <figcaption>A placeholder.</figcaption>
+          </figure>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+          </p>
         </article>
+        <div class="pagination">
+          <a href="">Précédent</a>
+          <p>01/15</p>
+          <a href="">Suivant</a>
+        </div>
+      </article>
     </main>
     <footer>
-        <p>&copy; 2025 - Anhgelus Morhtuuzh</p>
-        <p>«&thinsp;Une citation&thinsp;»</p>
-        <p><a href="">Mentions légales</a></p>
+      <p>&copy; 2025 - Anhgelus Morhtuuzh</p>
+      <p>«&thinsp;Une citation&thinsp;»</p>
+      <p><a href="">Mentions légales</a></p>
     </footer>
-</body>
+  </body>
 </html>
diff --git a/design/log.html b/design/log.html
index b95be46..89fb583 100644
--- a/design/log.html
+++ b/design/log.html
@@ -1,95 +1,125 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>anhgelus - log entry - Title</title>
-    <link href="reset.css" rel="stylesheet">
-    <link href="styles.css" rel="stylesheet">
-</head>
-<body>
+    <link href="reset.css" rel="stylesheet" />
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+  <body>
     <header>
-        <img src="https://cdn.anhgelus.world/pfp.jpg" alt="pfp">
-        <nav>
-            <a href="">Home</a>
-            <a href="">Logs</a>
-            <a href="">Work</a>
-            <a href="">Philosophy</a>
-            <a href="">Lien 1</a>
-            <a href="">Lien 2</a>
-            <a href="">Lien 3</a>
-            <a href="">Lien 4</a>
-        </nav>
+      <img src="https://cdn.anhgelus.world/pfp.jpg" alt="pfp" />
+      <nav>
+        <a href="">Home</a>
+        <a href="">Logs</a>
+        <a href="">Work</a>
+        <a href="">Philosophy</a>
+        <a href="">Lien 1</a>
+        <a href="">Lien 2</a>
+        <a href="">Lien 3</a>
+        <a href="">Lien 4</a>
+      </nav>
     </header>
     <article>
-        <h1>Page title</h1>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing 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.
-        </p>
-        <figure>
-            <img src="https://placehold.co/1920x1080" alt="" class="large">
-            <figcaption>A placeholder large image.</figcaption>
-        </figure>
-        <h2>A. Section</h2>
-        <p>
-            Lorem ipsum dolor sit amet, <code>consectetur adipiscing elit</code>, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri <em>tamen</em> permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. <a href="">Quod idem licet transferre</a>.
-        </p>
-        <figure>
-            <img src="https://placehold.co/600x400" alt="placeholder">
-            <figcaption>A placeholder image.</figcaption>
-        </figure>
-        <h3>1. Subsection</h3>
-        <p>
-            Et ultimum bonorum, quod omnium philosophorum sententia tale debet esse, <a href="">ut ad Orestem pervenias profectus a Theseo</a>. At vero Epicurus una in domo, et ea quidem angusta, quam magnos quantaque amoris conspiratione consentientis tenuit amicorum greges! Quod fit etiam nunc ab Epicureis. Sed ad rem redeamus; de hominibus dici non modo.
-        </p>
-        <p>
-            Civitatis, P. Scaevolam M'.que Manilium, ab iisque vitiis, quae paulo ante collegi, abest plurimum et, cum stultorum vitam cum sua comparat, magna afficitur voluptate. Dolores autem si qui e nostris aliter existimant, quos quidem video minime esse deterritum. Quae cum dixisset, Explicavi, inquit, sententiam meam, et eo quidem consilio, tuum iudicium ut.
-        </p>
-        <h3>2. Subsection</h3>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, <em>fieri tamen</em> permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit.
-        </p>
-        <p>
-            <a href="">Verborum vis et natura orationis</a> et <a href="">consequentium repugnantiumve ratio potest perspici</a>. Omnium autem rerum natura perspecta erit, nullo modo sine amicitia firmam et perpetuam iucunditatem vitae tenere possumus neque vero ipsam amicitiam tueri, nisi aeque.
-        </p>
-        <div class="quote">
-            <blockquote cite="">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus.
-            </blockquote>
-            <p>John Doe, <cite>Foo Bar</cite></p>
-        </div>
-        <p>
-            Laborum perfunctio neque <b>perpessio dolorum</b> per se esse expetendam et dolorem ipsum per se esse fugiendum. Itaque aiunt hanc quasi naturalem atque insitam in animis inclusae inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi.
-        </p>
-        <h2>B. Section</h2>
-        <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>
-        <pre><code>package main
+      <h1>Page title</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+      </p>
+      <figure>
+        <img src="https://placehold.co/1920x1080" alt="" class="large" />
+        <figcaption>A placeholder large image.</figcaption>
+      </figure>
+      <h2>A. Section</h2>
+      <p>
+        Lorem ipsum dolor sit amet, <code>consectetur adipiscing elit</code>, sed do eiusmod tempor incididunt ut labore
+        et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri
+        <em>tamen</em> permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.
+        <a href="">Quod idem licet transferre</a>.
+      </p>
+      <figure>
+        <img src="https://placehold.co/600x400" alt="placeholder" />
+        <figcaption>A placeholder image.</figcaption>
+      </figure>
+      <h3>1. Subsection</h3>
+      <p>
+        Et ultimum bonorum, quod omnium philosophorum sententia tale debet esse,
+        <a href="">ut ad Orestem pervenias profectus a Theseo</a>. At vero Epicurus una in domo, et ea quidem angusta,
+        quam magnos quantaque amoris conspiratione consentientis tenuit amicorum greges! Quod fit etiam nunc ab
+        Epicureis. Sed ad rem redeamus; de hominibus dici non modo.
+      </p>
+      <p>
+        Civitatis, P. Scaevolam M'.que Manilium, ab iisque vitiis, quae paulo ante collegi, abest plurimum et, cum
+        stultorum vitam cum sua comparat, magna afficitur voluptate. Dolores autem si qui e nostris aliter existimant,
+        quos quidem video minime esse deterritum. Quae cum dixisset, Explicavi, inquit, sententiam meam, et eo quidem
+        consilio, tuum iudicium ut.
+      </p>
+      <h3>2. Subsection</h3>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus,
+        <em>fieri tamen</em> permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.
+        Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique
+        non possit.
+      </p>
+      <p>
+        <a href="">Verborum vis et natura orationis</a> et
+        <a href="">consequentium repugnantiumve ratio potest perspici</a>. Omnium autem rerum natura perspecta erit,
+        nullo modo sine amicitia firmam et perpetuam iucunditatem vitae tenere possumus neque vero ipsam amicitiam
+        tueri, nisi aeque.
+      </p>
+      <div class="quote">
+        <blockquote cite="">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magnam aliquam quaerat voluptatem. Ut enim aeque doleamus.
+        </blockquote>
+        <p>John Doe, <cite>Foo Bar</cite></p>
+      </div>
+      <p>
+        Laborum perfunctio neque <b>perpessio dolorum</b> per se esse expetendam et dolorem ipsum per se esse fugiendum.
+        Itaque aiunt hanc quasi naturalem atque insitam in animis inclusae inter se reprehensiones non sunt
+        vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces
+        indignae philosophia mihi.
+      </p>
+      <h2>B. Section</h2>
+      <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>
+      <pre><code>package main
 
 import "fmt"
 
 func main() {
     fmt.Printf("Hey %s!", "you")
 }</code></pre>
-        <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>
+      <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>
     <footer>
-        <p>&copy; 2025 - Anhgelus Morthuuzh</p>
-        <p>«&thinsp;Une citation&thinsp;»</p>
-        <p><a href="">Mentions légales</a></p>
+      <p>&copy; 2025 - Anhgelus Morthuuzh</p>
+      <p>«&thinsp;Une citation&thinsp;»</p>
+      <p><a href="">Mentions légales</a></p>
     </footer>
-</body>
+  </body>
 </html>
diff --git a/design/reset.css b/design/reset.css
index af94440..45a05ec 100644
--- a/design/reset.css
+++ b/design/reset.css
@@ -3,46 +3,127 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
 }
-ol, ul {
-	list-style: none;
+ol,
+ul {
+  list-style: none;
 }
-blockquote, q {
-	quotes: none;
+blockquote,
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-\ No newline at end of file
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/design/styles.css b/design/styles.css
index 6b0e1fb..398605a 100644
--- a/design/styles.css
+++ b/design/styles.css
@@ -1,251 +1,258 @@
 :root {
-    --color-dark: hsl(202, 25%, 9%);
-    --color-light: #EFF7F6;
-    --color-gray: #BCB3BB; /* quote and legend */
-    --color-rose: #F2B5D4; /* link accent */
-    --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */
+  --color-dark: hsl(202, 25%, 9%);
+  --color-light: #eff7f6;
+  --color-gray: #bcb3bb; /* quote and legend */
+  --color-rose: #f2b5d4; /* link accent */
+  --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */
 
-    --font-size-tiny: 0.85rem; /* quote, legend, code */
+  --font-size-tiny: 0.85rem; /* quote, legend, code */
 
-    --width-content: 700px; /* main, article */
-    --width-deco: 900px; /* header, footer, large image */
-    --height-header: 8rem; /* header, footer, introduction */
+  --width-content: 700px; /* main, article */
+  --width-deco: 900px; /* header, footer, large image */
+  --height-header: 8rem; /* header, footer, introduction */
 
-    --margin-base: 1.5rem;
-    --margin-header: calc(var(--height-header) / 2);
+  --margin-base: 1.5rem;
+  --margin-header: calc(var(--height-header) / 2);
 
-    font-size: 20px;
+  font-size: 20px;
 }
 
 body {
-    font-family: Raveo, Inter, sans-serif;
+  font-family: Raveo, Inter, sans-serif;
 
-    background: var(--color-dark);
-    color: var(--color-light);
+  background: var(--color-dark);
+  color: var(--color-light);
 
-    padding: 2rem;
+  padding: 2rem;
 }
 
 body * {
-    line-height: 1.4em;
+  line-height: 1.4em;
 }
 
-main, article {
-    max-width: var(--width-content);
-    margin: 0 auto;
+main,
+article {
+  max-width: var(--width-content);
+  margin: 0 auto;
 }
 
-h1, h2, h3 {
-    font-weight: 500;
+h1,
+h2,
+h3 {
+  font-weight: 500;
 
-    margin-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 h1 {
-    font-size: 2rem;
-    font-weight: 600;
+  font-size: 2rem;
+  font-weight: 600;
 }
 
 h2 {
-    font-size: 1.66rem;
+  font-size: 1.66rem;
 
-    margin-top: calc(var(--margin-base) + 1rem);
+  margin-top: calc(var(--margin-base) + 1rem);
 }
 
 h3 {
-    font-size: 1.33rem;
+  font-size: 1.33rem;
 
-    margin-top: calc(var(--margin-base) + 0.5rem);
+  margin-top: calc(var(--margin-base) + 0.5rem);
 }
 
 p {
-    margin-bottom: var(--margin-base);
+  margin-bottom: var(--margin-base);
 }
 
 a {
-    color: var(--color-rose);
-    text-decoration: underline;
+  color: var(--color-rose);
+  text-decoration: underline;
 
-    &:hover {
-        background: var(--color-light-rose);
-    }
+  &:hover {
+    background: var(--color-light-rose);
+  }
 }
 
-em, cite {
-    font-style: italic;
+em,
+cite {
+  font-style: italic;
 }
 
 b {
-    background: var(--color-light-rose);
-    /* color: var(--color-dark); */
-    font-weight: 500;
+  background: var(--color-light-rose);
+  /* color: var(--color-dark); */
+  font-weight: 500;
 
-    padding: 0.05em 0.1em;
+  padding: 0.05em 0.1em;
 }
 
-ul, ol {
-    margin-top: -0.5rem;
-    margin-bottom: var(--margin-base - 0.5rem);
-    margin-left: 1rem;
+ul,
+ol {
+  margin-top: -0.5rem;
+  margin-bottom: var(--margin-base - 0.5rem);
+  margin-left: 1rem;
 
-    list-style-position: outside;
+  list-style-position: outside;
 }
 
 ul {
-    list-style-type: disc;
+  list-style-type: disc;
 }
 
 ol {
-    list-style-type: roman;
+  list-style-type: roman;
 }
 
 li {
-    margin-bottom: 0.25rem;
+  margin-bottom: 0.25rem;
 }
 
 .quote {
-    font-size: var(--font-size-tiny);
+  font-size: var(--font-size-tiny);
 }
 
 blockquote {
-    padding: 0.5rem 2rem;
-    margin-bottom: 0.25rem;
+  padding: 0.5rem 2rem;
+  margin-bottom: 0.25rem;
+
+  color: var(--color-gray);
 
-    color: var(--color-gray);
-    
-    border-left: var(--color-rose) solid 0.25em;
+  border-left: var(--color-rose) solid 0.25em;
 }
 
 figure {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.5rem;
-
-    text-align: center;
-
-    margin-bottom: var(--margin-base);
-
-    & a, img {
-        max-height: max(60vh, 400px);
-        max-width: 100%;
-        display: block;
-
-        &.large {
-            --max-width: var(--width-deco);
-            --width: min(calc(100vw - 4rem), var(--max-width));
-            margin-left: max(-15%, calc((100% - var(--width))/2));
-            width: var(--max-width);
-            max-width: var(--width);
-            max-height: none;
-        }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.5rem;
+
+  text-align: center;
+
+  margin-bottom: var(--margin-base);
+
+  & a,
+  img {
+    max-height: max(60vh, 400px);
+    max-width: 100%;
+    display: block;
+
+    &.large {
+      --max-width: var(--width-deco);
+      --width: min(calc(100vw - 4rem), var(--max-width));
+      margin-left: max(-15%, calc((100% - var(--width)) / 2));
+      width: var(--max-width);
+      max-width: var(--width);
+      max-height: none;
     }
+  }
 }
 
 figcaption {
-    font-size: var(--font-size-tiny);
+  font-size: var(--font-size-tiny);
 
-    color: var(--color-gray);
+  color: var(--color-gray);
 }
 
-code, pre {
-    background: rgba(0, 0, 0, 0.4);
+code,
+pre {
+  background: rgba(0, 0, 0, 0.4);
 }
 
 code {
-    padding: 0.05em 0.1em;
+  padding: 0.05em 0.1em;
 
-    font-family: monospace;
-    font-size: var(--font-size-tiny);
+  font-family: monospace;
+  font-size: var(--font-size-tiny);
 
-    color: var(--color-gray);
-    border: var(--color-light) 1px solid;
+  color: var(--color-gray);
+  border: var(--color-light) 1px solid;
 }
 
 pre {
-    border: var(--color-light) 2px solid;
+  border: var(--color-light) 2px solid;
 
-    margin: 0 -1rem var(--margin-base) -1rem;
-    padding: 0.5rem 1rem;
+  margin: 0 -1rem var(--margin-base) -1rem;
+  padding: 0.5rem 1rem;
 
-    & code {
-        padding: 0;
+  & code {
+    padding: 0;
 
-        background: none;
-        border: none;
-    }
+    background: none;
+    border: none;
+  }
 }
 
 header {
-    max-width: var(--width-deco);
-    height: var(--height-header);
+  max-width: var(--width-deco);
+  height: var(--height-header);
 
-    margin: 0 auto var(--margin-header) auto;
-    padding-bottom: 2rem;
+  margin: 0 auto var(--margin-header) auto;
+  padding-bottom: 2rem;
 
-    display: flex;
-    flex-direction: row;
-    gap: 2rem;
-
-    border-bottom: var(--color-light) 2px solid;
-
-    @media only screen and (max-width: 600px) {
-        flex-direction: column;
-        height: auto;
-        min-height: var(--height-header);
-        & img {
-            width: max(33%, 128px);
-            margin: 0 auto;
-        }
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+
+  border-bottom: var(--color-light) 2px solid;
+
+  @media only screen and (max-width: 600px) {
+    flex-direction: column;
+    height: auto;
+    min-height: var(--height-header);
+    & img {
+      width: max(33%, 128px);
+      margin: 0 auto;
     }
+  }
 
-    & nav {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+  & nav {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 
-        & a {
-            display: block;
+    & a {
+      display: block;
 
-            min-width: 8rem;
+      min-width: 8rem;
 
-            font-family: monospace;
-        }
+      font-family: monospace;
     }
+  }
 }
 
 footer {
-    max-width: var(--width-deco);
-    height: var(--height-header);
+  max-width: var(--width-deco);
+  height: var(--height-header);
 
-    margin: var(--margin-header) auto 0 auto;
-    padding-top: 2rem;
+  margin: var(--margin-header) auto 0 auto;
+  padding-top: 2rem;
 
-    border-top: var(--color-light) 2px solid;
+  border-top: var(--color-light) 2px solid;
 
-    font-size: var(--font-size-tiny);
+  font-size: var(--font-size-tiny);
 }
 
 .introduction {
-    margin: var(--margin-header) 0;
+  margin: var(--margin-header) 0;
 }
 
 article article {
-    margin-bottom: var(--margin-header);
-    &:last-child {
-        margin-bottom: 0;
-    }
+  margin-bottom: var(--margin-header);
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .pagination {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: var(--margin-base);
-
-    & p {
-        margin-bottom: 0;
-    }
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: var(--margin-base);
+
+  & p {
+    margin-bottom: 0;
+  }
 }
author	Anhgelus Morhtuuzh <william@herges.fr>	2025-10-06 19:22:14 +0200
committer	Anhgelus Morhtuuzh <william@herges.fr>	2025-10-06 19:22:14 +0200
commit	9cfcbabb032c729b06d581412a64a9e7cefed6b1 (patch)
tree	e5ff64ed658ef1af98d53191a252c0d0c7e1c7f5 /design
parent	412a77b7c1ba1819f4bf1c0697ddd19d7af21e19 (diff)