chore: fixes

This commit is contained in:
MattTheTekie 2026-03-28 17:00:35 -04:00
commit 01f0ce7885

View file

@ -819,98 +819,38 @@ a:hover {
/* ========================= .left_banner {
* 1. Layout anchor
= *======================== */
#websiteContainer {
position: relative;
}
/* =========================
* 2. SCALE (1920 baseline)
= *======================== */
:root {
--scale: clamp(0.65, calc(100vw / 1920), 1.25);
}
/* =========================
* 3. BASE BANNER STYLE
* (IMPORTANT: split transforms properly)
= *======================== */
.left_banner,
.right_banner {
position: fixed; position: fixed;
top: 50%; top: 250px;
left: 40px;
width: calc(320px * var(--scale)); width: clamp(180px, 20vw, 383px);
height: auto;
aspect-ratio: 383 / 626; aspect-ratio: 383 / 626;
background-image: url("https://www.veltron.net/images/dragon.png");
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 94;
pointer-events: none;
/* ONLY vertical centering here */
transform: translateY(-50%);
animation: float 6s ease-in-out infinite; animation: float 6s ease-in-out infinite;
} z-index: 94;
/* =========================
* 4. SAFE POSITIONING (NO NEGATIVE PUSHING)
= *======================== */
.left_banner {
left: max(10px, calc((100vw - 980px) / 2 - 260px));
background-image: url("https://www.veltron.net/images/dragon.png");
} }
.right_banner { .right_banner {
right: max(10px, calc((100vw - 980px) / 2 - 260px)); position: fixed;
top: 150px;
right: 40px;
width: clamp(180px, 20vw, 383px);
height: auto;
aspect-ratio: 383 / 626;
background-image: url("https://www.veltron.net/images/digimon.png"); background-image: url("https://www.veltron.net/images/digimon.png");
} background-size: contain;
background-position: center;
/* ========================= background-repeat: no-repeat;
* 5. FLOAT (DO NOT overwrite main transform)
= *======================== */ animation: float 6s ease-in-out infinite;
@keyframes float { z-index: 94;
0% {
transform: translateY(-50%) translateY(0px);
}
50% {
transform: translateY(-50%) translateY(-12px);
}
100% {
transform: translateY(-50%) translateY(0px);
}
}
/* =========================
* 6. TABLET FIX
= *======================== */
@media (max-width: 1100px) {
.left_banner,
.right_banner {
width: 220px;
opacity: 0.75;
}
.left_banner {
left: 10px;
}
.right_banner {
right: 10px;
}
}
/* =========================
* 7. MOBILE HIDE
= *======================== */
@media (max-width: 900px) {
.decor.left_banner,
.decor.right_banner {
display: none !important;
}
} }