From 98bb6a6c189519b02b86de8f3ce52cdb8813cfe7 Mon Sep 17 00:00:00 2001
From: Anhgelus Morhtuuzh <william@herges.fr>
Date: Mon, 29 Sep 2025 22:43:43 +0200
Subject: feat(design): base code and pre

---
 design/index.html |  9 ++++++++-
 design/style.css  | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

(limited to 'design')

diff --git a/design/index.html b/design/index.html
index 313544f..e43ec28 100644
--- a/design/index.html
+++ b/design/index.html
@@ -19,7 +19,7 @@
         </figure>
         <h2>A. Section</h2>
         <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 <em>tamen</em> permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. <a href="">Quod idem licet transferre</a>.
+            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">
@@ -57,6 +57,13 @@
             <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>
diff --git a/design/style.css b/design/style.css
index 73eed40..c2dd3f5 100644
--- a/design/style.css
+++ b/design/style.css
@@ -5,7 +5,7 @@
     --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 */
+    --font-size-tiny: 0.85rem; /* quote, legend, code */
 
     font-size: 20px;
 }
@@ -136,3 +136,33 @@ figcaption {
     color: var(--color-gray);
 }
 
+code, pre {
+    background: rgba(0, 0, 0, 0.4);
+}
+
+code {
+    padding: 0.05em 0.1em;
+
+    font-family: monospace;
+    font-size: var(--font-size-tiny);
+
+    color: var(--color-gray);
+    border: var(--color-light) 1px solid;
+}
+
+pre {
+    border: var(--color-light) 2px solid;
+
+    margin-bottom: 1.5rem;
+    padding: 0.5rem 1rem;
+    margin-left: -1rem;
+    margin-right: -1rem;
+
+    & code {
+        padding: 0;
+
+        background: none;
+        border: none;
+    }
+}
+
-- 
cgit v1.2.3