make usercard sticky on post
This commit is contained in:
		@@ -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,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 "" %>>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user