zzstoatzz.io
a digital entity named phi that roams bsky
phi.zzstoatzz.io
web: operator + error pages adopt the house content-page container
.page/.page-inner are scoped per content page (not global) — the operator
page borrowed the class names without the styles, so content rendered
unpositioned under the HUD. adds the fixed scroll container + house vars
(bg-elev/line-dim/hud-mid/text-dim/font-mono) to /operator and +error.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
author
zzstoatzz
co-author
Claude Fable 5
date
(Jul 1, 2026, 10:51 PM -0500)
commit
10dac2f5
10dac2f50e31b4f5273928a489b04f4af7f0609c
parent
c7def916
c7def916f9584b072840e672087226cbe6303049
+34
-7
+10
web/src/routes/+error.svelte
+10
web/src/routes/+error.svelte
+24
-7
web/src/routes/operator/+page.svelte
+24
-7
web/src/routes/operator/+page.svelte
···
155
155
</main>
156
156
157
157
<style>
158
+
/* house content-page container: body is overflow:hidden for the canvas
159
+
* pages, so content pages own their scroll region below the HUD chrome
160
+
* (same pattern as docket/capabilities). */
161
+
.page {
162
+
position: fixed;
163
+
inset: 0;
164
+
overflow-y: auto;
165
+
overflow-x: hidden;
166
+
padding: 96px 16px 80px;
167
+
-webkit-overflow-scrolling: touch;
168
+
}
169
+
.page-inner {
170
+
max-width: 720px;
171
+
margin: 0 auto;
172
+
}
158
173
.explainer {
159
-
opacity: 0.75;
174
+
color: var(--text-dim);
160
175
max-width: 60ch;
161
176
line-height: 1.5;
162
177
}
163
178
.live {
164
-
border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
179
+
border: 1px solid var(--line-dim);
180
+
border-left: 2px solid var(--hud-mid);
181
+
background: var(--bg-elev);
165
182
padding: 0.75rem 1rem;
166
183
margin: 1rem 0;
167
-
border-radius: 4px;
168
184
}
169
185
.live-active {
170
186
border-color: #e0a458;
···
194
210
.editor textarea {
195
211
font: inherit;
196
212
padding: 0.5rem;
197
-
background: transparent;
213
+
background: var(--bg-elev);
198
214
color: inherit;
199
-
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
200
-
border-radius: 4px;
215
+
border: 1px solid var(--line-dim);
201
216
}
202
217
.toggle {
203
218
display: flex;
···
225
240
}
226
241
.status {
227
242
margin-top: 1rem;
228
-
opacity: 0.8;
243
+
color: var(--text-dim);
244
+
font-family: var(--font-mono);
245
+
font-size: 13px;
229
246
}
230
247
</style>