From 2bf5f4faa34d229f44c5ed6beab12a0e9c57aaa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lera=20Elvo=C3=A9?= <yagich@poto.cafe>
Date: Thu, 5 Jun 2025 00:37:05 +0300
Subject: [PATCH] make usercard sticky on post

---
 data/static/style.css    | 13 +++++++++----
 sass/style.scss          | 13 +++++++++----
 views/threads/post.etlua | 16 +++++++++-------
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/data/static/style.css b/data/static/style.css
index e7431dd..1b3857f 100644
--- a/data/static/style.css
+++ b/data/static/style.css
@@ -102,15 +102,20 @@ body {
 
 .usercard {
   grid-area: usercard;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   padding: 20px 10px;
   border: 4px outset rgb(217.26, 220.38, 213.42);
   background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
   border-right: solid 2px;
 }
 
+.usercard-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 10px;
+  position: sticky;
+}
+
 .post-content-container {
   display: grid;
   grid-template-columns: 1fr;
@@ -248,7 +253,7 @@ blockquote {
   width: 90%;
   height: 90%;
   object-fit: contain;
-  padding-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .username-link {
diff --git a/sass/style.scss b/sass/style.scss
index 9740cf5..aa54ac4 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -144,15 +144,20 @@ body {
 
 .usercard {
   grid-area: usercard;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   padding: 20px 10px;
   border: 4px outset $light;
   background-color: $dark_bg;
   border-right: solid 2px;
 }
 
+.usercard-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 10px;
+  position: sticky;
+}
+
 .post-content-container {
   display: grid;
   grid-template-columns: 1fr;
@@ -297,7 +302,7 @@ blockquote {
   width: 90%;
   height: 90%;
   object-fit: contain;
-  padding-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .username-link {
diff --git a/views/threads/post.etlua b/views/threads/post.etlua
index 65aace9..0e1205b 100644
--- a/views/threads/post.etlua
+++ b/views/threads/post.etlua
@@ -6,13 +6,15 @@
   %>
 <div class="<%= pc %>" id="post-<%= post.id %>">
   <div class="usercard">
-    <a href="<%= url_for("user", {username = post.username}) %>" style="display: contents;">
-    <img src="<%= post.avatar_path %>" class="avatar">
-    </a>
-    <a href="<%= url_for("user", {username = post.username}) %>" class="username-link"><%= post.username %></a>
-    <% if post.status ~= "" then %>
-      <em class="user-status"><%= post.status %></em>
-    <% end %>
+    <div class="usercard-inner">
+      <a href="<%= url_for("user", {username = post.username}) %>" style="display: contents;">
+      <img src="<%= post.avatar_path %>" class="avatar">
+      </a>
+      <a href="<%= url_for("user", {username = post.username}) %>" class="username-link"><%= post.username %></a>
+      <% if post.status ~= "" then %>
+        <em class="user-status"><%= post.status %></em>
+      <% end %>
+    </div>
   </div>
 
   <div class="post-content-container"<%= is_latest and 'id=latest-post' or "" %>>