make usercard sticky on post
This commit is contained in:
parent
3b7a7db0ca
commit
2bf5f4faa3
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -6,6 +6,7 @@
|
||||
%>
|
||||
<div class="<%= pc %>" id="post-<%= post.id %>">
|
||||
<div class="usercard">
|
||||
<div class="usercard-inner">
|
||||
<a href="<%= url_for("user", {username = post.username}) %>" style="display: contents;">
|
||||
<img src="<%= post.avatar_path %>" class="avatar">
|
||||
</a>
|
||||
@ -14,6 +15,7 @@
|
||||
<em class="user-status"><%= post.status %></em>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-content-container"<%= is_latest and 'id=latest-post' or "" %>>
|
||||
<div class="post-info">
|
||||
|
Loading…
Reference in New Issue
Block a user