feat(design): base image

3 files changed, 33 insertions, 1 deletions

diff --git a/README.md b/README.md
index 65a0d8e..32fe710 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ It aims to be simple, minimalist, brutalist, indie, and personnal.
 ## How it works
 
 Backend written in modern Go.
+[gomarkdown/markdown](https://github.com/gomarkdown/markdown) looks like to be a good library.
 
 Light CSS, light JS, runs everywhere.
 SSR first.
diff --git a/design/index.html b/design/index.html
index e98661a..3086a33 100644
--- a/design/index.html
+++ b/design/index.html
@@ -13,10 +13,18 @@
         <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="larger">
+            <figcaption>A placeholder large image.</figcaption>
+        </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>.
         </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.
diff --git a/design/style.css b/design/style.css
index d0b8c02..e8823cd 100644
--- a/design/style.css
+++ b/design/style.css
@@ -1,6 +1,6 @@
 :root {
     --color-dark: #04151F;
-    --color-gray: #BCB3BB; /* quote */
+    --color-gray: #BCB3BB; /* quote and legend */
     --color-light: #EFF7F6;
     --color-rose: #F2B5D4; /* link accent */
     --color-light-rose: #F6CBE1; /* link accent hover */
@@ -85,3 +85,26 @@ blockquote {
     border-left: var(--color-rose) solid 0.25em;
 }
 
+figure {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    gap: 0.5rem;
+
+    & img {
+        width: auto;
+        max-height: 60vh;
+        &.larger {
+            width: 120%;
+            margin-left: -10%;
+            max-height: none;
+        }
+    }
+}
+
+figcaption {
+    font-size: 0.85rem;
+    color: var(--color-gray);
+}
+