From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 19 Feb 2022 15:37:07 +0000 (+0100)
Subject: word: hover gallery captions only on larger screens
X-Git-Tag: v1.13~17
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/b186706a9bd66b428574cbb8c02554f0c4434b8f

word: hover gallery captions only on larger screens
---

diff --git a/base.css b/base.css
index 0149f2f..8738378 100644
--- a/base.css
+++ b/base.css
@@ -671,21 +671,33 @@ figure {
 	margin: 0;
 	position: relative;
 }
-figcaption {
-	position: absolute;
-	padding: 0 1em;
-	color: #000;
-	background: rgba(255, 255, 255, .66);
-	right: 0;
-	bottom: 0;
-	max-width: 100%;
-	box-sizing: border-box;
-}
 img {
 	vertical-align: bottom;
 	width: 100%;
 }
 
+@media (min-width: 60em) {
+	figcaption {
+		padding: 0 1em;
+		color: #000;
+		background: rgba(255, 255, 255, .66);
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		max-width: 100%;
+		box-sizing: border-box;
+	}
+	.gallery li.parent:hover > figure > figcaption,
+	.gallery figure:hover > figcaption {
+		/* highlight title of current and parents */
+		font-size: 175%;
+		right: 50%;
+		bottom: 50%;
+		transform: translate(50%, 50%);
+		margin-left: -60%; /* keep width */
+	}
+}
+
 /* image gallery */
 
 .gallery {
@@ -729,16 +741,6 @@ img {
 	background: rgba(0, 0, 0, .5);
 }
 
-.gallery li.parent:hover > figure > figcaption,
-.gallery figure:hover > figcaption {
-	/* highlight title of current and parents */
-	font-size: 175%;
-	right: 50%;
-	bottom: 50%;
-	transform: translate(50%, 50%);
-	margin-left: -60%; /* keep width */
-}
-
 body#word {
 	margin: 8px 1px;
 }