gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-09-04 15:05:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: refine landing page responsive layout

Browse Source
This commit is contained in:
KoalaDev
2026-07-07 02:00:37 +02:00
parent 78efb04b6a
commit 07839a907b
1 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.css
+20 -10
View File
@@ -1382,11 +1382,13 @@ input:checked + .mock-slider:before {
@media (max-width: 900px) { @media (max-width: 900px) {
.features-grid { .features-grid {
grid-template-columns: repeat(2, 1fr); /* Keep the Why KoalaSync grid at either three columns or one column.
The two-column in-between makes compact cards stretch unevenly. */
grid-template-columns: 1fr;
gap: 1.25rem; gap: 1.25rem;
} }
.feature-card.bento-large { .feature-card.bento-large {
grid-column: span 2; grid-column: span 1;
padding: 2.5rem; padding: 2.5rem;
gap: 2rem; gap: 2rem;
} }
@@ -3633,11 +3635,20 @@ header[id] {
the extension popup is bottom-anchored inside this scene, so moving the whole the extension popup is bottom-anchored inside this scene, so moving the whole
wrapper destroys the vertical balance and leaves no breathing room below. */ wrapper destroys the vertical balance and leaves no breathing room below. */
.hero-demo-scene { .hero-demo-scene {
--demo-content-y: 0px;
position: relative; position: relative;
width: 100%; width: 100%;
height: max(calc(59cqw + 100px), 548px); height: max(calc(59cqw + 100px), 548px);
} }
@media (min-width: 1025px) {
.hero-demo-scene {
/* Balance the demo inside the visible hero area below the fixed navbar.
Shift the scene content, not the hero text or grid. */
--demo-content-y: 2.75rem;
}
}
/* While initializing, suppress all transitions so the popup can start closed /* While initializing, suppress all transitions so the popup can start closed
without a visible open->closed animation on page load. */ without a visible open->closed animation on page load. */
.hero-demo-scene.demo-no-anim, .hero-demo-scene.demo-no-anim,
@@ -3648,7 +3659,7 @@ header[id] {
/* Sync status chip: green "in sync" at rest, flashes the broadcast event */ /* Sync status chip: green "in sync" at rest, flashes the broadcast event */
.demo-sync-chip { .demo-sync-chip {
position: absolute; position: absolute;
top: 0; top: var(--demo-content-y);
left: 2px; left: 2px;
z-index: 8; z-index: 8;
display: inline-flex; display: inline-flex;
@@ -3720,7 +3731,7 @@ header[id] {
/* Card A = the foreground window at the top right ("your" browser, /* Card A = the foreground window at the top right ("your" browser,
hosts the extension icon in its toolbar) */ hosts the extension icon in its toolbar) */
.demo-tab-a { .demo-tab-a {
top: 49px; top: calc(49px + var(--demo-content-y));
right: -3%; right: -3%;
transform: rotate(1.2deg); transform: rotate(1.2deg);
transform-origin: top right; transform-origin: top right;
@@ -3736,7 +3747,7 @@ header[id] {
/* Card B = the friend's window, lower left, tucked behind */ /* Card B = the friend's window, lower left, tucked behind */
.demo-tab-b { .demo-tab-b {
top: 142px; top: 142px;
top: calc(20cqw + 67px); top: calc(20cqw + 67px + var(--demo-content-y));
left: -3%; left: -3%;
transform: rotate(-1.6deg); transform: rotate(-1.6deg);
transform-origin: top left; transform-origin: top left;
@@ -3751,7 +3762,7 @@ header[id] {
/* When the popup slides in from the right edge, the tabs step aside */ /* When the popup slides in from the right edge, the tabs step aside */
.hero-demo-scene.popup-open .demo-tab-a { .hero-demo-scene.popup-open .demo-tab-a {
top: 22px; top: calc(22px + var(--demo-content-y));
transform: rotate(1deg) translate(-44%, 20%) scale(0.88); transform: rotate(1deg) translate(-44%, 20%) scale(0.88);
} }
@@ -3762,7 +3773,7 @@ header[id] {
} }
.hero-demo-scene.popup-open .demo-tab-b { .hero-demo-scene.popup-open .demo-tab-b {
top: calc(20cqw + 40px); top: calc(20cqw + 40px + var(--demo-content-y));
transform: rotate(-1.6deg) translate(0, 14%) scale(0.94); transform: rotate(-1.6deg) translate(0, 14%) scale(0.94);
} }
@@ -4111,9 +4122,8 @@ header[id] {
@media (min-width: 1025px) { @media (min-width: 1025px) {
.hero-demo-scene .extension-mockup { .hero-demo-scene .extension-mockup {
/* Keep the opened extension panel vertically balanced in the hero. /* Counter the content shift so the opened panel is balanced below nav. */
Move the popup itself, never the whole hero/demo wrapper. */ bottom: 0.625rem;
bottom: 3.375rem;
} }
} }