chore: fixes

This commit is contained in:
MattTheTekie 2026-03-28 16:58:42 -04:00
commit 6fafe7a247

View file

@ -818,15 +818,23 @@ a:hover {
/* =========================
* 1. Layout Anchor
* 1. Layout anchor
= *======================== */
#websiteContainer {
position: relative;
}
/* =========================
* 2. Base Banner System
* 2. BASE SCALE SYSTEM (1920 reference)
= *======================== */
:root {
--banner-scale: calc(100vw / 1920);
}
/* =========================
* 3. Base banners
= *======================== */
.left_banner,
.right_banner {
@ -834,9 +842,12 @@ position: relative;
top: 50%;
transform: translateY(-50%);
width: clamp(140px, 12vw, 320px);
/* Base size at 1920px */
width: calc(320px * var(--banner-scale));
max-width: 380px;
min-width: 140px;
aspect-ratio: 383 / 626;
height: auto;
background-size: contain;
background-position: center;
@ -849,20 +860,20 @@ position: relative;
}
/* =========================
* 3. Positioning (980px layout-aware)
* 4. Positioning (also scaled from 1920 reference)
= *======================== */
.left_banner {
left: max(10px, calc((100vw - 980px) / 2 - 200px));
left: calc(((100vw - 980px) / 2) - (360px * var(--banner-scale)));
background-image: url("https://www.veltron.net/images/dragon.png");
}
.right_banner {
right: max(10px, calc((100vw - 980px) / 2 - 200px));
right: calc(((100vw - 980px) / 2) - (360px * var(--banner-scale)));
background-image: url("https://www.veltron.net/images/digimon.png");
}
/* =========================
* 4. Float Animation
* 5. Float animation
= *======================== */
@keyframes float {
0% {
@ -877,7 +888,7 @@ position: relative;
}
/* =========================
* 5. Tablet Optimization (1280×720, iPads)
* 6. Tablet safety fallback
= *======================== */
@media (max-width: 1100px) {
.left_banner,
@ -896,7 +907,7 @@ position: relative;
}
/* =========================
* 6. Mobile Hide (safe collapse)
* 7. Mobile hide
= *======================== */
@media (max-width: 900px) {
.decor.left_banner,
@ -904,12 +915,3 @@ position: relative;
display: none !important;
}
}
/* =========================
* 7. Extra Small Devices
= *======================== */
@media (max-width: 400px) {
.decor {
display: none !important;
}
}