make usercard sticky on post

This commit is contained in:
Lera Elvoé 2025-06-05 00:37:05 +03:00
parent 3b7a7db0ca
commit 2bf5f4faa3
Signed by: yagich
SSH Key Fingerprint: SHA256:6xjGb6uA7lAVcULa7byPEN//rQ0wPoG+UzYVMfZnbvc
3 changed files with 27 additions and 15 deletions

View File

@ -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 {

View File

@ -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 {

View File

@ -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 "" %>>