A calm place to write long-form, and publish it to the open social web.
skypress.blog/
1/* src/styles/write-chrome.css
2 * Chrome unique to the writing-first page (/write): the top actions bar (the Publish button),
3 * the sign-in panel, and the publish stepper. The signed-in identity + sign-out live in the
4 * shared app bar (app-bar.css), not here. The editor body itself reuses
5 * editor-chrome.css (.studio__title / .studio__lede / .studio__cover*), so the title/lede
6 * stay direct children of the column — never wrap them, or they lose their shared alignment.
7 */
8
9/* Top actions bar: right-aligned account pill + Publish, in the SAME centred content column
10 as the app bar, title, and editor surface (var(--studio-measure)/--studio-gutter), so it
11 lines up with everything below instead of floating at the viewport edge. */
12.write-actions {
13 display: flex;
14 align-items: center;
15 justify-content: flex-end;
16 gap: 0.75rem;
17 max-width: var(--studio-measure, 60rem);
18 margin: 0 auto;
19 padding: 0.75rem var(--studio-gutter, 1.25rem) 0;
20}
21
22/* Primary publish action — matches the editor's .publish__button (sun fill). */
23.write-publish {
24 font: inherit;
25 font-weight: 600;
26 cursor: pointer;
27 border: 0;
28 border-radius: 8px;
29 padding: 0.5rem 1rem;
30 background: var(--sun);
31 color: #fff;
32}
33
34.write-publish:disabled {
35 opacity: 0.5;
36 cursor: not-allowed;
37}
38
39/* Sign-in panel + publish stepper: framed cards in the centred column. Use the paper-raised
40 surface + token border so they read correctly in light and dark (not a near-invisible
41 rgba hairline on the dark canvas). */
42.write-signin,
43.writeflow {
44 max-width: 32rem;
45 margin: 1rem auto;
46 padding: 1.25rem 1.5rem;
47 background: var(--paper-raised);
48 border: 1px solid var(--line-strong);
49 border-radius: var(--radius);
50 box-shadow: var(--shadow);
51}
52
53/* Sign-in panel — mirrors the editor's LoginForm (login.css) so signing in looks the same
54 wherever a signed-out writer meets it. */
55.signin-panel__title {
56 font-family: var(--font-display);
57 font-size: 1.5rem;
58 margin: 0 0 0.4rem;
59 color: var(--ink);
60}
61.signin-panel__lede {
62 color: var(--muted);
63 margin: 0 0 1.25rem;
64 font-size: 0.95rem;
65}
66.signin-panel__label {
67 display: block;
68 font-size: 0.85rem;
69 font-weight: 600;
70 margin-bottom: 0.35rem;
71 color: var(--ink);
72}
73.signin-panel__input {
74 width: 100%;
75 box-sizing: border-box;
76 padding: 0.6rem 0.7rem;
77 border: 1px solid var(--line-strong);
78 border-radius: 8px;
79 background: var(--paper);
80 color: var(--ink);
81 font: inherit;
82}
83.signin-panel__submit {
84 padding: 0.6rem 1.1rem;
85 border: 0;
86 border-radius: 8px;
87 background: var(--sun);
88 color: #fff;
89 font: inherit;
90 font-weight: 600;
91 cursor: pointer;
92}
93.signin-panel__cancel {
94 padding: 0.6rem 1rem;
95 border: 1px solid var(--line-strong);
96 background: var(--paper-raised);
97 border-radius: 8px;
98 color: inherit;
99 font: inherit;
100 cursor: pointer;
101}
102.signin-panel__signup {
103 margin: 1rem 0 0;
104 font-size: 0.85rem;
105 color: var(--muted);
106}
107.signin-panel__signup a {
108 color: var(--sun);
109 font-weight: 600;
110}
111.signin-panel__signup-link {
112 /* Keep the external-link icon on the same line, snug against the label. */
113 display: inline-flex;
114 align-items: center;
115 gap: 0.25em;
116 white-space: nowrap;
117}
118.signin-panel__external {
119 flex: none;
120}
121
122.signin-panel__actions,
123.writeflow__actions {
124 display: flex;
125 gap: 0.75rem;
126 margin-top: 1rem;
127}
128
129/* Publication picker (when the writer has more than one). Mirrors the editor's
130 .publish__target / .publish__select so it reads like the rest of the app. */
131.writeflow__target {
132 display: flex;
133 flex-direction: column;
134 gap: 0.35rem;
135 margin: 0 0 1rem;
136}
137.writeflow__target > span {
138 font-size: 0.85rem;
139 font-weight: 600;
140 color: var(--ink);
141}
142.writeflow__target select {
143 width: 100%;
144 box-sizing: border-box;
145 padding: 0.55rem 0.7rem;
146 border: 1px solid var(--line-strong);
147 border-radius: 8px;
148 background: var(--paper);
149 color: var(--ink);
150 font: inherit;
151 cursor: pointer;
152}
153.writeflow__target select:disabled {
154 opacity: 0.6;
155 cursor: default;
156}
157
158/* Primary publish action — same sun fill as the editor's publish button. */
159.writeflow__publish {
160 padding: 0.6rem 1.1rem;
161 border: 0;
162 border-radius: 8px;
163 background: var(--sun);
164 color: #fff;
165 font: inherit;
166 font-weight: 600;
167 cursor: pointer;
168}
169.writeflow__publish:disabled {
170 opacity: 0.5;
171 cursor: not-allowed;
172}
173
174.writeflow__status {
175 margin: 1rem 0 0;
176 color: var(--muted);
177 font-size: 0.9rem;
178}
179
180.writeflow__warning {
181 font-size: 0.95rem;
182 margin: 0 0 0.75rem;
183}
184
185.writeflow__count,
186.writeflow__error,
187.signin-panel__error {
188 color: var(--ember);
189 font-size: 0.9rem;
190 margin: 0.75rem 0 0;
191}