#posts -> .posts

public/s/css/f0ck.css

@@ -312,7 +312,7 @@ html[theme="paper"] .about a:hover {
   text-decoration: underline;
 }
 
-html[theme="paper"] div#posts > a::after {
+html[theme="paper"] div.posts > a::after {
   color: var(--white);
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
@@ -328,7 +328,7 @@ html[theme="paper"] .v0ck_player_controls > input[type="range"][name="volume"]::
   box-shadow: -100vw 0 0 100vw var(--white);
 }
 
-html[theme="paper"] div#posts > a {
+html[theme="paper"] div.posts > a {
   box-shadow: 1px 1px 1px black;
   border-radius: 5px;
 }
@@ -702,7 +702,7 @@ html[theme="f0ck95"] .err {
   background: #3f9595;
 }
 
-html[theme="f0ck95"] div#posts > a::after {
+html[theme="f0ck95"] div.posts > a::after {
   color: var(--white);
 }
 
@@ -791,7 +791,7 @@ html[theme="f0ck95"] .gapRight {
 
 html[theme="f0ck95"] .populateME {
   position: relative;
-  left: 5px;
+  left: 10px;
 }
 
 /* f0ck95dARK */
@@ -953,7 +953,7 @@ html[theme="f0ck95d"] .err {
   background: #3f9595;
 }
 
-html[theme="f0ck95d"] div#posts > a::after {
+html[theme="f0ck95d"] div.posts > a::after {
   color: var(--white);
 }
 
@@ -1056,7 +1056,7 @@ h5 {
   margin-right: 0.5rem !important;
 }
 
-div#posts {
+div.posts {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
   justify-items: center;
@@ -1068,12 +1068,12 @@ div#posts {
 }
 
 @media (max-width: 376px) {
-  div#posts {
+  div.posts {
     grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
   }
 }
 
-div#posts > a {
+div.posts > a {
   display: inline-block;
   position: relative;
   width: 100%;
@@ -1081,17 +1081,17 @@ div#posts > a {
   background-size: cover;
   background-position: center;
 }
-div#posts > a::before {
+div.posts > a::before {
   content: "";
   display: block;
   margin-top: 100%;
 }
-div#posts > a:hover {
+div.posts > a:hover {
   opacity: 0.8;
   box-shadow: 0 0 0 2px var(--accent);
 }
 
-div#posts > a::after {
+div.posts > a::after {
   position: absolute;
   right: 0;
   top: 0;
@@ -1106,7 +1106,7 @@ div#posts > a::after {
   font-family: vcr;
   text-transform: uppercase;
 }
-div#posts > a:hover::after {
+div.posts > a:hover::after {
   visibility: visible;
 }
 
@@ -2057,14 +2057,14 @@ div#flash.warn {
 }
 
 /* sfw/nsfw indexpage */
-div#posts > a > p {
+div.posts > a > p {
   height: 100%;
   width: 100%;
   /* possible fix for weird padding */
   position: absolute;
   bottom: calc(0px - 12px);
 }
-div#posts > a > p:before {
+div.posts > a > p:before {
   content: "";
   position: absolute;
   right: 0;
@@ -2072,13 +2072,13 @@ div#posts > a > p:before {
   height: 10px;
   width: 10px;
 }
-div#posts > a[data-mode="sfw"] > p:before {
+div.posts > a[data-mode="sfw"] > p:before {
   background-color: #5cb85c;
 }
-div#posts > a[data-mode="nsfw"] > p:before {
+div.posts > a[data-mode="nsfw"] > p:before {
   background-color: #a72828;
 }
-div#posts > a[data-mode="null"] > p:before {
+div.posts > a[data-mode="null"] > p:before {
   background-color: #dcd512; /* untagged */
 }
 

public/s/js/f0ck.js

@@ -66,7 +66,7 @@
   // <scroller>
   let tts = 0;
   const scroll_treshold = 1;
-  if(document.querySelector("div#posts")) {
+  if(document.querySelector("div.posts")) {
     document.addEventListener("wheel", e => {
       if(Math.ceil(window.innerHeight + window.scrollY) >= document.body.offsetHeight && e.deltaY > 0) { // down
         if(elem = document.querySelector(".pagination > .next:not(.disabled)")) {
@@ -152,10 +152,10 @@
     }
     else {
       if(Math.abs(swipeRT.yDiff) > swipeOpt.treshold && timeDiff < swipeOpt.timeout) {
-        if(navbar = document.querySelector("nav.navbar") && document.querySelector("div#posts")) {
+        if(navbar = document.querySelector("nav.navbar") && document.querySelector("div.posts")) {
           if(swipeRT.yDiff > 0 && (window.innerHeight + window.scrollY) >= document.body.offsetHeight) // up
             elem = document.querySelector(".pagination > .next:not(.disabled)");
-          else if(swipeRT.yDiff <= 0 && window.scrollY <= 0 && document.querySelector("div#posts")) // down
+          else if(swipeRT.yDiff <= 0 && window.scrollY <= 0 && document.querySelector("div.posts")) // down
             elem = document.querySelector(".pagination > .prev:not(.disabled)");
         }
       }

views/index.html

@@ -2,7 +2,7 @@
   <div class="index-container">
     @if(tmp.user)<h2>user: {!! tmp.user.toLowerCase() !!}@if(tmp.mime) ({{ tmp.mime }}s)@else (all)@endif</h2>@endif
     @if(tmp.tag)<h2>tag: @if(session)<a href="/search?tag={!! tmp.tag.toLowerCase() !!}" target="_blank">{!! tmp.tag.toLowerCase() !!}</a>@else{!! tmp.tag.toLowerCase() !!}@endif@if(tmp.mime) ({{ tmp.mime }}s)@else (all)@endif</h2>@endif
-    <div id="posts">
+    <div class="posts">
       @each(items as item)
       <a href="{{ link.main }}{{ item.id }}" data-mime="{{ item.mime }}" data-mode="{{ item.tag_id ? ['','sfw','nsfw'][item.tag_id] : 'null' }}" style="background-image: url('/t/{{ item.id }}.webp')"><p></p></a>
       @endeach