Merge pull request #22 from PortableProgrammer/feat-consolidate-card-compact-media

Feat: Consolidate Card and Compact media viewers

1 files changed, 70 insertions, 64 deletions

diff --git a/src/public/styles.css b/src/public/styles.css
index d9f6a40..580dbf9 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -11,6 +11,9 @@
   --link-visited-color: #999;
   --accent: var(--link-color);
   --error-text-color: red;
+  --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;
@@ -47,10 +50,6 @@ body {
   color: var(--text-color);
 }
 
-body:has(details.card[open]) {
-  overflow: hidden;
-}
-
 body.media-maximized {
   /* Fix for Safari User Agent stylesheet */
   margin: 0;
@@ -169,13 +168,16 @@ nav {
 
 .post-container.card {
   border: 1px solid var(--bg-color-muted);
-  border-radius: 8px;
+  border-radius: var(--border-radius-card);
   display: block;
 }
 
 .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 {
@@ -186,6 +188,7 @@ nav {
   overflow: hidden;
   overflow-wrap: break-word;
   display: block;
+  max-width: 98%;
 }
 
 .self-text.card {
@@ -198,37 +201,21 @@ nav {
   text-overflow: ellipsis;
 }
 
-.media-preview.card {
+.image-viewer {
   position: relative;
-  padding: 0.3rem;
-  padding-bottom: 0.3rem;
+  margin: 0.9rem;
 }
 
-.media-preview.card > img {
+.image-viewer > img {
   cursor: pointer;
 }
 
-.gallery.card {
-  align-items: center;
-  scroll-snap-type: both mandatory;
-}
-
-.gallery-item.card {
-  max-width: 100%;
-  width: 100%;
-  scroll-snap-align: center;
-}
-
-.gallery-item-idx.card {
-  text-align: center;
-}
-
 .spoiler {
   background-color: rbga(var(--bg-color-muted), 0.2);
   /* Safari on iOS <= 17 */
   -webkit-backdrop-filter: blur(3rem);
   backdrop-filter: blur(3rem);
-  border-radius: 4px;
+  border-radius: var(--border-radius-preview);
 
   position: absolute;
   top: 0;
@@ -247,7 +234,7 @@ nav {
   z-index: 10;
 }
 
-.gallery-item-idx.card,
+.gallery-item-idx,
 .spoiler > h2 {
   text-shadow: 0.1rem 0.1rem 1rem var(--bg-color-muted);
 }
@@ -294,17 +281,14 @@ summary::before {
   object-fit: cover;
   width: 4rem;
   height: 4rem;
+  border-radius: var(--border-radius-preview);
 }
 
-.media-preview.card {
-  padding: unset;
-}
-
-.media-preview.card img,
-.media-preview.card video {
-  border-radius: 6px;
+.image-viewer img,
+.image-viewer video {
+  border-radius: var(--border-radius-media);
 
-  max-height: 40vh;
+  max-height: 50vh;
   max-width: 95%;
 
   display: block;
@@ -317,21 +301,27 @@ summary::before {
   object-fit: fill;
 }
 
-.media-preview.card a {
-  font-size: 1.5rem;
-  padding: unset;
-  padding-left: 1rem;
+.image-viewer.main-content img,
+.image-viewer.main-content video {
+  max-height: 70vh;
+}
+
+.image-viewer.main-content a {
+  margin: unset;
 }
 
-.media-preview.card a:has(img) {
+.image-viewer a:has(img) {
   font-size: 0rem;
   padding: unset;
+  margin: unset;
 }
 
-.media-preview a {
-  font-size: 2rem;
+.media-preview a,
+.image-viewer a {
+  font-size: 1.5rem;
   text-decoration: none;
-  padding: 1rem;
+  padding: unset;
+  margin: 1rem;
 }
 
 .media-maximized {
@@ -372,6 +362,11 @@ form {
 }
 
 @media (min-width: 768px) {
+  :root {
+    --border-radius-card: 1vmin;
+    --border-radius-media: 1vmin;
+    --border-radius-preview: 0.5vmin;  
+  }
   .post, .comments-container, .hero, .header, .footer {
     flex: 1 1 90%;
     width: 90%;
@@ -382,19 +377,21 @@ form {
     width: 5rem;
     height: 5rem;
   }
-  .media-preview.card img,
-  .media-preview.card video
+  .image-viewer img,
+  .image-viewer video
   {
-    max-height: 50vh;
+    max-height: 45vh;
   }
-  .media-preview.card a {
+  .image-viewer a {
     font-size: 1rem;
     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
@@ -414,6 +411,11 @@ form {
 }
 
 @media (min-width: 1080px) {
+  :root {
+    --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%;
     width: 60%;
@@ -424,23 +426,23 @@ form {
     width: 5rem;
     height: 5rem;
   }
-  .media-preview.card img,
-  .media-preview.card video
+  .image-viewer img,
+  .image-viewer video
   {
-    max-height: 30vh;
+    max-height: 35vh;
   }
   .media-preview a {
     font-size: 2rem;
     padding: 2rem;
   }
-  .media-preview.card a {
+  .image-viewer a {
     font-size: 1rem;
-    margin: 0.5rem;
+    margin: 1rem;
     padding: initial;
   }
   .self-text.card {
-    -webkit-line-clamp: 6;
-    line-clamp: 6;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
   }
   .post-author {
     display: inline
@@ -464,10 +466,10 @@ form {
     flex: 1 1 40%;
     width: 40%;
   }
-  .media-preview.card img,
-  .media-preview.card video
+  .image-viewer img,
+  .image-viewer video
   {
-    max-height: 20vh;
+    max-height: 30vh;
   }
   .sort-opts,
   .view-opts {
@@ -494,7 +496,7 @@ form {
   margin-top: 10px;
 }
 
-.post-container {
+.post-info {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -648,16 +650,20 @@ a {
   overflow-x: auto;
   position: relative;
   padding: 5px;
+  align-items: center;
+  scroll-snap-type: both mandatory;
 }
 
 .gallery-item {
   flex: 0 0 auto;
   margin-right: 10px;
+  max-width: 100%;
+  width: 100%;
+  scroll-snap-align: center;
 }
 
-.gallery img {
-    width: auto;
-    max-height: 500px;
+.gallery-item-idx {
+  text-align: center;
 }
 
 .post-title {