diff options
-rw-r--r-- | src/mixins/comment.pug | 2 | ||||
-rw-r--r-- | src/public/styles.css | 36 | ||||
-rw-r--r-- | src/views/index.pug | 2 |
3 files changed, 25 insertions, 15 deletions
diff --git a/src/mixins/comment.pug b/src/mixins/comment.pug index 518307d..4249030 100644 --- a/src/mixins/comment.pug +++ b/src/mixins/comment.pug | |||
@@ -24,7 +24,7 @@ mixin comment(com, isfirst) | |||
24 | 24 | ||
25 | if kind == "more" | 25 | if kind == "more" |
26 | div(class=`more ${isfirst ? 'first' : ''}`) | 26 | div(class=`more ${isfirst ? 'first' : ''}`) |
27 | | #{data.count} more comments | 27 | | #{data.count} more #{fmttxt(data.count, 'comment')} |
28 | else | 28 | else |
29 | div(class=`comment ${isfirst ? 'first' : ''}`) | 29 | div(class=`comment ${isfirst ? 'first' : ''}`) |
30 | details(id=`${data.id}` open="") | 30 | details(id=`${data.id}` open="") |
diff --git a/src/public/styles.css b/src/public/styles.css index 87e1573..afd89e2 100644 --- a/src/public/styles.css +++ b/src/public/styles.css | |||
@@ -80,6 +80,10 @@ a:visited { | |||
80 | align-items: center; | 80 | align-items: center; |
81 | } | 81 | } |
82 | 82 | ||
83 | .sorting { | ||
84 | margin-top: 20px; | ||
85 | } | ||
86 | |||
83 | .sort-opts { | 87 | .sort-opts { |
84 | display: flex; | 88 | display: flex; |
85 | flex-direction: row; | 89 | flex-direction: row; |
@@ -205,8 +209,8 @@ summary::before { | |||
205 | .media-preview img, | 209 | .media-preview img, |
206 | .media-preview video | 210 | .media-preview video |
207 | { | 211 | { |
208 | width: 7rem; | 212 | width: 5rem; |
209 | height: 7rem; | 213 | height: 5rem; |
210 | } | 214 | } |
211 | .media-preview a { | 215 | .media-preview a { |
212 | font-size: 2rem; | 216 | font-size: 2rem; |
@@ -243,8 +247,8 @@ summary::before { | |||
243 | .media-preview img, | 247 | .media-preview img, |
244 | .media-preview video | 248 | .media-preview video |
245 | { | 249 | { |
246 | width: 7rem; | 250 | width: 5rem; |
247 | height: 7rem; | 251 | height: 5rem; |
248 | } | 252 | } |
249 | .media-preview a { | 253 | .media-preview a { |
250 | font-size: 2rem; | 254 | font-size: 2rem; |
@@ -265,12 +269,12 @@ summary::before { | |||
265 | .comment, .more { | 269 | .comment, .more { |
266 | width: 100%; | 270 | width: 100%; |
267 | border-left: 1px dashed var(--text-color-muted); | 271 | border-left: 1px dashed var(--text-color-muted); |
268 | padding: 8px 0px 0px 24px; | 272 | padding: 8px 0px 0px 18px; |
269 | box-sizing: border-box; | 273 | box-sizing: border-box; |
270 | } | 274 | } |
271 | 275 | ||
272 | .comment { | 276 | .comment { |
273 | padding: 0px 0px 0px 24px; | 277 | padding-top: 10px; |
274 | } | 278 | } |
275 | 279 | ||
276 | .first { | 280 | .first { |
@@ -303,8 +307,8 @@ summary::before { | |||
303 | } | 307 | } |
304 | 308 | ||
305 | .title-container, .comment-info-container, summary.expand-comments::before { | 309 | .title-container, .comment-info-container, summary.expand-comments::before { |
306 | margin-top: 10px; | 310 | margin-top: 5px; |
307 | margin-bottom: 10px; | 311 | margin-bottom: 5px; |
308 | } | 312 | } |
309 | 313 | ||
310 | .info-container { | 314 | .info-container { |
@@ -359,10 +363,13 @@ code { | |||
359 | 363 | ||
360 | p { | 364 | p { |
361 | margin-top: 5px; | 365 | margin-top: 5px; |
366 | margin-bottom: 0px; | ||
362 | } | 367 | } |
363 | 368 | ||
364 | .comment-body { | 369 | .comment-body { |
365 | text-align: left; | 370 | text-align: left; |
371 | display: block; | ||
372 | padding-bottom: 8px; | ||
366 | } | 373 | } |
367 | 374 | ||
368 | summary.expand-post { | 375 | summary.expand-post { |
@@ -384,10 +391,6 @@ details:not([open]) summary::before { | |||
384 | padding-right: 10px; | 391 | padding-right: 10px; |
385 | } | 392 | } |
386 | 393 | ||
387 | .comment-body { | ||
388 | display: block; | ||
389 | } | ||
390 | |||
391 | .footer { | 394 | .footer { |
392 | padding-bottom: 40px; | 395 | padding-bottom: 40px; |
393 | } | 396 | } |
@@ -416,9 +419,16 @@ a { | |||
416 | } | 419 | } |
417 | 420 | ||
418 | .post-title { | 421 | .post-title { |
419 | margin-top: 0; | 422 | margin-top: 5px; |
420 | } | 423 | } |
421 | 424 | ||
422 | .op { | 425 | .op { |
423 | color: var(--accent); | 426 | color: var(--accent); |
424 | } | 427 | } |
428 | |||
429 | button { | ||
430 | border: 1px solid var(--text-color-muted); | ||
431 | border-radius: 4px; | ||
432 | background-color: var(--black); | ||
433 | color: var(--white); | ||
434 | } | ||
diff --git a/src/views/index.pug b/src/views/index.pug index 0988b08..add4c8e 100644 --- a/src/views/index.pug +++ b/src/views/index.pug | |||
@@ -46,7 +46,7 @@ html | |||
46 | if about | 46 | if about |
47 | p #{about.public_description} | 47 | p #{about.public_description} |
48 | details | 48 | details |
49 | summary sorting by #{query.sort + (query.t?' '+query.t:'')} | 49 | summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')} |
50 | div.sort-opts | 50 | div.sort-opts |
51 | a(href=`/r/${subreddit}?sort=hot`) hot | 51 | a(href=`/r/${subreddit}?sort=hot`) hot |
52 | a(href=`/r/${subreddit}?sort=new`) new | 52 | a(href=`/r/${subreddit}?sort=new`) new |