From 24be4c6689e2d184147e53443ea79a7650835a9e Mon Sep 17 00:00:00 2001
From: PortableProgrammer <nick@warnerheavyindustries.com>
Date: Tue, 14 Jan 2025 17:10:26 +0000
Subject: 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.

---
 src/mixins/post.pug      |  6 +++---
 src/mixins/postUtils.pug |  4 ++++
 src/public/styles.css    | 41 ++++++++++++++++++++---------------------
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index 472cab2..676b349 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -28,7 +28,7 @@ mixin post(p, currentUrl)
               a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit}
               | &nbsp;·&nbsp;
               a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩
-          if (query.view == "card" && !isPostGallery(p) && !isPostImage(p) && !isPostVideo(p) && p.selftext_html)
+          if (query.view == "card" && !isPostMedia(p) && p.selftext_html)
             div.self-text-overflow.card
               if p.spoiler || p.over_18
                 div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`)
@@ -54,10 +54,10 @@ mixin post(p, currentUrl)
               a(href=p.url)
                 | ↗
 
-      details(id=`${p.id}` open=(query.view == "card") class=`${query.view}`)
+      details(id=`${p.id}` open=(query.view == "card" && (isPostMedia(p) || isPostLink(p))) class=`${query.view}`)
         summary.expand-post expand media
         div.image-viewer
-          if query.view == "card" && (p.spoiler || p.over_18) && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
+          if query.view == "card" && (p.spoiler || p.over_18) && isPostMedia(p)
             div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) 
               h2
                 != p.over_18 ? 'nsfw' : 'spoiler'
diff --git a/src/mixins/postUtils.pug b/src/mixins/postUtils.pug
index b96ff1e..7eef9b2 100644
--- a/src/mixins/postUtils.pug
+++ b/src/mixins/postUtils.pug
@@ -1,3 +1,7 @@
+-
+  function isPostMedia(p) {
+    return isPostImage(p) || isPostGallery(p) || isPostVideo(p);
+  }
 -
   function isPostGallery(p) {
     return (p.is_gallery && p.is_gallery == true);
diff --git a/src/public/styles.css b/src/public/styles.css
index 71ad878..580dbf9 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -11,9 +11,9 @@
   --link-visited-color: #999;
   --accent: var(--link-color);
   --error-text-color: red;
-  --border-radius-card: 4vmin;
-  --border-radius-media: 3vmin;
-  --border-radius-preview: 2vmin;
+  --border-radius-card: 2vmin;
+  --border-radius-media: 1.5vmin;
+  --border-radius-preview: 1vmin;
 
   font-family: Inter, sans-serif;
   font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
@@ -174,7 +174,10 @@ nav {
 
 .post-text.card {
   padding: 0.9rem;
-  padding-top: 0.3rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  overflow-wrap: break-word;
+  max-width: 95%;
 }
 
 .self-text-overflow.card {
@@ -185,6 +188,7 @@ nav {
   overflow: hidden;
   overflow-wrap: break-word;
   display: block;
+  max-width: 98%;
 }
 
 .self-text.card {
@@ -200,11 +204,6 @@ nav {
 .image-viewer {
   position: relative;
   margin: 0.9rem;
-  margin-bottom: 0.3rem;
-}
-
-.image-viewer:not(:has(details)) {
-  margin: unset;
 }
 
 .image-viewer > img {
@@ -314,6 +313,7 @@ summary::before {
 .image-viewer a:has(img) {
   font-size: 0rem;
   padding: unset;
+  margin: unset;
 }
 
 .media-preview a,
@@ -363,7 +363,7 @@ form {
 
 @media (min-width: 768px) {
   :root {
-    --border-radius-card: 2vmin;
+    --border-radius-card: 1vmin;
     --border-radius-media: 1vmin;
     --border-radius-preview: 0.5vmin;  
   }
@@ -387,9 +387,11 @@ form {
     margin: 0.7rem;
     padding: initial;
   }
-  .self-text.card {
-    -webkit-line-clamp: 4;
-    line-clamp: 4;
+  .post-text.card {
+    max-width: 100%;
+  }
+  .self-text-overflow.card {
+    max-width: 100%;
   }
   .post-author {
     display: inline
@@ -410,8 +412,9 @@ form {
 
 @media (min-width: 1080px) {
   :root {
-    --border-radius-card: 1vmin;
-    --border-radius-media: 1vmin;
+    --border-radius-card: 0.5vmin;
+    --border-radius-media: 0.5vmin;
+    --border-radius-preview: 0.3vmin;
   }
   .post, .comments-container, .hero, .header, .footer {
     flex: 1 1 60%;
@@ -438,8 +441,8 @@ form {
     padding: initial;
   }
   .self-text.card {
-    -webkit-line-clamp: 6;
-    line-clamp: 6;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
   }
   .post-author {
     display: inline
@@ -459,10 +462,6 @@ form {
 }
 
 @media (min-width: 2560px) {
-  :root {
-    --border-radius-card: 0.75vmin;
-    --border-radius-media: 0.75vmin;
-  }
   .post, .comments-container, .hero, .header, .footer {
     flex: 1 1 40%;
     width: 40%;
-- 
cgit v1.2.3