selfhostable, read-only reddit client
improve all round the board
- better external links
- fix styles for code tags
- fix link styles for titles
- add relative time to post info
+17
-8
+4
-1
src/mixins/post.pug
+4
-1
src/mixins/post.pug
···
32
32
else if p.post_hint == "hosted:video"
33
33
- var url = p.secure_media.reddit_video.scrubber_media_url
34
34
video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
35
+
else if !p.selftext
36
+
a(href=p.url)
37
+
| ↗
35
38
36
39
if p.is_gallery && p.is_gallery == true
37
40
if p.gallery_data
···
65
68
- var url = p.secure_media.reddit_video.dash_url
66
69
video(src=url controls data-dashjs-player loading="lazy").post-media
67
70
button(onclick=`toggleDetails('${p.id}')`) close
68
-
else if p.post_hint == "link" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
71
+
else if !p.post_hint || (p.post_hint == "link" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default")
69
72
details(id=`${p.id}`)
70
73
summary expand link
71
74
a(href=`${p.url}`)
+9
-5
src/public/styles.css
+9
-5
src/public/styles.css
···
3
3
:root {
4
4
/* Light mode colors */
5
5
--bg-color: white;
6
+
--bg-color-muted: #eee;
6
7
--text-color: black;
7
8
--text-color-muted: #999;
8
9
--blockquote-color: green;
···
13
14
@media (prefers-color-scheme: dark) {
14
15
:root {
15
16
--bg-color: black;
17
+
--bg-color-muted: #333;
16
18
--text-color: white;
17
19
--text-color-muted: #999;
18
20
--blockquote-color: green;
···
230
232
.post-media {
231
233
display: block;
232
234
margin: 0 auto;
233
-
max-width: 85%;
235
+
max-width: 95%;
234
236
padding: 5px;
235
237
}
236
238
···
247
249
.title-container > a {
248
250
color: var(--text-color);
249
251
text-decoration: none;
252
+
}
253
+
254
+
.title-container > a:hover {
255
+
text-decoration: underline;
250
256
}
251
257
252
258
.title-container > a:visited {
···
269
275
}
270
276
271
277
pre, code {
272
-
background: #eee;
278
+
background: var(--bg-color-muted);
273
279
}
274
280
275
281
pre {
···
308
314
display: flex;
309
315
overflow-x: auto;
310
316
position: relative;
311
-
scroll-snap-type: x mandatory;
312
317
padding: 5px;
313
318
}
314
319
315
320
.gallery-item {
316
321
flex: 0 0 auto;
317
-
scroll-snap-align: start;
318
322
margin-right: 10px;
319
323
}
320
324
321
325
.gallery img {
322
326
width: auto;
323
-
height: 300px;
327
+
max-height: 500px;
324
328
}
+4
-2
src/views/comments.pug
+4
-2
src/views/comments.pug
···
36
36
else if post.post_hint == 'hosted:video'
37
37
- var url = post.secure_media.reddit_video.dash_url
38
38
video(controls data-dashjs-player src=`${url}`).post-media
39
-
else if post.post_hint == "link" && post.thumbnail && post.thumbnail != "self" && post.thumbnail != "default"
40
-
a(href=`${post.url}`)
39
+
else if !post.selftext
40
+
a(href=post.url)
41
41
| #{post.url}
42
42
43
43
if post.selftext_html
···
47
47
p
48
48
| #{fmtnum(post.ups)} ↑
49
49
| · by u/#{post.author}
50
+
| ·
51
+
| #{timeDifference(Date.now(), post.created * 1000)}
50
52
51
53
hr
52
54