Well utilised screen
// ==UserScript==
// @name SxyPrn UI Update Video Layout
// @namespace http://tampermonkey.net/
// @version 1.0
// @icon https://www.google.com/s2/favicons?sz=64&domain=sxyprn.com
// @description Well utilised screen
// @author 6969RandomGuy6969
// @match https://sxyprn.com/*
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Skip certain pages
if (["/post/", "/community/", "/blog/"].some(path => location.pathname.startsWith(path))) return;
GM_addStyle(`
:root {
--bg-color: #181a1f;
--text-color: #e0e0e0;
--card-bg: #1f2129;
--shadow: rgba(0,0,0,0.4);
--shadow-hover: rgba(0,0,0,0.6);
--highlight: #ff3c5a;
--title-color: #f1f1f1;
--meta-color: #999;
--font: "Inter", "Segoe UI", Roboto, sans-serif;
--min-width-small: 180px;
--max-width-small: 280px;
--card-width: clamp(var(--min-width-small), 16vw, var(--max-width-small));
}
body {
background: var(--bg-color) !important;
color: var(--text-color);
font-family: var(--font) !important;
margin: 0;
padding: 0;
}
/* Flex layout and container styling */
#wrapper_div, .container, body > div {
display: flex !important;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
padding: 15px;
box-sizing: border-box;
}
.post_el_small {
display: inline-block;
position: relative;
width: var(--card-width);
margin: 4px;
background: var(--card-bg);
/* Removed rounded corners */
overflow: hidden;
box-shadow: 0 4px 18px var(--shadow);
cursor: pointer;
text-align: left;
aspect-ratio: 4 / 3;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.post_el_small:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px var(--shadow-hover);
}
.post_el_small img {
width: 100%;
height: 70%;
object-fit: cover;
/* Removed rounded corners */
transition: transform 0.3s ease;
}
.post_el_small:hover img {
transform: scale(1.05);
}
.post_el_small .title {
padding: 8px 12px;
color: var(--title-color);
font-size: 14px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post_el_small .meta {
padding: 0 12px 10px;
color: var(--meta-color);
font-size: 12px;
}
.post_el_small .badge {
position: absolute;
bottom: 10px;
right: 10px;
background: var(--highlight);
color: #fff;
font-size: 11px;
padding: 3px 6px;
border-radius: 6px;
}
.post_el_small::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.post_el_small:hover::after {
opacity: 1;
}
/* Responsive Media Queries */
@media (min-width: 1200px) {
.post_el_small {
width: clamp(180px, 16.5vw, 280px);
}
}
@media (min-width: 1500px) {
.post_el_small {
width: clamp(160px, 15vw, 260px);
}
}
@media (min-width: 1650px) {
.post_el_small {
width: clamp(150px, 14vw, 240px);
}
}
@media (min-width: 1800px) {
.post_el_small {
width: clamp(140px, 13vw, 220px);
}
}
/* Adjustments for Small Screens */
@media (max-width: 900px) {
.post_el_small {
width: 48%;
}
}
@media (max-width: 600px) {
.post_el_small {
width: 100%;
}
}
`);
// Make full card clickable
function makeCardsClickable() {
document.querySelectorAll('.post_el_small').forEach(card => {
if (!card.dataset.clickable) {
card.dataset.clickable = "true";
card.addEventListener('click', () => {
const link = card.querySelector('a');
if (link) window.location.href = link.href;
});
}
});
}
makeCardsClickable();
// Observe new posts (infinite scroll) - optimize by targeting a smaller container
const postsContainer = document.querySelector('.container'); // Assuming posts are within a container class
if (postsContainer) {
new MutationObserver(makeCardsClickable).observe(postsContainer, { childList: true, subtree: true });
}
})();