thread page mostly finished

data/static/css/style.css

@@ -109,7 +109,7 @@ button, .linkbutton, input[type="submit"] {
   box-shadow: inset 0px 2px 5px 3px var(--inset-color);
   color: var(--font-color);
   text-decoration: none;
-  cursor: default;
+  user-select: none;
 
   line-height: normal;
   display: inline flex;
@@ -142,13 +142,14 @@ button, .linkbutton, input[type="submit"] {
     background: linear-gradient(var(--top-color) 0%, var(--top-color2) 25%, var(--hover-color) 26%, var(--hover-color) 80%, var(--bottom-color) 100%);
   }
 
-  &:is(:active, .active) {
+  &:is(:active, .active, [aria-selected='true']) {
     background: linear-gradient(var(--active-color) 0%, var(--active-color) 50%, var(--main-color) 100%);
   }
 
   &:disabled {
     background: var(--disabled-color);
     --inset-color: #fff3;
+    cursor: not-allowed;
   }
 }
 
@@ -158,7 +159,7 @@ button, .linkbutton, input[type="submit"] {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 
-  &.active {
+  &[aria-selected='true'] {
     padding-top: calc(var(--base-padding) * 1.5);
   }
 }
@@ -455,6 +456,7 @@ footer {
   flex-wrap: wrap;
   gap: var(--base-padding);
   width: fit-content;
+  justify-content: center;
 }
 
 .actions-group {
@@ -502,9 +504,20 @@ footer {
   grid-template-rows: min-content 1fr min-content;
   &> * {
     min-width: 0;
+    min-height: 54px;
   }
 }
 
+.post-signature {
+  margin-top: auto;
+  border-top: 2px dotted gray;
+}
+
+.post-content-inner {
+  display: flex;
+  flex-direction: column;
+}
+
 .badge-button {
   min-width: 88px;
   min-height: 31px;
@@ -577,6 +590,7 @@ footer {
   color: var(--font-color-anti);
   padding: var(--base-padding);
   border-radius: var(--border-radius);
+  display: inline-block;
 }
 
 .babycode-big {
@@ -635,11 +649,44 @@ summary {
   cursor: pointer;
 }
 
+p {
+  margin: 0.5em 0;
+}
+
+ul, ol {
+  margin: 0.5em 0;
+  padding-left: 2em;
+}
+
+blockquote {
+  margin-left: 0.5em;
+}
+
 .emoji {
   max-width: 15px;
   max-height: 15px;
 }
 
+a.mention {
+  --mention-color: var(--bg-color-contrast);
+  --hover-color: hsl(from var(--mention-color) h calc(s * 0.7) calc(l * 1.1));
+
+  display: inline-block;
+  border-radius: var(--border-radius);
+  padding: var(--base-padding);
+  background-color: var(--mention-color);
+  color: black;
+  border: 1px dashed;
+
+  &:hover {
+    background-color: var(--hover-color);
+  }
+
+  &.me {
+    --mention-color: hsl(from var(--bg-color-contrast) calc(h + 90) s l);
+  }
+}
+
 @media (max-width: 768px) {
   #wrapper {
   margin-left: 0;
@@ -660,12 +707,15 @@ summary {
   }
 
   .avatar {
-    max-width: 40%;
-    max-height: 40%;
+    max-width: 180px;
+    max-height: 180px;
+    min-width: 140px;
+    min-height: 140px;
   }
 
   .usercard-inner {
     flex-direction: row;
+    justify-content: space-between;
   }
 
   .thread-title-counter {