margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
1.feed {
2 display: flex;
3 flex-direction: column;
4 gap: 16px;
5}
6
7.feed-header {
8 display: flex;
9 align-items: center;
10 justify-content: space-between;
11 margin-bottom: 8px;
12}
13
14.feed-title {
15 font-size: 1.5rem;
16 font-weight: 700;
17}
18
19.feed-filters {
20 display: flex;
21 gap: 8px;
22 margin-bottom: 24px;
23 padding: 4px;
24 background: var(--bg-tertiary);
25 border-radius: var(--radius-lg);
26 width: fit-content;
27 max-width: 100%;
28 flex-wrap: wrap;
29}
30
31.filter-tab {
32 padding: 8px 16px;
33 font-size: 0.9rem;
34 font-weight: 500;
35 color: var(--text-secondary);
36 background: transparent;
37 border: none;
38 border-radius: var(--radius-md);
39 cursor: pointer;
40 transition: all 0.15s ease;
41}
42
43.filter-tab:hover {
44 color: var(--text-primary);
45 background: var(--bg-hover);
46}
47
48.filter-tab.active {
49 color: var(--text-primary);
50 background: var(--bg-card);
51 box-shadow: var(--shadow-sm);
52}
53
54.page-header {
55 margin-bottom: 32px;
56}
57
58.page-title {
59 font-size: 2rem;
60 font-weight: 700;
61 margin-bottom: 8px;
62}
63
64.page-description {
65 color: var(--text-secondary);
66 font-size: 1.1rem;
67}
68
69.url-input-wrapper {
70 margin-bottom: 24px;
71}
72
73.url-input-container {
74 display: flex;
75 gap: 12px;
76}
77
78.url-input {
79 width: 100%;
80 padding: 16px;
81 background: var(--bg-secondary);
82 border: 1px solid var(--border);
83 border-radius: var(--radius-md);
84 color: var(--text-primary);
85 font-size: 1.1rem;
86 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
87 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
88}
89
90.url-input:focus {
91 outline: none;
92 border-color: var(--accent);
93 box-shadow: 0 0 0 4px var(--accent-subtle);
94 background: var(--bg-primary);
95}
96
97.url-input::placeholder {
98 color: var(--text-tertiary);
99}
100
101.url-results-header {
102 display: flex;
103 align-items: center;
104 justify-content: space-between;
105 margin-bottom: 16px;
106 flex-wrap: wrap;
107 gap: 12px;
108}
109
110.back-link {
111 display: inline-flex;
112 align-items: center;
113 gap: 8px;
114 color: var(--text-secondary);
115 font-size: 0.9rem;
116 text-decoration: none;
117 margin-bottom: 24px;
118 transition: color 0.15s;
119}
120
121.back-link:hover {
122 color: var(--accent);
123}
124
125.new-page {
126 max-width: 600px;
127 margin: 0 auto;
128 display: flex;
129 flex-direction: column;
130 gap: 32px;
131}
132
133@media (max-width: 640px) {
134 .main-content {
135 padding: 16px 12px;
136 }
137
138 .page-title {
139 font-size: 1.5rem;
140 }
141}
142
143.user-url-page {
144 max-width: 800px;
145}
146
147.url-target-info {
148 display: flex;
149 flex-direction: column;
150 gap: 4px;
151 padding: 16px;
152 background: var(--bg-secondary);
153 border: 1px solid var(--border);
154 border-radius: var(--radius-md);
155 margin-bottom: 24px;
156}
157
158.url-target-label {
159 font-size: 0.875rem;
160 color: var(--text-secondary);
161}
162
163.url-target-link {
164 color: var(--accent);
165 font-size: 0.95rem;
166 word-break: break-all;
167 text-decoration: none;
168}
169
170.url-target-link:hover {
171 text-decoration: underline;
172}
173
174.share-notes-banner {
175 display: flex;
176 align-items: center;
177 justify-content: space-between;
178 gap: 16px;
179 padding: 12px 16px;
180 background: var(--accent-subtle);
181 border: 1px solid var(--accent);
182 border-radius: var(--radius-md);
183 margin-bottom: 16px;
184}
185
186.share-notes-info {
187 display: flex;
188 align-items: center;
189 gap: 8px;
190 color: var(--text-primary);
191 font-size: 0.9rem;
192}
193
194.share-notes-actions {
195 display: flex;
196 gap: 8px;
197}
198
199@media (max-width: 640px) {
200 .share-notes-banner {
201 flex-direction: column;
202 align-items: stretch;
203 }
204
205 .share-notes-actions {
206 justify-content: flex-end;
207 }
208}
209
210.feed-tab {
211 padding: 8px 16px;
212 font-size: 1rem;
213 font-weight: 500;
214 color: var(--text-secondary);
215 background: transparent;
216 border: none;
217 border-bottom: 2px solid transparent;
218 cursor: pointer;
219 transition: all 0.2s ease;
220 margin-bottom: -1px;
221}
222
223.feed-tab:hover {
224 color: var(--text-primary);
225}
226
227.feed-tab.active {
228 color: var(--text-primary);
229 border-bottom-color: var(--text-primary);
230 font-weight: 600;
231}
232
233.filter-pill {
234 padding: 6px 16px;
235 font-size: 0.9rem;
236 font-weight: 500;
237 color: var(--text-secondary);
238 background: var(--bg-tertiary);
239 border: 1px solid transparent;
240 border-radius: 999px;
241 cursor: pointer;
242 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
243}
244
245.filter-pill:hover {
246 background: var(--bg-secondary);
247 color: var(--text-primary);
248 border-color: var(--border);
249}
250
251.filter-pill.active {
252 background: var(--text-primary);
253 color: var(--bg-primary);
254 font-weight: 600;
255}