chore: fixes
This commit is contained in:
parent
46d1beb78c
commit
01f0ce7885
1 changed files with 19 additions and 79 deletions
102
css/global.css
102
css/global.css
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue