From 1e5ce2b7941341213aacfdd45f884af8ca0aef8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=A9ra?= <contact@citorva.fr>
Date: Wed, 8 Jul 2026 16:48:35 +0200
Subject: [PATCH] Preparing development of comment section

---
 article.html     | 18 ++++++++++++++++++
 css/article.css  |  8 ++++++++
 css/comments.css | 27 +++++++++++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 css/comments.css

diff --git a/article.html b/article.html
index f89c975..2d0f00a 100644
--- a/article.html
+++ b/article.html
@@ -602,6 +602,24 @@
                     Cet article a été rédigé par <a href="/profile/citorva.fr">Joe Doe</a> et distribué sous license <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons CC-BY-SA</a>
                 </footer>
             </article>
+
+            <section id="comments">
+                <h1>Commentaires</h1>
+
+                <form id="comment-editor">
+                    <textarea name="comment"></textarea>
+
+                    <div id="actions">
+                        <div id="remain-character-counter">
+                            <data>200</data>
+                            <label>characters left</label>
+                        </div>
+
+                        <button type="submit">Send comment</button>
+                    </div>
+                </form>
+            </section>
+
             <script src="scripts/toc.js"></script>
         </main>
         <footer>
diff --git a/css/article.css b/css/article.css
index c1349a5..058401e 100644
--- a/css/article.css
+++ b/css/article.css
@@ -1,6 +1,7 @@
 @import url("style.css");
 @import url("code.css");
 @import url("illustration.css");
+@import url("comments.css");
 
 article {
     flex: 1;
@@ -67,6 +68,9 @@ article {
 }
 
 main {
+    display: grid;
+    grid-template-columns: auto 1fr;
+
     & > nav#toc {
         menu {
             position: sticky;
@@ -171,4 +175,8 @@ main {
             visibility: hidden;
         }
     }
+
+    & > section#comments {
+        grid-column: 2;
+    }
 }
diff --git a/css/comments.css b/css/comments.css
new file mode 100644
index 0000000..a55afaf
--- /dev/null
+++ b/css/comments.css
@@ -0,0 +1,27 @@
+section#comments {
+    textarea {
+        width: 100%;
+        resize: vertical;
+        min-height: 5lh;
+        box-sizing: border-box;
+
+        background-color: transparent;
+        color: var(--foreground-color);
+        font-family: var(--font-content);
+        font-size: 1rem;
+        border: solid 1px var(--foreground-color);
+        outline: none;
+    }
+
+    #actions {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+
+        margin-top: 8px;
+    }
+
+    button {
+        margin: 0;
+    }
+}
-- 
knotmirror 0.0.1