SxyPrn UI Update Video Layout

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 });
    }
})();