margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
1:root {
2 --bg-primary: #09090b;
3 --bg-secondary: #0f0f12;
4 --bg-tertiary: #18181b;
5 --bg-card: #09090b;
6 --bg-elevated: #18181b;
7 --text-primary: #e4e4e7;
8 --text-secondary: #a1a1aa;
9 --text-tertiary: #71717a;
10 --border: #27272a;
11 --border-hover: #3f3f46;
12 --accent: #6366f1;
13 --accent-hover: #4f46e5;
14 --accent-subtle: rgba(99, 102, 241, 0.1);
15 --accent-text: #818cf8;
16 --success: #10b981;
17 --error: #ef4444;
18 --warning: #f59e0b;
19 --info: #3b82f6;
20 --radius-sm: 4px;
21 --radius-md: 6px;
22 --radius-lg: 8px;
23 --radius-full: 9999px;
24 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
25 --shadow-md:
26 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
27 --shadow-lg:
28 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
29 --font-sans:
30 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
31 --font-mono:
32 "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas, monospace;
33}
34
35[data-theme="light"] {
36 --bg-primary: #ffffff;
37 --bg-secondary: #f4f4f5;
38 --bg-tertiary: #e4e4e7;
39 --bg-card: #ffffff;
40 --bg-elevated: #f4f4f5;
41 --text-primary: #18181b;
42 --text-secondary: #52525b;
43 --text-tertiary: #71717a;
44 --border: #e4e4e7;
45 --border-hover: #d4d4d8;
46 --accent: #4f46e5;
47 --accent-hover: #4338ca;
48 --accent-subtle: rgba(79, 70, 229, 0.1);
49 --accent-text: #4f46e5;
50 --success: #059669;
51 --error: #dc2626;
52 --warning: #d97706;
53 --info: #2563eb;
54 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
55 --shadow-md:
56 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
57}
58
59* {
60 margin: 0;
61 padding: 0;
62 box-sizing: border-box;
63}
64
65html {
66 font-size: 16px;
67 -webkit-text-size-adjust: 100%;
68 overflow-x: hidden;
69}
70
71body {
72 font-family: var(--font-sans);
73 background: var(--bg-primary);
74 color: var(--text-primary);
75 line-height: 1.5;
76 min-height: 100vh;
77 -webkit-font-smoothing: antialiased;
78 -moz-osx-font-smoothing: grayscale;
79 overflow-x: hidden;
80 max-width: 100vw;
81}
82
83a {
84 color: inherit;
85 text-decoration: none;
86 transition: color 0.15s ease;
87}
88
89h1,
90h2,
91h3,
92h4,
93h5,
94h6 {
95 font-weight: 600;
96 line-height: 1.25;
97 letter-spacing: -0.025em;
98 color: var(--text-primary);
99}
100
101p {
102 color: var(--text-secondary);
103}
104
105button {
106 font-family: inherit;
107 cursor: pointer;
108 border: none;
109 background: none;
110}
111
112input,
113textarea,
114select {
115 font-family: inherit;
116 font-size: inherit;
117 color: var(--text-primary);
118}
119
120::selection {
121 background: var(--accent-subtle);
122 color: var(--accent-text);
123}
124
125.text-sm {
126 font-size: 0.875rem;
127}
128
129.text-xs {
130 font-size: 0.75rem;
131}
132
133.font-medium {
134 font-weight: 500;
135}
136
137.font-semibold {
138 font-weight: 600;
139}
140
141.text-muted {
142 color: var(--text-secondary);
143}
144
145.text-faint {
146 color: var(--text-tertiary);
147}
148
149::-webkit-scrollbar {
150 width: 10px;
151 height: 10px;
152}
153
154::-webkit-scrollbar-track {
155 background: transparent;
156}
157
158::-webkit-scrollbar-thumb {
159 background: var(--border);
160 border-radius: 5px;
161 border: 2px solid var(--bg-primary);
162}
163
164::-webkit-scrollbar-thumb:hover {
165 background: var(--border-hover);
166}