my website
turn colors into css vars, rearrange links
+48
-37
+28
-24
src/index.html
+28
-24
src/index.html
···
45
45
gap: 1em;
46
46
max-width: 30rem;
47
47
}
48
-
#links > * > div {
48
+
#links > li > a {
49
49
display: inline-flex;
50
50
flex-direction: column;
51
+
text-decoration: none;
52
+
color: inherit;
51
53
}
52
-
#links > * > div > * { width: max-content; }
53
-
#links a {
54
+
#links > li > a > * { width: max-content; }
55
+
#links > li > a > :first-child {
54
56
font-weight: bold;
55
-
text-decoration: none;
57
+
color: var(--color-link);
58
+
}
59
+
#links > li > a > :nth-child(2) {
60
+
font-size: 0.8em;
56
61
}
57
-
#links > * > div > :nth-child(2) { font-size: 0.8em; }
58
62
</style>
59
63
60
64
<link rel="me" href="https://wetdry.world/@chfour"> <!-- old fedi acc -->
···
83
87
<p>known as <b>chfour</b></p>
84
88
85
89
<ul class="inline-list" id="links">
86
-
<li><div>
87
-
<a rel="me" href="https://merping.synth.download/@chfour">fediverse</a>
90
+
<li><a rel="me" href="https://merping.synth.download/@chfour">
91
+
<span>fediverse</span>
88
92
<span>@chfour@merping.synth.download</span>
89
-
</div></li>
90
-
<li><div>
91
-
<a href="https://bsky.app/profile/eeep.ee">bluesky</a>
93
+
</a></li>
94
+
<li><a href="https://bsky.app/profile/eeep.ee">
95
+
<span>bluesky</span>
92
96
<span>@eeep.ee (bridged)</span>
93
-
</div></li>
94
-
<li><div>
95
-
<a href="https://signal.me/#eu/uwW5t81nJulRdHjWEkNUE2omPv9HzXhzUzar2yvP14ULx50MgdZBwpxrhWX3RfA3">signal</a>
97
+
</a></li>
98
+
<li><a href="https://signal.me/#eu/uwW5t81nJulRdHjWEkNUE2omPv9HzXhzUzar2yvP14ULx50MgdZBwpxrhWX3RfA3">
99
+
<span>signal</span>
96
100
<span>chfour.32</span>
97
-
</div></li>
98
-
<li><div>
99
-
<a href="discord.html">discord</a>
100
-
<span>ch4</span>
101
-
</div></li>
102
-
<li><div>
103
-
<a href="https://github.com/chfour">github</a>
101
+
</a></li>
102
+
<li><a href="discord.html">
103
+
<span>discord</span>
104
+
<span>ch4</span>
105
+
</a></li>
106
+
<li><a href="https://github.com/chfour">
107
+
<span>github</span>
104
108
<span>chfour</span>
105
-
</div></li>
106
-
<li><div>
107
-
<a href="https://files.eeep.ee/">file dumpster</a>
109
+
</a></li>
110
+
<li><a href="https://files.eeep.ee/">
111
+
<span>file dumpster</span>
108
112
<span>files.eeep.ee</span>
109
-
</div></li>
113
+
</a></li>
110
114
</ul>
111
115
</main>
112
116
<footer>
+20
-13
src/style.css
+20
-13
src/style.css
···
18
18
}
19
19
/* todo: non-fast variants and generating this from the nix stuff too maybe lol */
20
20
21
-
:root { color-scheme: light dark; }
21
+
:root {
22
+
color-scheme: light dark;
23
+
--color-fg: #f2f2f2;
24
+
--color-bg: #000;
25
+
--color-link: #7d29e2;
26
+
--color-link-visited: #a800ad;
27
+
}
28
+
29
+
@media (prefers-color-scheme: dark) {
30
+
:root {
31
+
--color-bg: #1a1a1a;
32
+
--color-fg: #fff;
33
+
--color-link: #aaf;
34
+
--color-link-visited: #fbf;
35
+
}
36
+
}
22
37
23
38
body {
24
-
background-color: #f2f2f2;
25
-
color: black;
39
+
background-color: var(--color-bg);
40
+
color: var(--color-fg);
26
41
27
42
font-family: 'Inter', sans-serif;
28
43
font-optical-sizing: auto;
···
36
51
margin: 3rem;
37
52
}
38
53
39
-
a { color: #7d29e2; }
40
-
a:visited { color: #a800ad; }
54
+
a { color: var(--color-link); }
55
+
a:visited { color: var(--color-link-visited); }
41
56
42
-
@media (prefers-color-scheme: dark) {
43
-
body {
44
-
background-color: #1a1a1a;
45
-
color: white;
46
-
}
47
-
a { color: #aaf; }
48
-
a:visited { color: #fbf; }
49
-
}
50
57
51
58
img { display: block; }
52
59