From 4eea41efbc5309166a57802fcf326ffac6014d71 Mon Sep 17 00:00:00 2001
From: Lewis Dale <lewis.dale@fortacode.co.uk>
Date: Sat, 25 Feb 2023 21:54:49 +0000
Subject: [PATCH] Use basic sidebar composition for post comments

---
 src/_includes/post.njk           |  4 ++--
 src/css/compositions/sidebar.css | 10 ++++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 src/css/compositions/sidebar.css

diff --git a/src/_includes/post.njk b/src/_includes/post.njk
index dce32a5..0d27787 100644
--- a/src/_includes/post.njk
+++ b/src/_includes/post.njk
@@ -51,11 +51,11 @@ eleventyComputed:
             <ol class="stack-md">
                 {% for reply in post.comments.reply | reverse %}
 
-                <li class="row items-center justify-between">
+                <li class="sidebar items-center justify-between">
                     <a href="{{ like.author.url }}" class="self-start" rel="noreferrer" target="_blank">
                         <img src="{{ reply.author.avatars["96"] }}" alt="{{ reply.author.name }}" class="max-w-[4rem] box" />
                     </a>
-                    <div class="stack-2xs max-w-[50ch]">
+                    <div class="stack-2xs basis-[50ch]">
                         {% set date = reply.date | parseDate %}
                         <h4>{{ reply.author.name }} <span class="font-normal">on</span> {{ date | dateDisplay }} <span class="font-normal">at</span> {{ date | timeDisplay }}</h4>
                         <a href="{{ reply.canonical }}" rel="noreferrer" target="_blank">Original comment</a>
diff --git a/src/css/compositions/sidebar.css b/src/css/compositions/sidebar.css
new file mode 100644
index 0000000..622ec55
--- /dev/null
+++ b/src/css/compositions/sidebar.css
@@ -0,0 +1,10 @@
+.sidebar {
+	display: flex;
+	gap: var(--vertical-spacing, 1rem);
+	flex-wrap: wrap;
+
+	> * {
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+}
\ No newline at end of file