chore: fixes
This commit is contained in:
parent
578fc692ab
commit
6fafe7a247
1 changed files with 21 additions and 19 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue