selfhostable, read-only reddit client
fix fonts (finally maybe)
+48
-25
+42
-21
src/public/styles.css
+42
-21
src/public/styles.css
···
1
-
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
2
-
3
1
:root {
4
2
/* Light mode colors */
5
3
--bg-color: white;
···
7
5
--text-color: black;
8
6
--text-color-muted: #999;
9
7
--blockquote-color: green;
10
-
--link-color: blue;
11
-
--link-visited-color: purple;
8
+
--link-color: #29BC9B;
9
+
--link-visited-color: #999;
10
+
11
+
font-family: Inter, sans-serif;
12
+
font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'tnum' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
13
+
12
14
}
13
15
14
16
@media (prefers-color-scheme: dark) {
···
18
20
--text-color: white;
19
21
--text-color-muted: #999;
20
22
--blockquote-color: lightgreen;
21
-
--link-color: lightblue;
22
-
--link-visited-color: violet;
23
+
--link-color: #79ffe1;
24
+
--link-visited-color: #999;
23
25
}
24
26
}
25
27
28
+
@supports (font-variation-settings: normal) {
29
+
:root { font-family: InterVariable, sans-serif; }
30
+
}
26
31
27
32
body {
28
-
font-family: 'Inter', sans-serif;
29
33
overflow-x: hidden;
30
34
background-color: var(--bg-color);
31
35
color: var(--text-color);
···
38
42
align-items: center;
39
43
}
40
44
45
+
.header a,
46
+
.sub-title a,
47
+
.info-container a,
48
+
.comment-info-container a,
49
+
.sort-opts a {
50
+
text-decoration: none;
51
+
}
52
+
41
53
a {
42
54
color: var(--link-color);
43
-
text-decoration: none;
44
55
}
45
56
46
57
a:hover {
···
111
122
.info-container,
112
123
.comment-info-container,
113
124
.more,
114
-
summary.expand-comments::before,
125
+
summary::before,
115
126
hr {
116
127
color: var(--text-color-muted)
117
128
}
···
121
132
display: flex;
122
133
}
123
134
135
+
summary::before {
136
+
font-size: 0.7rem;
137
+
}
138
+
124
139
.comment-info-container {
125
140
display: inline-flex;
126
141
align-items: center;
···
170
185
.comments-container {
171
186
font-size: 1.3rem;
172
187
}
173
-
.info-container, .comment-info-container, .more, summary.expand-comments::before
188
+
.info-container, .comment-info-container, .more
174
189
{
175
190
font-size: 1rem;
191
+
}
192
+
summary::before {
193
+
font-size: 0.8rem;
176
194
}
177
195
.domain {
178
196
font-size: 1rem;
···
202
220
.comments-container {
203
221
font-size: 1.3rem;
204
222
}
205
-
.info-container, .comment-info-container, .more, summary.expand-comments::before {
223
+
.info-container, .comment-info-container, .more {
206
224
font-size: 1rem;
207
225
}
226
+
summary::before {
227
+
font-size: 0.8rem;
228
+
}
208
229
.domain {
209
230
font-size: 1rem;
210
231
}
···
293
314
color: var(--text-color-muted)
294
315
}
295
316
296
-
.header a {
317
+
.header a,
318
+
.sort-opts a,
319
+
.sub-title a {
297
320
color: var(--text-color);
298
321
}
299
322
···
334
357
display: none;
335
358
}
336
359
337
-
summary.expand-comments {
360
+
summary {
338
361
list-style: none;
339
362
cursor: pointer;
340
363
}
341
364
342
-
summary.expand-comments::before {
343
-
content: "[+] ";
365
+
details[open] summary::before {
366
+
content: "";
367
+
padding-right: 10px;
344
368
}
345
369
346
-
details[open] summary.expand-comments::before {
347
-
content: "[-] ";
348
-
}
349
-
350
-
details:not([open]) summary.expand-comments::before {
351
-
content: "[+] ";
370
+
details:not([open]) summary::before {
371
+
content: "";
372
+
padding-right: 10px;
352
373
}
353
374
354
375
.comment-body {
+2
-2
src/views/comments.pug
+2
-2
src/views/comments.pug
+4
-2
src/views/index.pug
+4
-2
src/views/index.pug
···
9
9
meta(name="viewport" content="width=device-width, initial-scale=1.0")
10
10
meta(charset='UTF-8')
11
11
title reddit
12
-
link(rel='stylesheet', href='/styles.css')
12
+
link(rel="stylesheet", href="/styles.css")
13
+
link(rel="preconnect" href="https://rsms.me/")
14
+
link(rel="stylesheet" href="https://rsms.me/inter/inter.css")
13
15
script(src="https://cdn.dashjs.org/latest/dash.all.min.js")
14
16
15
17
+subMgmt()
···
71
73
div.footer
72
74
div.footer-item
73
75
- var newQuery = {...query, after: posts.after}
74
-
a(href=`/r/${subreddit}?${encodeQueryParams(newQuery)}`) next →
76
+
a(href=`/r/${subreddit}?${encodeQueryParams(newQuery)}`) next ⟶