A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Merge branch 'fix-mobile-design-issue' into trunk
author
Jeremy Herve
date
(Jun 10, 2026, 3:02 PM +0200)
commit
ba44ddf1
ba44ddf148958654b57925e9930a4dee47df7c2a
parent
c7e69f7a
c7e69f7a21a53805f608c6a4e8d721ba7ac08e8a
+40
-26
+40
-26
src/pages/index.astro
+40
-26
src/pages/index.astro
···
33
33
</Fragment>
34
34
35
35
<div class="page">
36
-
<div class="sky" aria-hidden="true">
37
-
<div class="stars"></div>
38
-
<span class="shootingstar"></span>
39
-
<div class="bloom"></div>
40
-
<div class="halo"></div>
41
-
<div class="horizon"></div>
42
-
</div>
43
-
44
-
<header class="masthead">
45
-
<Logo />
46
-
<div class="masthead__right">
47
-
<a class="btn btn--ghost masthead-write" href="/editor">Write</a>
48
-
<AccountMenu client:only="react" />
36
+
<!-- The sky backs the masthead + hero together. Wrapping them lets the sky fill the
37
+
zone exactly (inset: 0) instead of guessing a fixed height — on a narrow phone the
38
+
wrapping title can push the hero past any fixed height, dropping the trailing copy
39
+
onto the bare dark page background as unreadable dark-on-dark text. -->
40
+
<div class="skyzone">
41
+
<div class="sky" aria-hidden="true">
42
+
<div class="stars"></div>
43
+
<span class="shootingstar"></span>
44
+
<div class="bloom"></div>
45
+
<div class="halo"></div>
46
+
<div class="horizon"></div>
49
47
</div>
50
-
</header>
51
48
52
-
<main class="hero">
53
-
<p class="eyebrow" id="greet">{fallback.greeting}</p>
54
-
<h1 class="hero__title" id="headline" set:html={fallback.headlineHtml} />
55
-
<p class="hero__lede" id="lede">{fallback.lede}</p>
56
-
<div class="hero__cta">
57
-
<HandleStart client:only="react" />
58
-
</div>
59
-
<p class="hero__free">Free & open-source. Your words live in your account, not ours.</p>
60
-
</main>
49
+
<header class="masthead">
50
+
<Logo />
51
+
<div class="masthead__right">
52
+
<a class="btn btn--ghost masthead-write" href="/editor">Write</a>
53
+
<AccountMenu client:only="react" />
54
+
</div>
55
+
</header>
56
+
57
+
<main class="hero">
58
+
<p class="eyebrow" id="greet">{fallback.greeting}</p>
59
+
<h1 class="hero__title" id="headline" set:html={fallback.headlineHtml} />
60
+
<p class="hero__lede" id="lede">{fallback.lede}</p>
61
+
<div class="hero__cta">
62
+
<HandleStart client:only="react" />
63
+
</div>
64
+
<p class="hero__free">Free & open-source. Your words live in your account, not ours.</p>
65
+
</main>
66
+
</div>
61
67
62
68
<section class="showcase">
63
69
<p class="showcase__label">See it in action</p>
···
105
111
overflow: hidden;
106
112
}
107
113
114
+
/* The sky zone holds the masthead + hero; the sky fills it exactly so the backdrop always
115
+
reaches the bottom of the hero, however tall the (wrapping) title makes it. flex: 1 lets
116
+
it grow to push the showcase down when the content is short. */
117
+
.skyzone {
118
+
position: relative;
119
+
flex: 1;
120
+
display: flex;
121
+
flex-direction: column;
122
+
}
123
+
108
124
/* ===== Atmospheric sky (hero backdrop) — varies by [data-phase] ===== */
109
125
.sky {
110
126
position: absolute;
111
-
inset: 0 0 auto 0;
112
-
height: 78vh;
113
-
min-height: 32rem;
127
+
inset: 0;
114
128
z-index: 0;
115
129
pointer-events: none;
116
130
}