zat.dev
atproto utils for zig
zat.dev
atproto
sdk
zig
fix: clean mobile layout
- consistent gutter variable for all horizontal spacing
- proper CSS cascade (base styles before media query)
- flexbox layout instead of grid (simpler)
- cleaner hamburger icon using pseudo-elements
- one breakpoint at 768px
- removed hacky negative margins
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
zzstoatzz.io
+168
-148
-2
site/index.html
-2
site/index.html
+168
-146
site/style.css
+168
-146
site/style.css
···
10
10
--shadow: rgba(0, 0, 0, 0.35);
11
11
--max: 900px;
12
12
--radius: 12px;
13
+
--gutter: 16px;
13
14
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
14
15
"Courier New", monospace;
15
16
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
···
27
28
--codebg: rgba(0, 0, 0, 0.04);
28
29
--shadow: rgba(0, 0, 0, 0.08);
29
30
}
31
+
}
32
+
33
+
* {
34
+
box-sizing: border-box;
30
35
}
31
36
32
37
html,
···
49
54
text-decoration: underline;
50
55
}
51
56
57
+
/* App shell */
52
58
.app {
53
59
min-height: 100%;
54
60
display: flex;
55
61
flex-direction: column;
56
62
}
57
63
64
+
/* Header */
58
65
.header {
59
66
position: sticky;
60
67
top: 0;
61
68
z-index: 20;
62
69
display: flex;
70
+
align-items: center;
63
71
gap: 12px;
64
-
align-items: center;
65
-
padding: 12px 16px;
72
+
padding: 12px var(--gutter);
66
73
border-bottom: 1px solid var(--border);
67
74
background: color-mix(in srgb, var(--panel) 92%, transparent);
68
75
backdrop-filter: blur(10px);
···
70
77
71
78
.menu-toggle {
72
79
display: none;
73
-
flex-direction: column;
80
+
align-items: center;
74
81
justify-content: center;
75
-
gap: 5px;
76
-
width: 40px;
77
-
height: 40px;
78
-
padding: 8px;
82
+
width: 36px;
83
+
height: 36px;
84
+
padding: 0;
79
85
background: transparent;
80
86
border: 1px solid var(--border);
81
-
border-radius: 10px;
87
+
border-radius: 8px;
82
88
cursor: pointer;
89
+
flex-shrink: 0;
83
90
}
84
91
.menu-toggle span {
85
92
display: block;
86
-
width: 100%;
93
+
width: 16px;
87
94
height: 2px;
88
95
background: var(--text);
89
96
border-radius: 1px;
90
-
transition: transform 0.2s, opacity 0.2s;
97
+
position: relative;
98
+
}
99
+
.menu-toggle span::before,
100
+
.menu-toggle span::after {
101
+
content: "";
102
+
position: absolute;
103
+
left: 0;
104
+
width: 16px;
105
+
height: 2px;
106
+
background: var(--text);
107
+
border-radius: 1px;
108
+
transition: transform 0.2s;
109
+
}
110
+
.menu-toggle span::before {
111
+
top: -5px;
91
112
}
92
-
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
93
-
transform: translateY(7px) rotate(45deg);
113
+
.menu-toggle span::after {
114
+
top: 5px;
94
115
}
95
-
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
96
-
opacity: 0;
116
+
.menu-toggle[aria-expanded="true"] span {
117
+
background: transparent;
97
118
}
98
-
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
99
-
transform: translateY(-7px) rotate(-45deg);
119
+
.menu-toggle[aria-expanded="true"] span::before {
120
+
transform: translateY(5px) rotate(45deg);
121
+
}
122
+
.menu-toggle[aria-expanded="true"] span::after {
123
+
transform: translateY(-5px) rotate(-45deg);
100
124
}
101
125
102
126
.brand {
103
127
font-weight: 700;
104
-
letter-spacing: 0.2px;
105
-
padding: 6px 10px;
106
-
border-radius: 10px;
128
+
font-size: 15px;
129
+
color: var(--text);
130
+
padding: 6px 0;
107
131
}
108
132
.brand:hover {
109
-
background: color-mix(in srgb, var(--codebg) 70%, transparent);
110
133
text-decoration: none;
134
+
opacity: 0.8;
111
135
}
112
136
113
137
.header-link {
114
138
margin-left: auto;
115
-
padding: 8px 10px;
116
-
border-radius: 10px;
139
+
padding: 6px 12px;
140
+
font-size: 14px;
141
+
border-radius: 8px;
117
142
border: 1px solid var(--border);
118
143
color: var(--text);
119
-
opacity: 0.9;
120
144
}
121
145
.header-link:hover {
122
-
background: color-mix(in srgb, var(--codebg) 70%, transparent);
146
+
background: var(--codebg);
123
147
text-decoration: none;
124
-
opacity: 1;
125
148
}
126
149
150
+
/* Overlay */
127
151
.overlay {
128
152
display: none;
129
153
position: fixed;
130
154
inset: 0;
131
-
z-index: 9;
155
+
z-index: 15;
132
156
background: rgba(0, 0, 0, 0.5);
133
-
backdrop-filter: blur(2px);
134
157
}
135
158
.overlay.open {
136
159
display: block;
137
160
}
138
161
162
+
/* Layout */
139
163
.layout {
140
-
display: grid;
141
-
grid-template-columns: 280px 1fr;
142
-
gap: 16px;
143
-
padding: 16px;
164
+
display: flex;
165
+
gap: var(--gutter);
166
+
padding: var(--gutter);
144
167
flex: 1;
145
-
}
146
-
147
-
@media (max-width: 768px) {
148
-
.menu-toggle {
149
-
display: flex;
150
-
}
151
-
152
-
.layout {
153
-
grid-template-columns: 1fr;
154
-
padding: 12px;
155
-
gap: 12px;
156
-
}
157
-
158
-
.sidebar {
159
-
position: fixed;
160
-
top: 0;
161
-
left: 0;
162
-
right: 0;
163
-
bottom: 0;
164
-
z-index: 10;
165
-
max-height: none;
166
-
border: none;
167
-
border-radius: 0;
168
-
transform: translateX(-100%);
169
-
transition: transform 0.25s ease;
170
-
padding-top: 64px;
171
-
}
172
-
.sidebar.open {
173
-
transform: translateX(0);
174
-
}
175
-
176
-
.nav {
177
-
padding: 16px;
178
-
}
179
-
180
-
.nav a {
181
-
padding: 14px 16px;
182
-
font-size: 16px;
183
-
}
184
-
185
-
.content {
186
-
padding: 16px;
187
-
}
188
-
189
-
.content h1 {
190
-
font-size: 26px;
191
-
}
192
-
193
-
.content pre {
194
-
padding: 12px;
195
-
font-size: 13px;
196
-
}
197
-
}
198
-
199
-
@media (max-width: 480px) {
200
-
.header {
201
-
padding: 10px 12px;
202
-
}
203
-
204
-
.layout {
205
-
padding: 8px;
206
-
}
207
-
208
-
.content {
209
-
padding: 14px;
210
-
border-radius: 10px;
211
-
}
212
-
213
-
.content h1 {
214
-
font-size: 22px;
215
-
}
216
-
217
-
.content h2 {
218
-
font-size: 18px;
219
-
}
220
-
221
-
.content pre {
222
-
margin-left: -14px;
223
-
margin-right: -14px;
224
-
border-radius: 0;
225
-
border-left: none;
226
-
border-right: none;
227
-
}
168
+
max-width: 1200px;
169
+
margin: 0 auto;
170
+
width: 100%;
228
171
}
229
172
173
+
/* Sidebar */
230
174
.sidebar {
175
+
width: 240px;
176
+
flex-shrink: 0;
231
177
position: sticky;
232
-
top: 64px;
233
-
align-self: start;
234
-
max-height: calc(100vh - 84px);
235
-
overflow: auto;
178
+
top: 72px;
179
+
align-self: flex-start;
180
+
max-height: calc(100vh - 88px);
181
+
overflow-y: auto;
236
182
border: 1px solid var(--border);
237
183
border-radius: var(--radius);
238
184
background: var(--panel);
239
-
box-shadow: 0 12px 40px var(--shadow);
240
185
}
241
186
242
187
.nav {
···
248
193
249
194
.nav a {
250
195
display: block;
251
-
padding: 8px 10px;
252
-
border-radius: 10px;
196
+
padding: 10px 12px;
197
+
border-radius: 8px;
253
198
color: var(--text);
254
-
opacity: 0.9;
199
+
font-size: 14px;
255
200
}
256
201
.nav a:hover {
257
-
background: color-mix(in srgb, var(--codebg) 70%, transparent);
202
+
background: var(--codebg);
258
203
text-decoration: none;
259
204
}
260
205
.nav a[aria-current="page"] {
261
-
background: color-mix(in srgb, var(--link) 14%, var(--codebg));
262
-
border: 1px solid color-mix(in srgb, var(--link) 20%, var(--border));
206
+
background: color-mix(in srgb, var(--link) 15%, transparent);
263
207
}
264
208
209
+
/* Main content */
265
210
.main {
266
-
display: flex;
267
-
justify-content: center;
211
+
flex: 1;
212
+
min-width: 0;
268
213
}
269
214
270
215
.content {
271
-
width: min(var(--max), 100%);
272
216
border: 1px solid var(--border);
273
217
border-radius: var(--radius);
274
218
background: var(--panel);
275
-
box-shadow: 0 12px 40px var(--shadow);
276
219
padding: 24px;
277
220
}
278
221
222
+
/* Footer */
279
223
.site-footer {
280
-
display: flex;
281
-
justify-content: center;
282
-
padding: 12px 16px;
224
+
padding: 16px var(--gutter);
225
+
text-align: center;
283
226
border-top: 1px solid var(--border);
284
-
background: var(--panel);
285
227
}
286
228
287
229
.footer-link {
288
230
font-size: 13px;
289
231
color: var(--muted);
290
-
padding: 6px 10px;
291
-
border-radius: 10px;
292
-
border: 1px solid transparent;
293
232
}
294
233
.footer-link:hover {
295
234
color: var(--text);
296
-
background: color-mix(in srgb, var(--codebg) 70%, transparent);
297
-
border-color: var(--border);
298
235
text-decoration: none;
299
236
}
300
237
238
+
/* Content typography */
301
239
.content h1,
302
240
.content h2,
303
241
.content h3 {
304
-
scroll-margin-top: 84px;
242
+
scroll-margin-top: 80px;
305
243
}
306
244
307
245
.content h1 {
308
246
margin-top: 0;
309
-
font-size: 34px;
247
+
font-size: 28px;
248
+
}
249
+
250
+
.content h2 {
251
+
font-size: 20px;
252
+
margin-top: 32px;
253
+
}
254
+
255
+
.content h3 {
256
+
font-size: 16px;
257
+
margin-top: 24px;
310
258
}
311
259
312
260
.content p,
313
261
.content li {
314
-
line-height: 1.6;
262
+
line-height: 1.65;
315
263
}
316
264
317
265
.content code {
318
266
font-family: var(--mono);
319
-
font-size: 0.95em;
267
+
font-size: 0.9em;
320
268
background: var(--codebg);
321
269
padding: 2px 6px;
322
-
border-radius: 8px;
270
+
border-radius: 6px;
323
271
}
324
272
325
273
.content pre {
326
-
overflow: auto;
327
-
padding: 14px 16px;
328
-
border-radius: 12px;
274
+
overflow-x: auto;
275
+
padding: 16px;
276
+
border-radius: 10px;
329
277
background: var(--codebg);
330
278
border: 1px solid var(--border);
279
+
font-size: 14px;
280
+
line-height: 1.5;
331
281
}
332
282
333
283
.content pre code {
···
335
285
padding: 0;
336
286
}
337
287
288
+
.content details {
289
+
margin: 16px 0;
290
+
}
291
+
292
+
.content details summary {
293
+
cursor: pointer;
294
+
padding: 8px 0;
295
+
}
296
+
338
297
.empty {
339
298
color: var(--muted);
340
299
}
300
+
301
+
/* Mobile */
302
+
@media (max-width: 768px) {
303
+
:root {
304
+
--gutter: 16px;
305
+
}
306
+
307
+
.menu-toggle {
308
+
display: flex;
309
+
}
310
+
311
+
.layout {
312
+
flex-direction: column;
313
+
}
314
+
315
+
.sidebar {
316
+
position: fixed;
317
+
top: 0;
318
+
left: 0;
319
+
bottom: 0;
320
+
width: 280px;
321
+
max-width: 80vw;
322
+
z-index: 16;
323
+
border: none;
324
+
border-radius: 0;
325
+
border-right: 1px solid var(--border);
326
+
max-height: none;
327
+
padding-top: 60px;
328
+
transform: translateX(-100%);
329
+
transition: transform 0.2s ease-out;
330
+
}
331
+
332
+
.sidebar.open {
333
+
transform: translateX(0);
334
+
}
335
+
336
+
.nav {
337
+
padding: 12px;
338
+
}
339
+
340
+
.nav a {
341
+
padding: 12px 14px;
342
+
font-size: 15px;
343
+
}
344
+
345
+
.content {
346
+
padding: 20px;
347
+
border-radius: 10px;
348
+
}
349
+
350
+
.content h1 {
351
+
font-size: 24px;
352
+
}
353
+
354
+
.content h2 {
355
+
font-size: 18px;
356
+
}
357
+
358
+
.content pre {
359
+
font-size: 13px;
360
+
padding: 14px;
361
+
}
362
+
}