Remove `card`-specific `post` elements

2 files changed, 30 insertions, 63 deletions

diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index 36ea1b8..df499e2 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -77,31 +77,28 @@ mixin post(p, currentUrl)
               | #{p.domain} 
             | ↗
 
-  if (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
-    details(id=`${p.id}`,class=`${query.view}`)
-      summary.expand-post expand media
-      div.image-viewer(class=`${query.view}`)
-        if isPostGallery(p)
-          div.gallery(class=`${query.view}`)
-            each item in postGalleryItems(p)
-              div.gallery-item(class=`${query.view}`)
-                div.gallery-item-idx(class=`${query.view}`)
-                  | #{`${item.idx}/${item.total}`}
-                a(href=`/media/${item.url}`)
-                  img(src=item.url loading="lazy")
-        else if isPostImage(p)
-          a(href=`/media/${p.url}`)
-            img(src=p.url loading="lazy").post-media
-        else if isPostVideo(p)
-          video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy").post-media
-              //HLS
-              source(src=decodedVideos[0])
-              // Dash
-              source(src=decodedVideos[1])
-              // Fallback
-              source(src=decodedVideos[2])
-        button(onclick=`toggleDetails('${p.id}')`,class=`${query.view}`)
-          if (query.view == 'card')
-            | ╳
-          else
-            | close
+    if query.view == "compact" && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
+      details(id=`${p.id}`)
+        summary.expand-post expand media
+        div.image-viewer
+          if isPostGallery(p)
+            div.gallery
+              each item in postGalleryItems(p)
+                div.gallery-item
+                  div.gallery-item-idx
+                    | #{`${item.idx}/${item.total}`}
+                  a(href=`/media/${item.url}`)
+                    img(src=item.url loading="lazy")
+          else if isPostImage(p)
+            a(href=`/media/${p.url}`)
+              img(src=p.url loading="lazy").post-media
+          else if isPostVideo(p)
+            video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy").post-media
+                //HLS
+                source(src=decodedVideos[0])
+                // Dash
+                source(src=decodedVideos[1])
+                // Fallback
+                source(src=decodedVideos[2])
+          button(onclick=`toggleDetails('${p.id}')`)
+              | close
diff --git a/src/public/styles.css b/src/public/styles.css
index abc2f13..b1d1318 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -61,9 +61,14 @@ div.media-maximized.container.zoom {
   overflow: auto;
 }
 
+img.media-maximized {
+  cursor: zoom-in;
+}
+
 img.media-maximized.zoom {
   max-width: unset;
   max-height: unset;
+  cursor: zoom-out;
 }
 
 main {
@@ -195,41 +200,6 @@ nav {
   cursor: pointer;
 }
 
-.image-viewer.card {
-  /* Safari on iOS <= 17 */
-  -webkit-backdrop-filter: blur(2rem);
-  backdrop-filter: blur(2rem);
-  position: fixed;
-  inset: 0;
-  box-sizing: border-box;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  z-index: 100;
-}
-
-.image-viewer.card > button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 1rem;
-  padding: initial;
-  height: 3rem;
-  width: 3rem;
-  font-size: 2rem;
-  border-radius: 100%;
-  cursor: pointer;
-}
-
-.image-viewer.card > a > img {
-  max-width: 100vw;
-  max-height: 100vh;
-  width: auto;
-  height: auto;
-}
-
 .gallery.card {
   align-items: center;
 }