margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
1.layout {
2 display: flex;
3 min-height: 100vh;
4 background: var(--bg-primary);
5}
6
7.sidebar {
8 position: fixed;
9 left: 0;
10 top: 0;
11 bottom: 0;
12 width: 240px;
13 background: var(--bg-primary);
14 border-right: 1px solid var(--border);
15 display: flex;
16 flex-direction: column;
17 z-index: 50;
18 padding-bottom: 20px;
19}
20
21.sidebar-header {
22 height: 64px;
23 display: flex;
24 align-items: center;
25 padding: 0 20px;
26 margin-bottom: 12px;
27 text-decoration: none;
28 color: var(--text-primary);
29}
30
31.sidebar-logo {
32 width: 24px;
33 height: 24px;
34 object-fit: contain;
35 margin-right: 12px;
36}
37
38.sidebar-brand {
39 font-size: 1rem;
40 font-weight: 600;
41 color: var(--text-primary);
42 letter-spacing: -0.01em;
43}
44
45.sidebar-nav {
46 flex: 1;
47 display: flex;
48 flex-direction: column;
49 gap: 4px;
50 padding: 0 12px;
51 overflow-y: auto;
52}
53
54.sidebar-link {
55 display: flex;
56 align-items: center;
57 gap: 12px;
58 padding: 8px 12px;
59 border-radius: var(--radius-md);
60 color: var(--text-secondary);
61 text-decoration: none;
62 font-size: 0.9rem;
63 font-weight: 500;
64 transition: all 0.15s ease;
65}
66
67.sidebar-link:hover {
68 background: var(--bg-tertiary);
69 color: var(--text-primary);
70}
71
72.sidebar-link.active {
73 background: var(--bg-tertiary);
74 color: var(--text-primary);
75}
76
77.sidebar-link svg {
78 width: 18px;
79 height: 18px;
80 color: var(--text-tertiary);
81 transition: color 0.15s ease;
82}
83
84.sidebar-link:hover svg,
85.sidebar-link.active svg {
86 color: var(--text-primary);
87}
88
89.sidebar-section-title {
90 padding: 24px 12px 8px;
91 font-size: 0.75rem;
92 font-weight: 600;
93 color: var(--text-tertiary);
94 text-transform: uppercase;
95 letter-spacing: 0.05em;
96}
97
98.notification-badge {
99 background: var(--accent);
100 color: white;
101 font-size: 0.7rem;
102 font-weight: 600;
103 padding: 0 6px;
104 height: 18px;
105 border-radius: 99px;
106 display: flex;
107 align-items: center;
108 justify-content: center;
109 margin-left: auto;
110}
111
112.sidebar-new-btn {
113 display: flex;
114 align-items: center;
115 gap: 10px;
116 margin: 0 12px 16px;
117 padding: 10px 16px;
118 background: var(--text-primary);
119 color: var(--bg-primary);
120 border-radius: var(--radius-md);
121 font-size: 0.9rem;
122 font-weight: 600;
123 text-decoration: none;
124 transition: opacity 0.15s;
125 justify-content: center;
126}
127
128.sidebar-new-btn:hover {
129 opacity: 0.9;
130}
131
132.sidebar-footer {
133 padding: 0 12px;
134 margin-top: auto;
135}
136
137.sidebar-user {
138 display: flex;
139 align-items: center;
140 gap: 10px;
141 padding: 8px 12px;
142 border-radius: var(--radius-md);
143 cursor: pointer;
144 transition: background 0.15s ease;
145}
146
147.sidebar-user:hover,
148.sidebar-user.active {
149 background: var(--bg-tertiary);
150}
151
152.sidebar-avatar {
153 width: 32px;
154 height: 32px;
155 border-radius: 50%;
156 background: var(--bg-tertiary);
157 display: flex;
158 align-items: center;
159 justify-content: center;
160 color: var(--text-secondary);
161 font-size: 0.8rem;
162 font-weight: 500;
163 overflow: hidden;
164 flex-shrink: 0;
165 border: 1px solid var(--border);
166}
167
168.sidebar-avatar img {
169 width: 100%;
170 height: 100%;
171 object-fit: cover;
172}
173
174.sidebar-user-info {
175 flex: 1;
176 min-width: 0;
177 display: flex;
178 flex-direction: column;
179}
180
181.sidebar-user-name {
182 font-size: 0.85rem;
183 font-weight: 500;
184 color: var(--text-primary);
185}
186
187.sidebar-user-handle {
188 font-size: 0.75rem;
189 color: var(--text-tertiary);
190}
191
192.sidebar-dropdown {
193 position: absolute;
194 bottom: 74px;
195 left: 12px;
196 width: 216px;
197 background: var(--bg-card);
198 border: 1px solid var(--border);
199 border-radius: var(--radius-md);
200 box-shadow: var(--shadow-lg);
201 padding: 4px;
202 z-index: 1000;
203 overflow: hidden;
204 animation: scaleIn 0.1s ease-out;
205 transform-origin: bottom center;
206}
207
208@keyframes scaleIn {
209 from {
210 opacity: 0;
211 transform: scale(0.95);
212 }
213
214 to {
215 opacity: 1;
216 transform: scale(1);
217 }
218}
219
220.sidebar-dropdown-item {
221 display: flex;
222 align-items: center;
223 gap: 10px;
224 width: 100%;
225 padding: 8px 12px;
226 font-size: 0.85rem;
227 color: var(--text-secondary);
228 text-decoration: none;
229 background: transparent;
230 cursor: pointer;
231 border-radius: var(--radius-sm);
232 transition: all 0.15s;
233 border: none;
234}
235
236.sidebar-dropdown-item:hover {
237 background: var(--bg-tertiary);
238 color: var(--text-primary);
239}
240
241.sidebar-dropdown-item.danger:hover {
242 background: rgba(239, 68, 68, 0.1);
243 color: var(--error);
244}
245
246.main-layout {
247 flex: 1;
248 margin-left: 240px;
249 margin-right: 280px;
250 min-height: 100vh;
251}
252
253.main-content-wrapper {
254 max-width: 640px;
255 margin: 0 auto;
256 padding: 40px 24px;
257}
258
259.right-sidebar {
260 position: fixed;
261 right: 0;
262 top: 0;
263 bottom: 0;
264 width: 280px;
265 background: var(--bg-primary);
266 border-left: 1px solid var(--border);
267 padding: 32px 24px;
268 overflow-y: auto;
269 display: flex;
270 flex-direction: column;
271 gap: 32px;
272}
273
274.right-section {
275 display: flex;
276 flex-direction: column;
277 gap: 12px;
278}
279
280.right-section-title {
281 font-size: 0.75rem;
282 font-weight: 600;
283 color: var(--text-primary);
284 margin-bottom: 4px;
285}
286
287.right-section-desc {
288 font-size: 0.85rem;
289 line-height: 1.5;
290 color: var(--text-secondary);
291}
292
293.right-extension-btn {
294 display: inline-flex;
295 align-items: center;
296 gap: 8px;
297 padding: 8px 12px;
298 background: var(--bg-primary);
299 border: 1px solid var(--border);
300 border-radius: var(--radius-md);
301 color: var(--text-primary);
302 font-size: 0.85rem;
303 font-weight: 500;
304 text-decoration: none;
305 transition: all 0.15s ease;
306 width: fit-content;
307}
308
309.right-extension-btn:hover {
310 border-color: var(--text-tertiary);
311 background: var(--bg-tertiary);
312}
313
314.right-links {
315 display: flex;
316 flex-direction: column;
317 gap: 4px;
318}
319
320.right-link {
321 display: flex;
322 align-items: center;
323 justify-content: space-between;
324 padding: 6px 0;
325 color: var(--text-secondary);
326 font-size: 0.9rem;
327 transition: color 0.15s;
328 text-decoration: none;
329}
330
331.right-link:hover {
332 color: var(--text-primary);
333}
334
335.right-link svg {
336 width: 16px;
337 height: 16px;
338 color: var(--text-tertiary);
339 transition: all 0.15s;
340}
341
342.right-link:hover svg {
343 color: var(--text-secondary);
344}
345
346.tangled-icon {
347 width: 16px;
348 height: 16px;
349 background-color: var(--text-tertiary);
350 -webkit-mask: url("../assets/tangled.svg") no-repeat center / contain;
351 mask: url("../assets/tangled.svg") no-repeat center / contain;
352 transition: background-color 0.15s;
353}
354
355.right-link:hover .tangled-icon {
356 background-color: var(--text-secondary);
357}
358
359.right-footer {
360 margin-top: auto;
361 display: flex;
362 align-items: center;
363 justify-content: space-between;
364 padding-top: 16px;
365 border-top: 1px solid var(--border);
366}
367
368.footer-links {
369 display: flex;
370 align-items: center;
371 gap: 8px;
372 font-size: 12px;
373 color: var(--text-tertiary);
374}
375
376.footer-links a {
377 color: var(--text-tertiary);
378 text-decoration: none;
379}
380
381.footer-links a:hover {
382 text-decoration: underline;
383 color: var(--text-secondary);
384}
385
386.theme-toggle-mini {
387 background: none;
388 border: none;
389 cursor: pointer;
390 padding: 4px;
391 color: var(--text-tertiary);
392 display: flex;
393 align-items: center;
394 justify-content: center;
395 border-radius: 4px;
396 transition: all 0.2s;
397}
398
399.theme-toggle-mini:hover {
400 color: var(--text-primary);
401 background: var(--bg-hover);
402}
403
404.mobile-nav {
405 display: none;
406 position: fixed;
407 bottom: 0;
408 left: 0;
409 right: 0;
410 background: rgba(9, 9, 11, 0.9);
411 backdrop-filter: blur(12px);
412 -webkit-backdrop-filter: blur(12px);
413 border-top: 1px solid var(--border);
414 padding: 8px 16px;
415 padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
416 z-index: 100;
417}
418
419.mobile-nav-inner {
420 display: flex;
421 justify-content: space-between;
422 align-items: center;
423}
424
425.mobile-nav-item {
426 display: flex;
427 flex-direction: column;
428 align-items: center;
429 justify-content: center;
430 gap: 4px;
431 color: var(--text-tertiary);
432 text-decoration: none;
433 font-size: 0.65rem;
434 font-weight: 500;
435 width: 60px;
436 transition: color 0.15s;
437}
438
439.mobile-nav-item.active {
440 color: var(--text-primary);
441}
442
443.mobile-nav-item svg {
444 width: 24px;
445 height: 24px;
446}
447
448.mobile-nav-new {
449 width: 48px;
450 height: 36px;
451 border-radius: var(--radius-md);
452 background: var(--text-primary);
453 color: var(--bg-primary);
454 display: flex;
455 align-items: center;
456 justify-content: center;
457}
458
459.mobile-nav-new svg {
460 width: 20px;
461 height: 20px;
462}
463
464@media (max-width: 1200px) {
465 .right-sidebar {
466 display: none;
467 }
468
469 .main-layout {
470 margin-right: 0;
471 }
472}
473
474@media (max-width: 768px) {
475 .sidebar {
476 display: none;
477 }
478
479 .main-layout {
480 margin-left: 0;
481 padding-bottom: 80px;
482 width: 100%;
483 min-width: 0;
484 }
485
486 .main-content-wrapper {
487 padding: 20px 16px;
488 max-width: 100%;
489 width: 100%;
490 overflow-x: hidden;
491 min-width: 0;
492 }
493
494 .mobile-nav {
495 display: block;
496 max-width: 100vw;
497 }
498
499 .card,
500 .annotation-card,
501 .collection-card,
502 .profile-header,
503 .api-keys-section {
504 overflow-x: hidden;
505 max-width: 100%;
506 }
507
508 code {
509 word-break: break-all;
510 overflow-wrap: break-word;
511 }
512
513 pre {
514 overflow-x: auto;
515 max-width: 100%;
516 }
517
518 input,
519 textarea {
520 max-width: 100%;
521 }
522
523 .flex-row,
524 [style*="display: flex"][style*="gap"] {
525 flex-wrap: wrap;
526 }
527
528 .static-page {
529 overflow-x: hidden;
530 }
531
532 .static-page ol,
533 .static-page ul {
534 padding-left: 1.25rem;
535 }
536
537 .static-page code {
538 font-size: 0.75rem;
539 word-break: break-all;
540 }
541}