From 5a183f12ba50024975cb19fa3dbf635d7249d651 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sun, 25 Feb 2024 17:46:16 -0400 Subject: css: fixes & tweaks for reveal, mostly in grid --- src/static/site6.css | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'src/static') diff --git a/src/static/site6.css b/src/static/site6.css index 2bb44dd..686b3c4 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -1266,6 +1266,7 @@ img.pixelate, .pixelate img { .reveal .image.reveal-thumbnail { position: absolute; top: 0; + left: 0; image-rendering: pixelated; } @@ -1309,6 +1310,15 @@ img.pixelate, .pixelate img { border: 1px dotted var(--primary-color); border-radius: var(--reveal-border-radius); pointer-events: none; + + /* By an awkward DOM intersection, this element might be + * .image-inner-area::after, which is already styled with + * a slight visual effect. Guarantee that the properties + * set to that end are overwritten, and fully co-opt it + * to serve as the interaction cue instead. + */ + box-shadow: none; + opacity: 1; } .reveal:not(.revealed) .image-inner-area { @@ -1317,6 +1327,7 @@ img.pixelate, .pixelate img { .reveal:not(.revealed) .image-outer-area > *:hover::after { border-style: solid; + box-shadow: 0 0 0 1.5px #00000099 inset; } .reveal:not(.revealed) .image-outer-area > *:hover .image { -- cgit 1.3.0-6-gf8a5