frontend stuff

public/s/css/f0ck.css

@@ -37,6 +37,7 @@ html[theme='f0ck'] {
   --badge-nsfw: #a72828;
   --badge-tag: #6c6c6c;
   --scrollbar-color: #2b2b2b;
+  --scroller-bg: #424242;
 }
 
 html[theme='p1nk'] {
@@ -71,6 +72,7 @@ html[theme='p1nk'] {
   --metadata-bg: #0d0d0d;
   --posts-meta-bg: #000000b8;
   --scrollbar-color: #2b2b2b;
+  --scroller-bg: #424242;
 }
 
 html[theme='orange'] {
@@ -105,6 +107,7 @@ html[theme='orange'] {
   --badge-nsfw: #a72828;
   --badge-tag: #6c6c6c;
   --scrollbar-color: #2b2b2b;
+  --scroller-bg: #424242;
 }
 
 html[theme='amoled'] {
@@ -140,6 +143,7 @@ html[theme='amoled'] {
   --badge-nsfw: #a72828;
   --badge-tag: #6c6c6c;
   --scrollbar-color: #1d1c1c;
+  --scroller-bg: #424242;
 }
 
 html[theme="paper"] {
@@ -175,6 +179,7 @@ html[theme="paper"] {
   --badge-nsfw: #a72828;
   --badge-tag: #6c6c6c;
   --scrollbar-color: #6c6c6c;
+  --scroller-bg: #424242;
 }
 
 html[theme="paper"] body {
@@ -356,7 +361,7 @@ h5 {
 
 div#posts {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
   justify-items: center;
   grid-gap: 5px;
   margin: 0;
@@ -425,6 +430,7 @@ div#posts > a:hover::after {
   flex-wrap: wrap;
   justify-content: space-between;
   border-bottom: 1px solid var(--nav-border-color);
+  transition: .5s ease-in-out;
 }
 
 .navbar-brand {
@@ -526,7 +532,7 @@ span.f0ck {
 
 @media (max-width: 768px) {
   .nav-link[data-toggle="dropdown"]::after {
-    content: "\00a0\25bc";
+    content: "" !important;
   }
 }
 
@@ -1190,3 +1196,12 @@ div#posts > a[data-mode="nsfw"] > p:before {
 div#posts > a[data-mode="null"] > p:before {
   background-color: #dcd512;
 }
+
+div#footbar {
+  width: 100%;
+  background-color: var(--nav-bg);
+  color: #f00;
+  margin-top: -30px;
+  transition: .5s ease-in-out;
+  user-select: none;
+}