klinsmaya/park0er-multi-casual-android
1
0
Fork 0
forked from mirror/park0er-multi-casual-android
Code Pull Requests Activity

Fix mobile layout: hero padding, phone stack sizing, section spacing

Browse Source
This commit is contained in:
Xisheng-Zhao
2026-06-08 20:30:35 +08:00
parent 1685cedca9
commit dc915ac59c
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/styles.css
+14 -2
View File
@@ -40,6 +40,8 @@ a { color: inherit; text-decoration: none; }
position: relative;
overflow: hidden;
padding-top: 26px;
padding-left: clamp(16px, 5vw, 76px);
padding-right: clamp(16px, 5vw, 76px);
}
.hero-bg {
@@ -801,11 +803,21 @@ pre {
.topbar { border-radius: 24px; align-items: flex-start; flex-direction: column; }
.nav-links { flex-wrap: wrap; }
.hero-grid, .two-col, .demo-grid, .video-copy, .feature-grid, .trust-grid, .release-grid { grid-template-columns: 1fr; }
.hero-phone-stack { min-height: 620px; }
.hero-phone-stack img { height: 600px; }
.hero { padding-left: 16px; padding-right: 16px; padding-top: 20px; min-height: auto; }
.hero-grid { width: 100%; }
.hero-grid > div:first-child { padding-right: 0; }
.hero-phone-stack { min-height: 400px; overflow: visible; }
.hero-phone-stack img { height: 480px; width: min(240px, 42vw); border-radius: 36px; border-width: 10px; }
.hero-phone-stack img:nth-child(1) { left: -5%; top: 36px; transform: rotate(-8deg) translateZ(-20px); }
.hero-phone-stack img:nth-child(2) { left: 22%; top: 0; transform: rotate(4deg) translateZ(40px); }
.hero-phone-stack img:nth-child(3) { right: -5%; top: 100px; transform: rotate(10deg) translateZ(10px); }
.eyebrow { font-size: 11px; letter-spacing: 0.1em; }
h1 { font-size: clamp(32px, 8vw, 52px) !important; }
.hero-subtitle { font-size: 15px; }
.journey-layout { grid-template-columns: 1fr; }
.journey-phone-area { position: relative; top: 0; order: -1; }
.journey-phone-container { justify-content: center; }
.section-pad { padding: 48px 16px; }
.hash-cell { grid-column: auto; }
.screenshot-stack { min-height: 680px; }
.shot { width: min(300px, 74vw); }