chore: fixes

This commit is contained in:
MattTheTekie 2026-03-28 16:59:44 -04:00
commit 46d1beb78c

View file

@ -827,25 +827,21 @@ position: relative;
}
/* =========================
* 2. SCALE SYSTEM (1920 LOCKED)
* - 1920 = 1
* - smaller screens = <1
* - larger screens = >1
* 2. SCALE (1920 baseline)
= *======================== */
:root {
--scale: clamp(0.6, calc(100vw / 1920), 1.4);
--scale: clamp(0.65, calc(100vw / 1920), 1.25);
}
/* =========================
* 3. Base banners
* 3. BASE BANNER STYLE
* (IMPORTANT: split transforms properly)
= *======================== */
.left_banner,
.right_banner {
position: fixed;
top: 50%;
transform: translateY(-50%);
/* IMPORTANT: base size = your original design */
width: calc(320px * var(--scale));
aspect-ratio: 383 / 626;
@ -853,28 +849,30 @@ position: relative;
background-position: center;
background-repeat: no-repeat;
animation: float 6s ease-in-out infinite;
z-index: 94;
pointer-events: none;
/* ONLY vertical centering here */
transform: translateY(-50%);
animation: float 6s ease-in-out infinite;
}
/* =========================
* 4. Positioning (NO scaling math here)
* This keeps them EXACTLY where they started
* 4. SAFE POSITIONING (NO NEGATIVE PUSHING)
= *======================== */
.left_banner {
left: calc((100vw - 980px) / 2 - 360px);
left: max(10px, calc((100vw - 980px) / 2 - 260px));
background-image: url("https://www.veltron.net/images/dragon.png");
}
.right_banner {
right: calc((100vw - 980px) / 2 - 360px);
right: max(10px, calc((100vw - 980px) / 2 - 260px));
background-image: url("https://www.veltron.net/images/digimon.png");
}
/* =========================
* 5. Float animation (FIXED transform layering)
* 5. FLOAT (DO NOT overwrite main transform)
= *======================== */
@keyframes float {
0% {
@ -889,7 +887,7 @@ position: relative;
}
/* =========================
* 6. Tablet safety
* 6. TABLET FIX
= *======================== */
@media (max-width: 1100px) {
.left_banner,
@ -908,7 +906,7 @@ position: relative;
}
/* =========================
* 7. Mobile hide
* 7. MOBILE HIDE
= *======================== */
@media (max-width: 900px) {
.decor.left_banner,