margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
1.app {
2 min-height: 100vh;
3 background: var(--bg-primary);
4}
5
6.app-layout {
7 display: grid;
8 grid-template-columns: 240px 1fr 280px;
9 width: 100%;
10 height: 100vh;
11 overflow: hidden;
12}
13
14@media (max-width: 1024px) {
15 .app-layout {
16 grid-template-columns: 240px 1fr;
17 }
18}
19
20@media (max-width: 768px) {
21 .app-layout {
22 grid-template-columns: 1fr;
23 height: auto;
24 overflow: visible;
25 }
26}
27
28.top-nav {
29 display: none;
30 position: sticky;
31 top: 0;
32 z-index: 100;
33 background: var(--nav-bg);
34 backdrop-filter: blur(12px);
35 -webkit-backdrop-filter: blur(12px);
36 border-bottom: 1px solid var(--border);
37}
38
39@media (max-width: 768px) {
40 .top-nav {
41 display: block;
42 }
43}
44
45.layout-mode-topnav .app-layout {
46 grid-template-columns: 1fr;
47 max-width: 1600px;
48 margin: 0 auto;
49 height: auto;
50 overflow: visible;
51}
52
53.layout-mode-topnav .top-nav {
54 display: block;
55}
56
57.layout-mode-topnav .main-content {
58 height: auto;
59 overflow: visible;
60}
61
62.layout-mode-topnav .main-content > * {
63 max-width: 1200px;
64 margin: 0 auto;
65}
66
67.top-nav-inner {
68 max-width: 1200px;
69 margin: 0 auto;
70 padding: 0 32px;
71 height: 56px;
72 display: flex;
73 align-items: center;
74 gap: 32px;
75}
76
77.top-nav-logo {
78 display: flex;
79 align-items: center;
80 gap: 10px;
81 text-decoration: none;
82 color: var(--text-primary);
83 font-weight: 700;
84 font-size: 1.1rem;
85 flex-shrink: 0;
86}
87
88.top-nav-logo svg {
89 width: 26px;
90 height: 26px;
91 transition: color 0.2s;
92 color: var(--accent);
93}
94
95.top-nav-logo:hover svg {
96 color: var(--accent);
97}
98
99.top-nav-links {
100 display: flex;
101 align-items: center;
102 gap: 4px;
103 flex: 1;
104}
105
106.top-nav-link {
107 padding: 8px 14px;
108 color: var(--text-secondary);
109 text-decoration: none;
110 font-size: 0.9rem;
111 font-weight: 500;
112 border-radius: var(--radius-md);
113 transition: all 0.15s;
114}
115
116.top-nav-link:hover {
117 color: var(--text-primary);
118 background: var(--bg-hover);
119}
120
121.top-nav-link.active {
122 color: var(--text-primary);
123 background: var(--bg-tertiary);
124}
125
126.top-nav-link.extension-link {
127 display: flex;
128 align-items: center;
129 gap: 6px;
130}
131
132.top-nav-actions {
133 display: flex;
134 align-items: center;
135 gap: 8px;
136}
137
138.top-nav-icon-btn {
139 display: flex;
140 align-items: center;
141 justify-content: center;
142 width: 36px;
143 height: 36px;
144 border-radius: var(--radius-md);
145 background: transparent;
146 border: none;
147 color: var(--text-secondary);
148 cursor: pointer;
149 transition: all 0.15s;
150 position: relative;
151 text-decoration: none;
152}
153
154.top-nav-icon-btn:hover {
155 background: var(--bg-hover);
156 color: var(--text-primary);
157}
158
159.notif-dot {
160 position: absolute;
161 top: 6px;
162 right: 6px;
163 width: 8px;
164 height: 8px;
165 background: var(--accent);
166 border-radius: 50%;
167 border: 2px solid var(--bg-primary);
168}
169
170.top-nav-new-btn {
171 display: flex;
172 align-items: center;
173 gap: 6px;
174 padding: 8px 16px;
175 background: var(--accent);
176 color: var(--bg-primary);
177 border-radius: var(--radius-md);
178 font-size: 0.875rem;
179 font-weight: 600;
180 text-decoration: none;
181 transition: all 0.15s;
182}
183
184.top-nav-new-btn:hover {
185 background: var(--accent-hover);
186}
187
188.top-nav-avatar {
189 width: 34px;
190 height: 34px;
191 border-radius: var(--radius-md);
192 background: var(--bg-tertiary);
193 border: none;
194 cursor: pointer;
195 overflow: hidden;
196 display: flex;
197 align-items: center;
198 justify-content: center;
199 color: var(--text-secondary);
200 font-size: 0.8rem;
201 font-weight: 600;
202 transition: opacity 0.15s;
203}
204
205.top-nav-avatar:hover {
206 opacity: 0.85;
207}
208
209.top-nav-avatar img {
210 width: 100%;
211 height: 100%;
212 object-fit: cover;
213}
214
215.top-nav-mobile-toggle {
216 display: none;
217 align-items: center;
218 justify-content: center;
219 width: 40px;
220 height: 40px;
221 border: none;
222 background: transparent;
223 color: var(--text-primary);
224 cursor: pointer;
225}
226
227.top-nav-dropdown {
228 position: relative;
229}
230
231.dropdown-menu {
232 position: absolute;
233 top: calc(100% + 8px);
234 min-width: 200px;
235 background: var(--bg-elevated);
236 border: 1px solid var(--border);
237 border-radius: var(--radius-lg);
238 padding: 6px;
239 box-shadow: var(--shadow-lg);
240 z-index: 200;
241}
242
243.dropdown-right {
244 right: 0;
245}
246
247.dropdown-item {
248 display: flex;
249 align-items: center;
250 gap: 10px;
251 width: 100%;
252 padding: 10px 12px;
253 border-radius: var(--radius-md);
254 color: var(--text-secondary);
255 font-size: 0.875rem;
256 font-weight: 500;
257 text-decoration: none;
258 transition: all 0.15s;
259 background: none;
260 border: none;
261 cursor: pointer;
262 text-align: left;
263}
264
265.dropdown-item:hover {
266 background: var(--bg-hover);
267 color: var(--text-primary);
268}
269
270.dropdown-item.danger:hover {
271 background: rgba(217, 119, 102, 0.12);
272 color: var(--error);
273}
274
275.dropdown-external {
276 margin-left: auto;
277 opacity: 0.4;
278}
279
280.tangled-icon-wrapper {
281 width: 16px;
282 height: 16px;
283 display: flex;
284 align-items: center;
285 justify-content: center;
286}
287
288.tangled-icon-wrapper img {
289 width: 16px;
290 height: 16px;
291 filter: grayscale(100%) brightness(1.5);
292 opacity: 0.6;
293 transition: all 0.15s;
294}
295
296.dropdown-item:hover .tangled-icon-wrapper img {
297 opacity: 0.9;
298}
299
300[data-theme="light"] .tangled-icon-wrapper img {
301 filter: grayscale(100%) brightness(0) invert(0.35);
302 opacity: 1;
303}
304
305[data-theme="light"] .dropdown-item:hover .tangled-icon-wrapper img {
306 filter: grayscale(100%) brightness(0) invert(0.1);
307 opacity: 1;
308}
309
310.dropdown-divider {
311 height: 1px;
312 background: var(--border);
313 margin: 6px 0;
314}
315
316.dropdown-user-info {
317 padding: 8px 12px;
318 display: flex;
319 flex-direction: column;
320 gap: 2px;
321}
322
323.dropdown-user-name {
324 font-weight: 600;
325 color: var(--text-primary);
326 font-size: 0.9rem;
327}
328
329.dropdown-user-handle {
330 color: var(--text-tertiary);
331 font-size: 0.8rem;
332}
333
334.main-content {
335 width: 100%;
336 padding: 0;
337 overflow-y: auto;
338 height: 100%;
339 scrollbar-width: thin;
340 scrollbar-color: var(--bg-hover) transparent;
341}
342
343.main-content > * {
344 max-width: 800px;
345 margin: 0 auto;
346 padding: 32px 32px 80px;
347}
348
349.main-content::-webkit-scrollbar {
350 width: 8px;
351}
352
353.main-content::-webkit-scrollbar-track {
354 background: var(--bg-secondary);
355}
356
357.main-content::-webkit-scrollbar-thumb {
358 background: var(--bg-hover);
359 border-radius: var(--radius-full);
360}
361
362.main-content::-webkit-scrollbar-thumb:hover {
363 background: var(--text-tertiary);
364}
365
366.mobile-menu {
367 display: none;
368 position: absolute;
369 top: 100%;
370 left: 0;
371 right: 0;
372 background: var(--bg-secondary);
373 border-bottom: 1px solid var(--border);
374 padding: 12px 16px;
375}
376
377.mobile-menu-link {
378 display: flex;
379 align-items: center;
380 gap: 12px;
381 padding: 12px 16px;
382 color: var(--text-secondary);
383 text-decoration: none;
384 font-size: 0.95rem;
385 font-weight: 500;
386 border-radius: var(--radius-md);
387 transition: all 0.15s;
388}
389
390.mobile-menu-link:hover,
391.mobile-menu-link.active {
392 background: var(--bg-hover);
393 color: var(--text-primary);
394}
395
396.mobile-menu-link.active {
397 color: var(--accent);
398}
399
400.mobile-menu-divider {
401 height: 1px;
402 background: var(--border);
403 margin: 8px 0;
404}
405
406.notification-badge {
407 background: var(--accent);
408 color: var(--bg-primary);
409 font-size: 0.7rem;
410 font-weight: 700;
411 padding: 2px 6px;
412 border-radius: var(--radius-full);
413 margin-left: auto;
414}
415
416.mobile-bottom-nav {
417 display: none;
418 position: fixed;
419 bottom: 0;
420 left: 0;
421 right: 0;
422 background: var(--nav-bg);
423 backdrop-filter: blur(12px);
424 -webkit-backdrop-filter: blur(12px);
425 border-top: 1px solid var(--border);
426 padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
427 z-index: 100;
428}
429
430.mobile-bottom-nav {
431 display: none;
432 justify-content: space-around;
433 align-items: center;
434}
435
436.mobile-bottom-nav-item {
437 display: flex;
438 flex: 1;
439 flex-direction: column;
440 align-items: center;
441 justify-content: center;
442 gap: 4px;
443 padding: 6px 0;
444 color: var(--text-tertiary);
445 text-decoration: none;
446 font-size: 0.65rem;
447 font-weight: 500;
448 transition: color 0.15s;
449 min-width: 0;
450}
451
452.mobile-bottom-nav-item.active {
453 color: var(--accent);
454}
455
456.mobile-bottom-nav-item:active {
457 transform: scale(0.95);
458}
459
460.mobile-bottom-nav-new {
461 padding: 6px 0;
462}
463
464.mobile-nav-new-btn {
465 display: flex;
466 align-items: center;
467 justify-content: center;
468 width: 44px;
469 height: 44px;
470 background: var(--accent);
471 color: var(--bg-primary);
472 border-radius: var(--radius-full);
473 box-shadow: var(--shadow-md);
474}
475
476.mobile-nav-avatar {
477 width: 24px;
478 height: 24px;
479 border-radius: var(--radius-full);
480 object-fit: cover;
481}
482
483.ios-shortcut-banner {
484 display: none;
485 position: relative;
486 padding: 20px;
487 margin-bottom: 12px;
488 text-align: center;
489}
490
491.ios-shortcut-banner-close {
492 position: absolute;
493 top: 8px;
494 right: 8px;
495 background: none;
496 border: none;
497 color: var(--text-tertiary);
498 cursor: pointer;
499 padding: 6px;
500 display: flex;
501 align-items: center;
502 justify-content: center;
503 opacity: 0.5;
504 transition: opacity 0.15s;
505}
506
507.ios-shortcut-banner-close:hover {
508 opacity: 1;
509}
510
511.ios-shortcut-banner-content {
512 display: flex;
513 flex-direction: column;
514 align-items: center;
515 gap: 12px;
516}
517
518.ios-shortcut-banner-icon {
519 display: none;
520}
521
522.ios-shortcut-banner-text {
523 text-align: center;
524}
525
526.ios-shortcut-banner-text strong {
527 display: none;
528}
529
530.ios-shortcut-banner-text p {
531 font-size: 0.8rem;
532 color: var(--text-tertiary);
533 margin: 0;
534 line-height: 1.4;
535}
536
537.ios-shortcut-banner-btn {
538 display: inline-flex;
539 align-items: center;
540 gap: 6px;
541 padding: 10px 20px;
542 background: transparent;
543 color: var(--text-secondary);
544 font-size: 0.85rem;
545 font-weight: 500;
546 border: 1px solid var(--border);
547 border-radius: 100px;
548 text-decoration: none;
549 transition: all 0.15s;
550}
551
552.ios-shortcut-banner-btn:hover {
553 background: var(--bg-hover);
554 color: var(--text-primary);
555}
556
557@media (max-width: 768px) {
558 .ios-shortcut-banner {
559 display: block;
560 }
561}
562
563@media (max-width: 768px) {
564 .top-nav {
565 display: none;
566 }
567
568 .mobile-bottom-nav {
569 display: flex;
570 }
571
572 .main-content {
573 padding: 16px 12px 100px;
574 }
575
576 .main-content > * {
577 padding: 0;
578 }
579
580 .feed-container {
581 border-radius: var(--radius-md);
582 padding: 4px;
583 }
584}
585
586@media (max-width: 480px) {
587 .main-content {
588 padding: 16px 12px 100px;
589 }
590
591 .page-title {
592 font-size: 1.25rem;
593 }
594
595 .page-description {
596 font-size: 0.85rem;
597 }
598}
599
600.mobile-nav-overlay {
601 position: fixed;
602 inset: 0;
603 background: rgba(0, 0, 0, 0.5);
604 z-index: 150;
605 backdrop-filter: blur(2px);
606 -webkit-backdrop-filter: blur(2px);
607 animation: fadeIn 0.15s ease-out;
608}
609
610.mobile-nav-menu {
611 position: fixed;
612 bottom: calc(70px + env(safe-area-inset-bottom));
613 right: 12px;
614 width: 250px;
615 background: var(--bg-elevated);
616 border: 1px solid var(--border);
617 border-radius: var(--radius-xl);
618 padding: 6px;
619 z-index: 151;
620 box-shadow: var(--shadow-2xl);
621 animation: mobileMenuSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
622 display: flex;
623 flex-direction: column;
624 gap: 2px;
625}
626
627@keyframes mobileMenuSlide {
628 from {
629 opacity: 0;
630 transform: translateY(20px) scale(0.95);
631 }
632
633 to {
634 opacity: 1;
635 transform: translateY(0) scale(1);
636 }
637}
638
639.mobile-menu-item {
640 display: flex;
641 align-items: center;
642 gap: 12px;
643 padding: 12px 14px;
644 color: var(--text-secondary);
645 text-decoration: none;
646 font-size: 0.95rem;
647 font-weight: 500;
648 border-radius: var(--radius-md);
649 transition: all 0.1s;
650 background: transparent;
651 border: none;
652 width: 100%;
653 text-align: left;
654 cursor: pointer;
655}
656
657.mobile-menu-item:hover,
658.mobile-menu-item:active {
659 background: var(--bg-hover);
660 color: var(--text-primary);
661}
662
663.mobile-menu-item svg {
664 opacity: 0.8;
665}
666
667.mobile-menu-item.active {
668 background: var(--bg-tertiary);
669 color: var(--accent);
670}
671
672.mobile-menu-item.danger {
673 color: var(--error);
674}
675
676.mobile-menu-item.danger:hover {
677 background: rgba(239, 68, 68, 0.1);
678}
679
680.mobile-menu-profile-card {
681 display: flex;
682 align-items: center;
683 gap: 12px;
684 padding: 12px;
685 background: var(--bg-tertiary);
686 border-radius: var(--radius-lg);
687 margin-bottom: 6px;
688 text-decoration: none;
689 border: 1px solid transparent;
690}
691
692.mobile-menu-profile-card:active {
693 background: var(--bg-hover);
694 transform: scale(0.98);
695}
696
697.mobile-menu-badge {
698 margin-left: auto;
699 background: var(--accent);
700 color: white;
701 font-size: 0.75rem;
702 font-weight: 700;
703 padding: 2px 8px;
704 border-radius: 99px;
705}