Retro Bulletin Board Systems on atproto. Web app and TUI.
lazy mirror of alyraffauf/atbbs
atbbs.xyz
forums
python
tui
atproto
bbs
web: add light mode
+87
-59
+2
-1
web/index.html
+2
-1
web/index.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
6
<title>atbbs</title>
7
7
<meta name="description" content="Bulletin boards on the Atmosphere." />
8
-
<meta name="theme-color" content="#0a0a0a" />
8
+
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
9
+
<meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)" />
9
10
<meta name="mobile-web-app-capable" content="yes" />
10
11
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
11
12
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+49
-45
web/public/hero.svg
+49
-45
web/public/hero.svg
···
1
1
<svg xmlns="http://www.w3.org/2000/svg" width="276" height="96" viewBox="0 0 276 96">
2
+
<style>
3
+
.t { fill: #262626; }
4
+
@media (prefers-color-scheme: dark) { .t { fill: #e5e5e5; } }
5
+
</style>
2
6
<rect x="12" y="0" width="12" height="12" fill="#d97706"/>
3
7
<rect x="24" y="0" width="12" height="12" fill="#d97706"/>
4
8
<rect x="36" y="0" width="12" height="12" fill="#d97706"/>
5
-
<rect x="72" y="0" width="12" height="12" fill="#e5e5e5"/>
6
-
<rect x="144" y="0" width="12" height="12" fill="#e5e5e5"/>
9
+
<rect x="72" y="0" width="12" height="12" class="t"/>
10
+
<rect x="144" y="0" width="12" height="12" class="t"/>
7
11
<rect x="0" y="12" width="12" height="12" fill="#d97706"/>
8
12
<rect x="48" y="12" width="12" height="12" fill="#d97706"/>
9
-
<rect x="72" y="12" width="12" height="12" fill="#e5e5e5"/>
10
-
<rect x="144" y="12" width="12" height="12" fill="#e5e5e5"/>
13
+
<rect x="72" y="12" width="12" height="12" class="t"/>
14
+
<rect x="144" y="12" width="12" height="12" class="t"/>
11
15
<rect x="0" y="24" width="12" height="12" fill="#d97706"/>
12
16
<rect x="24" y="24" width="12" height="12" fill="#d97706"/>
13
17
<rect x="48" y="24" width="12" height="12" fill="#d97706"/>
14
-
<rect x="72" y="24" width="12" height="12" fill="#e5e5e5"/>
15
-
<rect x="84" y="24" width="12" height="12" fill="#e5e5e5"/>
16
-
<rect x="96" y="24" width="12" height="12" fill="#e5e5e5"/>
17
-
<rect x="108" y="24" width="12" height="12" fill="#e5e5e5"/>
18
-
<rect x="144" y="24" width="12" height="12" fill="#e5e5e5"/>
19
-
<rect x="156" y="24" width="12" height="12" fill="#e5e5e5"/>
20
-
<rect x="168" y="24" width="12" height="12" fill="#e5e5e5"/>
21
-
<rect x="180" y="24" width="12" height="12" fill="#e5e5e5"/>
22
-
<rect x="228" y="24" width="12" height="12" fill="#e5e5e5"/>
23
-
<rect x="240" y="24" width="12" height="12" fill="#e5e5e5"/>
24
-
<rect x="252" y="24" width="12" height="12" fill="#e5e5e5"/>
25
-
<rect x="264" y="24" width="12" height="12" fill="#e5e5e5"/>
18
+
<rect x="72" y="24" width="12" height="12" class="t"/>
19
+
<rect x="84" y="24" width="12" height="12" class="t"/>
20
+
<rect x="96" y="24" width="12" height="12" class="t"/>
21
+
<rect x="108" y="24" width="12" height="12" class="t"/>
22
+
<rect x="144" y="24" width="12" height="12" class="t"/>
23
+
<rect x="156" y="24" width="12" height="12" class="t"/>
24
+
<rect x="168" y="24" width="12" height="12" class="t"/>
25
+
<rect x="180" y="24" width="12" height="12" class="t"/>
26
+
<rect x="228" y="24" width="12" height="12" class="t"/>
27
+
<rect x="240" y="24" width="12" height="12" class="t"/>
28
+
<rect x="252" y="24" width="12" height="12" class="t"/>
29
+
<rect x="264" y="24" width="12" height="12" class="t"/>
26
30
<rect x="0" y="36" width="12" height="12" fill="#d97706"/>
27
31
<rect x="24" y="36" width="12" height="12" fill="#d97706"/>
28
32
<rect x="36" y="36" width="12" height="12" fill="#d97706"/>
29
33
<rect x="48" y="36" width="12" height="12" fill="#d97706"/>
30
-
<rect x="72" y="36" width="12" height="12" fill="#e5e5e5"/>
31
-
<rect x="120" y="36" width="12" height="12" fill="#e5e5e5"/>
32
-
<rect x="144" y="36" width="12" height="12" fill="#e5e5e5"/>
33
-
<rect x="192" y="36" width="12" height="12" fill="#e5e5e5"/>
34
-
<rect x="216" y="36" width="12" height="12" fill="#e5e5e5"/>
34
+
<rect x="72" y="36" width="12" height="12" class="t"/>
35
+
<rect x="120" y="36" width="12" height="12" class="t"/>
36
+
<rect x="144" y="36" width="12" height="12" class="t"/>
37
+
<rect x="192" y="36" width="12" height="12" class="t"/>
38
+
<rect x="216" y="36" width="12" height="12" class="t"/>
35
39
<rect x="0" y="48" width="12" height="12" fill="#d97706"/>
36
40
<rect x="24" y="48" width="12" height="12" fill="#d97706"/>
37
41
<rect x="36" y="48" width="12" height="12" fill="#d97706"/>
38
-
<rect x="72" y="48" width="12" height="12" fill="#e5e5e5"/>
39
-
<rect x="120" y="48" width="12" height="12" fill="#e5e5e5"/>
40
-
<rect x="144" y="48" width="12" height="12" fill="#e5e5e5"/>
41
-
<rect x="192" y="48" width="12" height="12" fill="#e5e5e5"/>
42
-
<rect x="228" y="48" width="12" height="12" fill="#e5e5e5"/>
43
-
<rect x="240" y="48" width="12" height="12" fill="#e5e5e5"/>
44
-
<rect x="252" y="48" width="12" height="12" fill="#e5e5e5"/>
42
+
<rect x="72" y="48" width="12" height="12" class="t"/>
43
+
<rect x="120" y="48" width="12" height="12" class="t"/>
44
+
<rect x="144" y="48" width="12" height="12" class="t"/>
45
+
<rect x="192" y="48" width="12" height="12" class="t"/>
46
+
<rect x="228" y="48" width="12" height="12" class="t"/>
47
+
<rect x="240" y="48" width="12" height="12" class="t"/>
48
+
<rect x="252" y="48" width="12" height="12" class="t"/>
45
49
<rect x="0" y="60" width="12" height="12" fill="#d97706"/>
46
-
<rect x="72" y="60" width="12" height="12" fill="#e5e5e5"/>
47
-
<rect x="120" y="60" width="12" height="12" fill="#e5e5e5"/>
48
-
<rect x="144" y="60" width="12" height="12" fill="#e5e5e5"/>
49
-
<rect x="192" y="60" width="12" height="12" fill="#e5e5e5"/>
50
-
<rect x="264" y="60" width="12" height="12" fill="#e5e5e5"/>
50
+
<rect x="72" y="60" width="12" height="12" class="t"/>
51
+
<rect x="120" y="60" width="12" height="12" class="t"/>
52
+
<rect x="144" y="60" width="12" height="12" class="t"/>
53
+
<rect x="192" y="60" width="12" height="12" class="t"/>
54
+
<rect x="264" y="60" width="12" height="12" class="t"/>
51
55
<rect x="12" y="72" width="12" height="12" fill="#d97706"/>
52
56
<rect x="24" y="72" width="12" height="12" fill="#d97706"/>
53
57
<rect x="36" y="72" width="12" height="12" fill="#d97706"/>
54
-
<rect x="72" y="72" width="12" height="12" fill="#e5e5e5"/>
55
-
<rect x="84" y="72" width="12" height="12" fill="#e5e5e5"/>
56
-
<rect x="96" y="72" width="12" height="12" fill="#e5e5e5"/>
57
-
<rect x="108" y="72" width="12" height="12" fill="#e5e5e5"/>
58
-
<rect x="144" y="72" width="12" height="12" fill="#e5e5e5"/>
59
-
<rect x="156" y="72" width="12" height="12" fill="#e5e5e5"/>
60
-
<rect x="168" y="72" width="12" height="12" fill="#e5e5e5"/>
61
-
<rect x="180" y="72" width="12" height="12" fill="#e5e5e5"/>
62
-
<rect x="216" y="72" width="12" height="12" fill="#e5e5e5"/>
63
-
<rect x="228" y="72" width="12" height="12" fill="#e5e5e5"/>
64
-
<rect x="240" y="72" width="12" height="12" fill="#e5e5e5"/>
65
-
<rect x="252" y="72" width="12" height="12" fill="#e5e5e5"/>
58
+
<rect x="72" y="72" width="12" height="12" class="t"/>
59
+
<rect x="84" y="72" width="12" height="12" class="t"/>
60
+
<rect x="96" y="72" width="12" height="12" class="t"/>
61
+
<rect x="108" y="72" width="12" height="12" class="t"/>
62
+
<rect x="144" y="72" width="12" height="12" class="t"/>
63
+
<rect x="156" y="72" width="12" height="12" class="t"/>
64
+
<rect x="168" y="72" width="12" height="12" class="t"/>
65
+
<rect x="180" y="72" width="12" height="12" class="t"/>
66
+
<rect x="216" y="72" width="12" height="12" class="t"/>
67
+
<rect x="228" y="72" width="12" height="12" class="t"/>
68
+
<rect x="240" y="72" width="12" height="12" class="t"/>
69
+
<rect x="252" y="72" width="12" height="12" class="t"/>
66
70
</svg>
+1
-1
web/src/components/Layout.tsx
+1
-1
web/src/components/Layout.tsx
···
75
75
<Outlet />
76
76
</main>
77
77
<footer className="border-t border-neutral-800 mt-auto">
78
-
<div className="max-w-2xl mx-auto px-4 py-6 flex items-center justify-between text-xs text-neutral-500">
78
+
<div className="max-w-2xl mx-auto px-4 py-4 flex items-center justify-between text-xs text-neutral-500">
79
79
<span>
80
80
made by{" "}
81
81
<a
+2
-2
web/src/components/ListLink.tsx
+2
-2
web/src/components/ListLink.tsx
···
10
10
return (
11
11
<Link
12
12
to={to}
13
-
className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900 group"
13
+
className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-800 group"
14
14
>
15
-
<span className="text-neutral-200 group-hover:text-white">{name}</span>
15
+
<span className="text-neutral-200">{name}</span>
16
16
{description && (
17
17
<span className="text-neutral-500 text-xs sm:text-sm">
18
18
{description}
+2
-2
web/src/components/ThreadLink.tsx
+2
-2
web/src/components/ThreadLink.tsx
···
16
16
return (
17
17
<Link
18
18
to={to}
19
-
className="block px-3 py-4 -mx-3 rounded hover:bg-neutral-900 group"
19
+
className="block px-3 py-4 -mx-3 rounded hover:bg-neutral-800 group"
20
20
>
21
21
<div className="flex items-baseline justify-between gap-4">
22
-
<span className="text-neutral-300 group-hover:text-white truncate">
22
+
<span className="text-neutral-300 truncate">
23
23
{title}
24
24
</span>
25
25
<span className="shrink-0 text-xs text-neutral-500">{meta}</span>
+23
web/src/index.css
+23
web/src/index.css
···
2
2
@plugin "@tailwindcss/typography";
3
3
@source "./";
4
4
5
+
@media (prefers-color-scheme: light) {
6
+
:root {
7
+
color-scheme: light;
8
+
--color-neutral-950: #fafafa;
9
+
--color-neutral-900: #f5f5f5;
10
+
--color-neutral-800: #e5e5e5;
11
+
--color-neutral-700: #d4d4d4;
12
+
--color-neutral-600: #a3a3a3;
13
+
--color-neutral-500: #737373;
14
+
--color-neutral-400: #525252;
15
+
--color-neutral-300: #404040;
16
+
--color-neutral-200: #171717;
17
+
--color-red-400: #dc2626;
18
+
--color-red-500: #b91c1c;
19
+
}
20
+
}
21
+
22
+
@media (prefers-color-scheme: dark) {
23
+
:root {
24
+
color-scheme: dark;
25
+
}
26
+
}
27
+
5
28
@media screen and (max-width: 768px) {
6
29
input,
7
30
textarea,
+4
-4
web/src/pages/Account.tsx
+4
-4
web/src/pages/Account.tsx
···
111
111
<div className="grid grid-cols-2 gap-3 max-w-md">
112
112
<Link
113
113
to={`/bbs/${user.handle}`}
114
-
className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700"
114
+
className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-neutral-200 hover:border-neutral-700"
115
115
>
116
116
<div className="text-neutral-200 mb-1">Browse</div>
117
117
<div className="text-xs text-neutral-500">View your BBS.</div>
118
118
</Link>
119
119
<Link
120
120
to="/account/edit"
121
-
className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700"
121
+
className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-neutral-200 hover:border-neutral-700"
122
122
>
123
123
<div className="text-neutral-200 mb-1">Edit</div>
124
124
<div className="text-xs text-neutral-500">
···
127
127
</Link>
128
128
<Link
129
129
to="/account/moderate"
130
-
className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700"
130
+
className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-neutral-200 hover:border-neutral-700"
131
131
>
132
132
<div className="text-neutral-200 mb-1">Moderate</div>
133
133
<div className="text-xs text-neutral-500">
···
181
181
<Link
182
182
key={m.replyUri}
183
183
to={url}
184
-
className="block border border-neutral-800/50 rounded p-4 mb-2 hover:bg-neutral-900"
184
+
className="block border border-neutral-800/50 rounded p-4 mb-2 hover:bg-neutral-800"
185
185
>
186
186
<div className="flex items-baseline justify-between mb-1">
187
187
<span className="text-neutral-300">{m.handle}</span>
+4
-4
web/src/pages/SysopModerate.tsx
+4
-4
web/src/pages/SysopModerate.tsx
···
86
86
<div
87
87
key={did}
88
88
title={did}
89
-
className="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900"
89
+
className="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-800"
90
90
>
91
91
<a
92
92
href={`https://pdsls.dev/at/${did}`}
93
93
target="_blank"
94
94
rel="noreferrer"
95
-
className="truncate text-neutral-300 hover:text-white"
95
+
className="truncate text-neutral-300 hover:text-neutral-200"
96
96
>
97
97
{bannedHandles[did] ?? did}
98
98
</a>
···
129
129
<div
130
130
key={p.uri}
131
131
title={p.uri}
132
-
className="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900"
132
+
className="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-800"
133
133
>
134
134
<a
135
135
href={`https://pdsls.dev/${p.uri}`}
136
136
target="_blank"
137
137
rel="noreferrer"
138
-
className="truncate text-neutral-300 hover:text-white"
138
+
className="truncate text-neutral-300 hover:text-neutral-200"
139
139
>
140
140
{p.handle} — {p.title || p.body}
141
141
</a>