#posts -> .posts

This commit is contained in:
Flummi 2022-05-18 12:07:07 +00:00
parent e159776e9b
commit 881d44158e
3 changed files with 21 additions and 21 deletions

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<div class="index-container"> <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.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 @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) @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> <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 @endeach