A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Share sign-in form styles between dashboard and editor
The signed-out LoginForm renders on both /editor and /dashboard, but its
`login__*` rules lived only in editor-chrome.css (imported by editor.astro).
The dashboard never imported them, so the same form appeared unstyled there.
Extract the form rules into a shared src/styles/login.css and import it from
both pages, so the sign-in form looks identical wherever a signed-out visitor
lands. The editor-specific `.studio__login`/`.studio__error` rules stay in
editor-chrome.css.
author
Jeremy Herve
date
(Jun 9, 2026, 1:01 AM +0200)
commit
e95e9bad
e95e9bad22553bb63a617035bc82d567b15f0542
parent
80c5ca15
80c5ca156e66a0ac894f0177492c1eb8a9ef8d56
+60
-42
+3
src/pages/dashboard.astro
+3
src/pages/dashboard.astro
···
2
2
import Base from '../layouts/Base.astro';
3
3
import Logo from '../components/Logo.astro';
4
4
import Dashboard from '../components/Dashboard.tsx';
5
+
// The signed-out sign-in form (`LoginForm`) is shared with the editor page; its
6
+
// styles live in this global stylesheet so the form looks the same on both.
7
+
import '../styles/login.css';
5
8
---
6
9
7
10
<Base title="Dashboard — SkyPress">
+1
src/pages/editor.astro
+1
src/pages/editor.astro
+3
-42
src/styles/editor-chrome.css
+3
-42
src/styles/editor-chrome.css
···
95
95
font: inherit;
96
96
}
97
97
98
-
/* Login (signed out) */
98
+
/* Login (signed out). The `.login__*` form rules are shared with the dashboard
99
+
and live in `login.css` (imported by editor.astro alongside this file). */
99
100
.studio__login {
100
101
max-width: 30rem;
101
102
margin: 0 auto;
102
103
padding: 4rem 1.5rem;
103
104
}
104
-
.studio__error,
105
-
.login__error {
105
+
.studio__error {
106
106
color: var(--ember);
107
107
font-size: 0.9rem;
108
-
}
109
-
.login__title {
110
-
font-size: 1.6rem;
111
-
margin: 0 0 0.5rem;
112
-
}
113
-
.login__lede {
114
-
color: var(--muted);
115
-
margin: 0 0 1.5rem;
116
-
}
117
-
.login__label {
118
-
display: block;
119
-
font-size: 0.85rem;
120
-
font-weight: 600;
121
-
margin-bottom: 0.35rem;
122
-
}
123
-
.login__input {
124
-
width: 100%;
125
-
box-sizing: border-box;
126
-
padding: 0.6rem 0.7rem;
127
-
border: 1px solid var(--line-strong);
128
-
border-radius: 8px;
129
-
font: inherit;
130
-
margin-bottom: 0.85rem;
131
-
}
132
-
.login__submit {
133
-
width: 100%;
134
-
padding: 0.65rem 1rem;
135
-
border: 0;
136
-
border-radius: 8px;
137
-
background: var(--sun);
138
-
color: #fff;
139
-
font: inherit;
140
-
font-weight: 600;
141
-
cursor: pointer;
142
-
}
143
-
.login__note {
144
-
color: var(--muted);
145
-
font-size: 0.8rem;
146
-
margin-top: 1rem;
147
108
}
148
109
149
110
/* Publish panel */
+53
src/styles/login.css
+53
src/styles/login.css
···
1
+
/**
2
+
* Sign-in form (`LoginForm`) styles.
3
+
*
4
+
* The login form is rendered inside `client:only` React islands (the Studio and
5
+
* the Dashboard), so Astro's component-scoped styles never reach its DOM — these
6
+
* rules must be global. Shared by both the editor page (`src/pages/editor.astro`,
7
+
* via `editor-chrome.css`) and the dashboard page (`src/pages/dashboard.astro`)
8
+
* so the form looks identical wherever a signed-out visitor lands.
9
+
*/
10
+
11
+
.login__error {
12
+
color: var(--ember);
13
+
font-size: 0.9rem;
14
+
}
15
+
.login__title {
16
+
font-size: 1.6rem;
17
+
margin: 0 0 0.5rem;
18
+
}
19
+
.login__lede {
20
+
color: var(--muted);
21
+
margin: 0 0 1.5rem;
22
+
}
23
+
.login__label {
24
+
display: block;
25
+
font-size: 0.85rem;
26
+
font-weight: 600;
27
+
margin-bottom: 0.35rem;
28
+
}
29
+
.login__input {
30
+
width: 100%;
31
+
box-sizing: border-box;
32
+
padding: 0.6rem 0.7rem;
33
+
border: 1px solid var(--line-strong);
34
+
border-radius: 8px;
35
+
font: inherit;
36
+
margin-bottom: 0.85rem;
37
+
}
38
+
.login__submit {
39
+
width: 100%;
40
+
padding: 0.65rem 1rem;
41
+
border: 0;
42
+
border-radius: 8px;
43
+
background: var(--sun);
44
+
color: #fff;
45
+
font: inherit;
46
+
font-weight: 600;
47
+
cursor: pointer;
48
+
}
49
+
.login__note {
50
+
color: var(--muted);
51
+
font-size: 0.8rem;
52
+
margin-top: 1rem;
53
+
}