Simple vanilia JS vite project with ATProto OAuth out of the box
baileytownsend.dev
1:root {
2 font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3 line-height: 1.5;
4 font-weight: 400;
5
6 color-scheme: light dark;
7 color: rgba(255, 255, 255, 0.87);
8 background-color: #242424;
9
10 font-synthesis: none;
11 text-rendering: optimizeLegibility;
12 -webkit-font-smoothing: antialiased;
13 -moz-osx-font-smoothing: grayscale;
14}
15
16a {
17 font-weight: 500;
18 color: #14b8a6;
19 text-decoration: inherit;
20}
21a:hover {
22 color: #0d9488;
23}
24
25body {
26 margin: 0;
27 display: flex;
28 place-items: center;
29 min-width: 320px;
30 min-height: 100vh;
31}
32
33h1 {
34 font-size: 2em;
35 line-height: 1.1;
36 margin-bottom: 1.5em;
37}
38
39#app {
40 max-width: 400px;
41 margin: 0 auto;
42 padding: 2rem;
43}
44
45.container {
46 text-align: center;
47}
48
49.form-group {
50 margin-bottom: 1rem;
51 text-align: left;
52}
53
54.form-group label {
55 display: block;
56 margin-bottom: 0.5rem;
57 font-weight: 500;
58}
59
60.form-group input {
61 width: 100%;
62 padding: 0.6em;
63 font-size: 1em;
64 font-family: inherit;
65 border: 1px solid #444;
66 border-radius: 4px;
67 background-color: #1a1a1a;
68 color: inherit;
69 box-sizing: border-box;
70}
71
72.form-group input:focus {
73 outline: none;
74 border-color: #14b8a6;
75}
76
77.error {
78 color: #ff6b6b;
79 font-size: 0.9em;
80 margin-top: 0.5rem;
81 min-height: 1.2em;
82}
83
84.profile-card {
85 background-color: #1a1a1a;
86 padding: 1.5rem;
87 border-radius: 8px;
88 margin: 2rem 0;
89 display: flex;
90 align-items: center;
91 gap: 1rem;
92 text-align: left;
93}
94
95.profile-avatar {
96 width: 80px;
97 height: 80px;
98 border-radius: 50%;
99 object-fit: cover;
100 flex-shrink: 0;
101}
102
103.profile-info {
104 flex: 1;
105}
106
107.profile-name {
108 margin: 0 0 0.25rem 0;
109 font-size: 1.3em;
110 font-weight: 600;
111}
112
113.profile-handle {
114 margin: 0 0 0.75rem 0;
115 color: #888;
116 font-size: 0.9em;
117}
118
119.profile-stats {
120 display: flex;
121 gap: 1.5rem;
122 font-size: 0.9em;
123}
124
125.profile-stats span {
126 color: #888;
127}
128
129.profile-stats strong {
130 color: inherit;
131 font-weight: 600;
132}
133
134.notifications-section {
135 margin: 2rem 0;
136 text-align: left;
137}
138
139.notifications-section h3 {
140 font-size: 1.2em;
141 margin: 0 0 1rem 0;
142 font-weight: 600;
143}
144
145.notifications-list {
146 background-color: #1a1a1a;
147 border-radius: 8px;
148 overflow: hidden;
149}
150
151.notification-item {
152 display: flex;
153 align-items: flex-start;
154 gap: 0.75rem;
155 padding: 1rem;
156 border-bottom: 1px solid #333;
157}
158
159.notification-item:last-child {
160 border-bottom: none;
161}
162
163.notification-item.unread {
164 background-color: rgba(20, 184, 166, 0.1);
165}
166
167.notification-avatar {
168 width: 40px;
169 height: 40px;
170 border-radius: 50%;
171 object-fit: cover;
172 flex-shrink: 0;
173}
174
175.notification-content {
176 flex: 1;
177}
178
179.notification-text {
180 margin: 0 0 0.25rem 0;
181 font-size: 0.95em;
182 line-height: 1.4;
183}
184
185.notification-text strong {
186 font-weight: 600;
187}
188
189.notification-time {
190 margin: 0;
191 font-size: 0.85em;
192 color: #888;
193}
194
195.session-info {
196 background-color: #1a1a1a;
197 padding: 1.5rem;
198 border-radius: 8px;
199 margin: 2rem 0;
200 text-align: left;
201}
202
203.session-info p {
204 margin: 0.5rem 0;
205 word-break: break-all;
206}
207
208button {
209 border-radius: 8px;
210 border: 1px solid transparent;
211 padding: 0.6em 1.2em;
212 font-size: 1em;
213 font-weight: 500;
214 font-family: inherit;
215 background-color: #14b8a6;
216 color: white;
217 cursor: pointer;
218 transition: background-color 0.25s;
219 width: 100%;
220 margin-top: 1rem;
221}
222button:hover {
223 background-color: #0d9488;
224}
225button:focus,
226button:focus-visible {
227 outline: 4px auto -webkit-focus-ring-color;
228}
229
230@media (prefers-color-scheme: light) {
231 :root {
232 color: #213547;
233 background-color: #ffffff;
234 }
235 a:hover {
236 color: #2dd4bf;
237 }
238 .form-group input {
239 background-color: #f9f9f9;
240 border-color: #ddd;
241 }
242 .profile-card,
243 .notifications-list,
244 .session-info {
245 background-color: #f9f9f9;
246 }
247 .notification-item {
248 border-bottom-color: #e0e0e0;
249 }
250 .notification-item.unread {
251 background-color: rgba(20, 184, 166, 0.05);
252 }
253}