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/dark heros
+129
-61
+66
web/public/hero-dark.svg
+66
web/public/hero-dark.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="276" height="96" viewBox="0 0 276 96">
2
+
<rect x="12" y="0" width="12" height="12" fill="#d97706"/>
3
+
<rect x="24" y="0" width="12" height="12" fill="#d97706"/>
4
+
<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"/>
7
+
<rect x="0" y="12" width="12" height="12" fill="#d97706"/>
8
+
<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"/>
11
+
<rect x="0" y="24" width="12" height="12" fill="#d97706"/>
12
+
<rect x="24" y="24" width="12" height="12" fill="#d97706"/>
13
+
<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"/>
26
+
<rect x="0" y="36" width="12" height="12" fill="#d97706"/>
27
+
<rect x="24" y="36" width="12" height="12" fill="#d97706"/>
28
+
<rect x="36" y="36" width="12" height="12" fill="#d97706"/>
29
+
<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"/>
35
+
<rect x="0" y="48" width="12" height="12" fill="#d97706"/>
36
+
<rect x="24" y="48" width="12" height="12" fill="#d97706"/>
37
+
<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"/>
45
+
<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"/>
51
+
<rect x="12" y="72" width="12" height="12" fill="#d97706"/>
52
+
<rect x="24" y="72" width="12" height="12" fill="#d97706"/>
53
+
<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"/>
66
+
</svg>
+45
-49
web/public/hero.svg
+45
-49
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>
6
2
<rect x="12" y="0" width="12" height="12" fill="#d97706"/>
7
3
<rect x="24" y="0" width="12" height="12" fill="#d97706"/>
8
4
<rect x="36" y="0" width="12" height="12" fill="#d97706"/>
9
-
<rect x="72" y="0" width="12" height="12" class="t"/>
10
-
<rect x="144" y="0" width="12" height="12" class="t"/>
5
+
<rect x="72" y="0" width="12" height="12" fill="#262626"/>
6
+
<rect x="144" y="0" width="12" height="12" fill="#262626"/>
11
7
<rect x="0" y="12" width="12" height="12" fill="#d97706"/>
12
8
<rect x="48" y="12" width="12" height="12" fill="#d97706"/>
13
-
<rect x="72" y="12" width="12" height="12" class="t"/>
14
-
<rect x="144" y="12" width="12" height="12" class="t"/>
9
+
<rect x="72" y="12" width="12" height="12" fill="#262626"/>
10
+
<rect x="144" y="12" width="12" height="12" fill="#262626"/>
15
11
<rect x="0" y="24" width="12" height="12" fill="#d97706"/>
16
12
<rect x="24" y="24" width="12" height="12" fill="#d97706"/>
17
13
<rect x="48" y="24" width="12" height="12" fill="#d97706"/>
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"/>
14
+
<rect x="72" y="24" width="12" height="12" fill="#262626"/>
15
+
<rect x="84" y="24" width="12" height="12" fill="#262626"/>
16
+
<rect x="96" y="24" width="12" height="12" fill="#262626"/>
17
+
<rect x="108" y="24" width="12" height="12" fill="#262626"/>
18
+
<rect x="144" y="24" width="12" height="12" fill="#262626"/>
19
+
<rect x="156" y="24" width="12" height="12" fill="#262626"/>
20
+
<rect x="168" y="24" width="12" height="12" fill="#262626"/>
21
+
<rect x="180" y="24" width="12" height="12" fill="#262626"/>
22
+
<rect x="228" y="24" width="12" height="12" fill="#262626"/>
23
+
<rect x="240" y="24" width="12" height="12" fill="#262626"/>
24
+
<rect x="252" y="24" width="12" height="12" fill="#262626"/>
25
+
<rect x="264" y="24" width="12" height="12" fill="#262626"/>
30
26
<rect x="0" y="36" width="12" height="12" fill="#d97706"/>
31
27
<rect x="24" y="36" width="12" height="12" fill="#d97706"/>
32
28
<rect x="36" y="36" width="12" height="12" fill="#d97706"/>
33
29
<rect x="48" y="36" width="12" height="12" fill="#d97706"/>
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"/>
30
+
<rect x="72" y="36" width="12" height="12" fill="#262626"/>
31
+
<rect x="120" y="36" width="12" height="12" fill="#262626"/>
32
+
<rect x="144" y="36" width="12" height="12" fill="#262626"/>
33
+
<rect x="192" y="36" width="12" height="12" fill="#262626"/>
34
+
<rect x="216" y="36" width="12" height="12" fill="#262626"/>
39
35
<rect x="0" y="48" width="12" height="12" fill="#d97706"/>
40
36
<rect x="24" y="48" width="12" height="12" fill="#d97706"/>
41
37
<rect x="36" y="48" width="12" height="12" fill="#d97706"/>
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"/>
38
+
<rect x="72" y="48" width="12" height="12" fill="#262626"/>
39
+
<rect x="120" y="48" width="12" height="12" fill="#262626"/>
40
+
<rect x="144" y="48" width="12" height="12" fill="#262626"/>
41
+
<rect x="192" y="48" width="12" height="12" fill="#262626"/>
42
+
<rect x="228" y="48" width="12" height="12" fill="#262626"/>
43
+
<rect x="240" y="48" width="12" height="12" fill="#262626"/>
44
+
<rect x="252" y="48" width="12" height="12" fill="#262626"/>
49
45
<rect x="0" y="60" width="12" height="12" fill="#d97706"/>
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"/>
46
+
<rect x="72" y="60" width="12" height="12" fill="#262626"/>
47
+
<rect x="120" y="60" width="12" height="12" fill="#262626"/>
48
+
<rect x="144" y="60" width="12" height="12" fill="#262626"/>
49
+
<rect x="192" y="60" width="12" height="12" fill="#262626"/>
50
+
<rect x="264" y="60" width="12" height="12" fill="#262626"/>
55
51
<rect x="12" y="72" width="12" height="12" fill="#d97706"/>
56
52
<rect x="24" y="72" width="12" height="12" fill="#d97706"/>
57
53
<rect x="36" y="72" width="12" height="12" fill="#d97706"/>
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"/>
54
+
<rect x="72" y="72" width="12" height="12" fill="#262626"/>
55
+
<rect x="84" y="72" width="12" height="12" fill="#262626"/>
56
+
<rect x="96" y="72" width="12" height="12" fill="#262626"/>
57
+
<rect x="108" y="72" width="12" height="12" fill="#262626"/>
58
+
<rect x="144" y="72" width="12" height="12" fill="#262626"/>
59
+
<rect x="156" y="72" width="12" height="12" fill="#262626"/>
60
+
<rect x="168" y="72" width="12" height="12" fill="#262626"/>
61
+
<rect x="180" y="72" width="12" height="12" fill="#262626"/>
62
+
<rect x="216" y="72" width="12" height="12" fill="#262626"/>
63
+
<rect x="228" y="72" width="12" height="12" fill="#262626"/>
64
+
<rect x="240" y="72" width="12" height="12" fill="#262626"/>
65
+
<rect x="252" y="72" width="12" height="12" fill="#262626"/>
70
66
</svg>
+9
-6
web/src/components/Layout.tsx
+9
-6
web/src/components/Layout.tsx
···
33
33
<div className="max-w-2xl mx-auto px-4 py-3 flex items-center justify-between">
34
34
<div className="flex items-center gap-2 text-neutral-500 overflow-x-auto whitespace-nowrap">
35
35
<Link to="/" className="shrink-0 hover:opacity-80">
36
-
<img
37
-
src="/hero.svg"
38
-
alt="@bbs"
39
-
style={{ height: "1.25rem", imageRendering: "pixelated" }}
40
-
className="inline-block"
41
-
/>
36
+
<picture>
37
+
<source srcSet="/hero-dark.svg" media="(prefers-color-scheme: dark)" />
38
+
<img
39
+
src="/hero.svg"
40
+
alt="@bbs"
41
+
style={{ height: "1.25rem", imageRendering: "pixelated" }}
42
+
className="inline-block"
43
+
/>
44
+
</picture>
42
45
</Link>
43
46
<Breadcrumbs />
44
47
</div>
+9
-6
web/src/pages/Home.tsx
+9
-6
web/src/pages/Home.tsx
···
63
63
return (
64
64
<div className="max-w-2xl mx-auto px-4 h-full flex flex-col justify-center overflow-hidden">
65
65
<div className="text-center pb-4">
66
-
<img
67
-
src="/hero.svg"
68
-
alt="@bbs"
69
-
className="mx-auto mb-4"
70
-
style={{ width: 276, imageRendering: "pixelated" }}
71
-
/>
66
+
<picture>
67
+
<source srcSet="/hero-dark.svg" media="(prefers-color-scheme: dark)" />
68
+
<img
69
+
src="/hero.svg"
70
+
alt="@bbs"
71
+
className="mx-auto mb-4"
72
+
style={{ width: 276, imageRendering: "pixelated" }}
73
+
/>
74
+
</picture>
72
75
<h1 className="text-lg text-neutral-400 mb-3">
73
76
Bulletin boards on the{" "}
74
77
<a