Skip to content

Commit ef6dc62

Browse files
aka-kikaaka-kika
committed
fix: keep landing app preview visible
Why: The app preview could still be hidden at zoomed or short desktop viewport sizes. What changed: Reserved more hero space, added a compact short-height desktop preview, reduced intro-band type size, and cache-busted the stylesheet URL. Tested: Playwright screenshots at 1468x938, 1156x610, and 979x625 against the local landing page. git diff --check
1 parent 4bc7a76 commit ef6dc62

2 files changed

Lines changed: 53 additions & 6 deletions

File tree

‎landing/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
>
1010
<title>missingpieces - Next steps from Pieces OS</title>
1111
<link rel="icon" href="./assets/menu-bar-icon.png">
12-
<link rel="stylesheet" href="./styles.css">
12+
<link rel="stylesheet" href="./styles.css?v=20260531-2">
1313
<script src="./scroll.js" defer></script>
1414
</head>
1515
<body>

‎landing/styles.css‎

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -131,9 +131,9 @@ img {
131131
display: flex;
132132
flex-direction: column;
133133
justify-content: center;
134-
min-height: max(92svh, 680px);
134+
min-height: max(100svh, 760px);
135135
overflow: hidden;
136-
padding: 118px clamp(18px, 4vw, 56px) 44px;
136+
padding: 118px clamp(18px, 4vw, 56px) 76px;
137137
background:
138138
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 248, 251, 0.82)),
139139
image-set(
@@ -254,7 +254,7 @@ h3 {
254254
position: relative;
255255
z-index: 2;
256256
width: min(760px, 100%);
257-
min-height: 255px;
257+
min-height: 332px;
258258
margin: clamp(22px, 3.4vw, 34px) auto 0;
259259
}
260260

@@ -412,10 +412,10 @@ h3 {
412412
}
413413

414414
.intro-band p {
415-
max-width: 880px;
415+
width: min(880px, calc(100% - 40px));
416416
margin: 0;
417417
color: rgba(255, 255, 255, 0.78);
418-
font-size: clamp(1.18rem, 2.1vw, 1.72rem);
418+
font-size: clamp(1.08rem, 1.65vw, 1.45rem);
419419
line-height: 1.35;
420420
text-align: center;
421421
overflow-wrap: anywhere;
@@ -623,6 +623,53 @@ h3 {
623623
}
624624
}
625625

626+
@media (min-width: 821px) and (max-height: 760px) {
627+
.hero {
628+
min-height: 100svh;
629+
padding-top: 78px;
630+
padding-bottom: 28px;
631+
}
632+
633+
h1 {
634+
font-size: clamp(2.35rem, 4.1vw, 3.5rem);
635+
margin-bottom: 10px;
636+
}
637+
638+
.hero-copy {
639+
max-width: 620px;
640+
margin-bottom: 14px;
641+
font-size: 0.98rem;
642+
line-height: 1.38;
643+
}
644+
645+
.button {
646+
min-height: 40px;
647+
padding-inline: 17px;
648+
}
649+
650+
.desktop-scene {
651+
min-height: 184px;
652+
margin-top: 18px;
653+
}
654+
655+
.popover-preview {
656+
max-height: 138px;
657+
overflow: hidden;
658+
}
659+
660+
.next-step {
661+
padding-block: 7px;
662+
}
663+
664+
.next-step p {
665+
display: none;
666+
}
667+
668+
.session .next-step:nth-of-type(n+2) {
669+
display: none;
670+
}
671+
}
672+
626673
@media (max-width: 520px) {
627674
.brand span {
628675
font-size: 0.95rem;

0 commit comments

Comments
 (0)