X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/6200f20ad733db0f13be5dc766249c3c1f500937..8f3926f175ec30fc480f9707ec845b3c59237c26:/base.css

diff --git a/base.css b/base.css
index d728a39..8738378 100644
--- a/base.css
+++ b/base.css
@@ -140,7 +140,7 @@ dl > dd {
 
 /* "keyboard" (list of keys) */
 
-#rows {margin-top: -5ex} /* top (esc) row fits besides header */
+.row0 {margin-top: -5ex} /* top (esc) row fits besides header */
 .row2 {margin-left: 7em} /* row offsets relative to ~6em key width */
 .row3 {margin-left: 8em}
 .row4 {margin-left: 10em} /* should actually align to next key on row1 */
@@ -671,19 +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;
-}
 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 {
@@ -727,14 +741,8 @@ 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;
 }
 
 /* page-specific */
@@ -876,6 +884,16 @@ body .magic-perma {
 
 /* terse optimisation */
 
+@media (min-height: 112ex) and (min-width: 90em) {
+	table.keys {
+		width: auto;
+	}
+	.keys td {
+		padding: 1ex 0 1ex .1em;
+		width: 7em;
+	}
+}
+
 @media (max-width: 79em) {
 	.keys td {
 		position: relative; /* hides overflow */