From 6e7de2f966ddbde5d85d5dc98d0c653f7a962dc6 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:19:31 +0800
Subject: [PATCH] adapt to .post_thumbnail being a wrapper + add unblur on
 click styles

---
 static/style.css | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/static/style.css b/static/style.css
index a9d893a..1adf1b6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1141,10 +1141,11 @@ a.search_subreddit:hover {
     filter: blur(0.25rem);
 }
 
-.post_blurred .post_thumbnail * {
+.post_blurred .post_thumbnail a * {
     filter: blur(0.3rem);
 }
 
+/* Unblur on hover */
 .post_blurred .post_media_content:hover *,
 .post_blurred .post_media_content:hover ~ .post_body,
 .post_blurred .post_media_content:has(~ .post_body:hover) *,
@@ -1153,6 +1154,22 @@ a.search_subreddit:hover {
 	filter: none;
 }
 
+/* Unblur on click */
+.post_blurred .post_media_content a,
+.post_blurred .post_body a,
+.post_blurred .post_thumbnail a {
+	pointer-events: none;
+}
+
+.post_blurred .post_media_content:focus *,
+.post_blurred .post_media_content:focus ~ .post_body,
+.post_blurred .post_media_content:has(~ .post_body:focus) *,
+.post_blurred .post_body:focus,
+.post_blurred .post_thumbnail:focus * {
+	filter: none;
+	pointer-events: auto;
+}
+
 .post_media_image svg {
     max-width: 100%;
     height: auto;
@@ -1306,13 +1323,16 @@ a.search_subreddit:hover {
 .post_thumbnail {
     border-radius: 5px;
     border: var(--panel-border);
-    display: grid;
     overflow: hidden;
     background-color: var(--background);
     grid-area: post_thumbnail;
     margin: 5px;
 }
 
+.post_thumbnail a {
+    display: grid;
+}
+
 .post_thumbnail div {
     grid-area: 1 / 1 / 2 / 2;
     object-fit: cover;
@@ -1334,6 +1354,10 @@ a.search_subreddit:hover {
     background-color: var(--highlighted);
 }
 
+.post_thumbnail.no_thumbnail a {
+    height: 100%;
+}
+
 .post_thumbnail.no_thumbnail svg {
     grid-area: 1 / 1 / 2 / 2;
     align-self: center;