From faedadd40b7bdcabaa621b6d99e0d19e3722d8eb Mon Sep 17 00:00:00 2001 From: MattTheTekie Date: Sat, 28 Mar 2026 17:27:08 -0400 Subject: [PATCH] chore: fixes --- css/global.css | 76 +++++++++++++++----------------------------------- 1 file changed, 22 insertions(+), 54 deletions(-) diff --git a/css/global.css b/css/global.css index 156d305..1c10849 100644 --- a/css/global.css +++ b/css/global.css @@ -817,73 +817,41 @@ a:hover { } +:root { + /* scale based on 1920 reference */ + --scale: clamp(0.6, 100vw / 1920, 2); +} + +/* ========================= + * BASE BANNERS + = *======================== */ .left_banner, .right_banner { position: fixed; - width: 383px; - height: 626px; + width: calc(383px * var(--scale)); + height: calc(626px * var(--scale)); - background-image: url("https://www.veltron.net/images/dragon.png"); background-size: contain; background-position: center; background-repeat: no-repeat; animation: float 6s ease-in-out infinite; z-index: 94; + pointer-events: none; +} + +/* images */ +.left_banner { + background-image: url("https://www.veltron.net/images/dragon.png"); + + top: calc(250px * var(--scale)); + left: calc(40px * var(--scale)); } -/* right image */ .right_banner { background-image: url("https://www.veltron.net/images/digimon.png"); -} - -/* ========================= - * 1920–3K (normal size) - = *======================== */ -@media (min-width: 1870px) and (max-width: 3000px) { - .left_banner { - top: 250px; - left: 40px; - width: 383px; - height: 626px; - } - - .right_banner { - top: 150px; - right: 40px; - width: 383px; - height: 626px; - } -} - -/* ========================= - * 4K SCALE UP - = *======================== */ -@media (min-width: 3000px) { - .left_banner, - .right_banner { - width: 520px; - height: 850px; - } - - .left_banner { - top: 300px; - left: 80px; - } - - .right_banner { - top: 200px; - right: 80px; - } -} - -/* ========================= - * BELOW 1870 HIDE - = *======================== */ -@media (max-width: 1869px) { - .left_banner, - .right_banner { - display: none !important; - } + + top: calc(150px * var(--scale)); + right: calc(40px * var(--scale)); }