selfhostable, read-only reddit client

More CSS cleanup and (hopefully) final tweaks. * Further adjusted `--border-radius-*` vars to reduce egregious curvature. * Adjusted `post-text` padding and max width in `card` view to reduce text overflow on smaller screens. * Left `details` collapsed in `card` view when there is no media to preview. * Corrected `.image-viewer` margins when `details` is collapsed in `card` view. * Added `isPostMedia` function to `postUtils` to consolidate some `if` statements. * Fixed links not showing in `card` view if there was no other media.

Changed files
+27 -24
src
+3 -3
src/mixins/post.pug
··· 28 a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit} 29 |  ·  30 a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩ 31 - if (query.view == "card" && !isPostGallery(p) && !isPostImage(p) && !isPostVideo(p) && p.selftext_html) 32 div.self-text-overflow.card 33 if p.spoiler || p.over_18 34 div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) ··· 54 a(href=p.url) 55 | ↗ 56 57 - details(id=`${p.id}` open=(query.view == "card") class=`${query.view}`) 58 summary.expand-post expand media 59 div.image-viewer 60 - if query.view == "card" && (p.spoiler || p.over_18) && (isPostGallery(p) || isPostImage(p) || isPostVideo(p)) 61 div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) 62 h2 63 != p.over_18 ? 'nsfw' : 'spoiler'
··· 28 a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit} 29 |  ·  30 a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩ 31 + if (query.view == "card" && !isPostMedia(p) && p.selftext_html) 32 div.self-text-overflow.card 33 if p.spoiler || p.over_18 34 div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) ··· 54 a(href=p.url) 55 | ↗ 56 57 + details(id=`${p.id}` open=(query.view == "card" && (isPostMedia(p) || isPostLink(p))) class=`${query.view}`) 58 summary.expand-post expand media 59 div.image-viewer 60 + if query.view == "card" && (p.spoiler || p.over_18) && isPostMedia(p) 61 div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) 62 h2 63 != p.over_18 ? 'nsfw' : 'spoiler'
+4
src/mixins/postUtils.pug
··· 1 - 2 function isPostGallery(p) { 3 return (p.is_gallery && p.is_gallery == true);
··· 1 + - 2 + function isPostMedia(p) { 3 + return isPostImage(p) || isPostGallery(p) || isPostVideo(p); 4 + } 5 - 6 function isPostGallery(p) { 7 return (p.is_gallery && p.is_gallery == true);
+20 -21
src/public/styles.css
··· 11 --link-visited-color: #999; 12 --accent: var(--link-color); 13 --error-text-color: red; 14 - --border-radius-card: 4vmin; 15 - --border-radius-media: 3vmin; 16 - --border-radius-preview: 2vmin; 17 18 font-family: Inter, sans-serif; 19 font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1; ··· 174 175 .post-text.card { 176 padding: 0.9rem; 177 - padding-top: 0.3rem; 178 } 179 180 .self-text-overflow.card { ··· 185 overflow: hidden; 186 overflow-wrap: break-word; 187 display: block; 188 } 189 190 .self-text.card { ··· 200 .image-viewer { 201 position: relative; 202 margin: 0.9rem; 203 - margin-bottom: 0.3rem; 204 - } 205 - 206 - .image-viewer:not(:has(details)) { 207 - margin: unset; 208 } 209 210 .image-viewer > img { ··· 314 .image-viewer a:has(img) { 315 font-size: 0rem; 316 padding: unset; 317 } 318 319 .media-preview a, ··· 363 364 @media (min-width: 768px) { 365 :root { 366 - --border-radius-card: 2vmin; 367 --border-radius-media: 1vmin; 368 --border-radius-preview: 0.5vmin; 369 } ··· 387 margin: 0.7rem; 388 padding: initial; 389 } 390 - .self-text.card { 391 - -webkit-line-clamp: 4; 392 - line-clamp: 4; 393 } 394 .post-author { 395 display: inline ··· 410 411 @media (min-width: 1080px) { 412 :root { 413 - --border-radius-card: 1vmin; 414 - --border-radius-media: 1vmin; 415 } 416 .post, .comments-container, .hero, .header, .footer { 417 flex: 1 1 60%; ··· 438 padding: initial; 439 } 440 .self-text.card { 441 - -webkit-line-clamp: 6; 442 - line-clamp: 6; 443 } 444 .post-author { 445 display: inline ··· 459 } 460 461 @media (min-width: 2560px) { 462 - :root { 463 - --border-radius-card: 0.75vmin; 464 - --border-radius-media: 0.75vmin; 465 - } 466 .post, .comments-container, .hero, .header, .footer { 467 flex: 1 1 40%; 468 width: 40%;
··· 11 --link-visited-color: #999; 12 --accent: var(--link-color); 13 --error-text-color: red; 14 + --border-radius-card: 2vmin; 15 + --border-radius-media: 1.5vmin; 16 + --border-radius-preview: 1vmin; 17 18 font-family: Inter, sans-serif; 19 font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1; ··· 174 175 .post-text.card { 176 padding: 0.9rem; 177 + padding-top: 0.5rem; 178 + padding-bottom: 0.5rem; 179 + overflow-wrap: break-word; 180 + max-width: 95%; 181 } 182 183 .self-text-overflow.card { ··· 188 overflow: hidden; 189 overflow-wrap: break-word; 190 display: block; 191 + max-width: 98%; 192 } 193 194 .self-text.card { ··· 204 .image-viewer { 205 position: relative; 206 margin: 0.9rem; 207 } 208 209 .image-viewer > img { ··· 313 .image-viewer a:has(img) { 314 font-size: 0rem; 315 padding: unset; 316 + margin: unset; 317 } 318 319 .media-preview a, ··· 363 364 @media (min-width: 768px) { 365 :root { 366 + --border-radius-card: 1vmin; 367 --border-radius-media: 1vmin; 368 --border-radius-preview: 0.5vmin; 369 } ··· 387 margin: 0.7rem; 388 padding: initial; 389 } 390 + .post-text.card { 391 + max-width: 100%; 392 + } 393 + .self-text-overflow.card { 394 + max-width: 100%; 395 } 396 .post-author { 397 display: inline ··· 412 413 @media (min-width: 1080px) { 414 :root { 415 + --border-radius-card: 0.5vmin; 416 + --border-radius-media: 0.5vmin; 417 + --border-radius-preview: 0.3vmin; 418 } 419 .post, .comments-container, .hero, .header, .footer { 420 flex: 1 1 60%; ··· 441 padding: initial; 442 } 443 .self-text.card { 444 + -webkit-line-clamp: 4; 445 + line-clamp: 4; 446 } 447 .post-author { 448 display: inline ··· 462 } 463 464 @media (min-width: 2560px) { 465 .post, .comments-container, .hero, .header, .footer { 466 flex: 1 1 40%; 467 width: 40%;