chore: fixes
This commit is contained in:
parent
0df971d26c
commit
46d1beb78c
1 changed files with 15 additions and 17 deletions
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue