static, scriptless homepage for my pds (pds.jeanmachine.dev)
added dark mode, changed ascii styling.
+26
-39
+8
-12
index.css
+8
-12
index.css
···
13
13
}
14
14
15
15
:root {
16
-
--bg: #e6e9ef;
17
-
--text: #4c4f69;
18
-
--subtext: #5c5f77;
19
-
--overlay: #8c8fa1;
20
-
--accent: #d20f39;
16
+
color-scheme: light dark;
17
+
--bg: light-dark(#e6e9ef, #292c3c);
18
+
--text: light-dark(#4c4f69, #c6d0f5);
19
+
--subtext: light-dark(#6c6f85, #b5bfe2);
20
+
--overlay: light-dark(#8c8fa1, #949cbb);
21
+
--accent: light-dark(#d20f39, #e78284);
21
22
}
22
23
23
24
html,
···
36
37
header {
37
38
display: flex;
38
39
align-items: center;
39
-
gap: 1rem;
40
+
width: 100%;
40
41
border-bottom: 1px solid var(--overlay);
41
42
}
42
43
43
44
header img {
44
-
max-height: 125px; /* 8 lines × 13px × 1.2 line-height */
45
+
max-height: 125px;
45
46
width: auto;
46
47
flex-shrink: 0;
47
48
object-fit: contain;
···
52
53
font-size: 13px;
53
54
font-style: initial;
54
55
margin: 0;
55
-
}
56
-
57
-
.body-text {
58
-
color: var(--text);
59
-
opacity: 0.9;
60
56
}
61
57
62
58
.links {
+18
-27
index.html
+18
-27
index.html
···
11
11
<header>
12
12
<img src="assets/logo.svg" alt="logo" />
13
13
<pre class="ascii">
14
-
_ _ _ _ _
15
-
| | (_) | | (_) | |
16
-
_ __ __| |___ _ ___ __ _ _ __ _ __ ___ __ _ ___| |__ _ _ __ ___ __| | _____ __
17
-
| '_ \ / _` / __| | |/ _ \/ _` | '_ \| '_ ` _ \ / _` |/ __| '_ \| | '_ \ / _ \ / _` |/ _ \ \ / /
18
-
| |_) | (_| \__ \_| | __/ (_| | | | | | | | | | (_| | (__| | | | | | | | __/| (_| | __/\ V /
19
-
| .__/ \__,_|___(_) |\___|\__,_|_| |_|_| |_| |_|\__,_|\___|_| |_|_|_| |_|\___(_)__,_|\___| \_/
20
-
| | _/ |
21
-
|_| |__/
14
+
__ _ __ _ __
15
+
___ ___/ /__ (_)__ ___ ____ __ _ ___ _____/ / (_)__ ___ ___/ /__ _ __
16
+
/ _ \/ _ (_-<_ / / -_) _ `/ _ \/ ' \/ _ `/ __/ _ \/ / _ \/ -_)/ _ / -_) |/ /
17
+
/ .__/\_,_/___(_)_/ /\__/\_,_/_//_/_/_/_/\_,_/\__/_//_/_/_//_/\__(_)_,_/\__/|___/
18
+
/_/ |___/
22
19
</pre
23
20
>
24
21
</header>
25
22
26
-
<div class="body-text">
27
-
<p style="font-style: italic">
28
-
This is an AT Protocol Personal Data Server (aka, an atproto
29
-
PDS)
30
-
</p>
31
-
<p>
32
-
Most API routes are under
33
-
<span style="color: var(--accent)">/xrpc/</span>
34
-
</p>
35
-
</div>
23
+
<p style="font-style: italic">
24
+
This is an AT Protocol Personal Data Server (aka, an atproto PDS)
25
+
</p>
26
+
<p>
27
+
Most API routes are under
28
+
<span style="color: var(--accent)">/xrpc/</span>.
29
+
</p>
36
30
37
31
<div class="links">
38
32
<div class="link-row">
···
59
53
</div>
60
54
</div>
61
55
62
-
<div class="body-text">
63
-
<p style="font-style: italic">
64
-
Run by
65
-
<a
66
-
href="https://bsky.app/profile/did:plc:6vxtya3serxcwvcdk5e7psvv"
67
-
>@jeanmachine.dev</a
68
-
>.
69
-
</p>
70
-
</div>
56
+
<p style="font-style: italic">
57
+
Run by
58
+
<a href="https://bsky.app/profile/did:plc:6vxtya3serxcwvcdk5e7psvv"
59
+
>@jeanmachine.dev</a
60
+
>.
61
+
</p>
71
62
</body>
72
63
</html>