From 58bb00f2e06da0544fd08253bd62d939c4bb60a1 Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 16 Dec 2023 01:15:41 +0100
Subject: [PATCH] keyboard: altgr css for single-glyph keys

Complete override of labels and width adjusted to variable font size.
---
 keyboard-altgr.css | 27 +++++++++++++++++++++++++++
 keyboard.plp       |  5 +++++
 2 files changed, 32 insertions(+)
 create mode 100644 keyboard-altgr.css

diff --git a/keyboard-altgr.css b/keyboard-altgr.css
new file mode 100644
index 0000000..50c182f
--- /dev/null
+++ b/keyboard-altgr.css
@@ -0,0 +1,27 @@
+.keys .row0 {
+	display: none; /* headerless */
+}
+.keys td {
+	width: 1em;
+	min-width: auto;
+	height: 2.25ex;
+	font-size: 200%;
+	font-size: calc(7.5vmin - 9px); /* fit 12 keys to page */
+	overflow: visible;
+	position: relative;
+	padding: 0;
+}
+.keys td b {
+	position: absolute; /* overlay */
+	z-index: 1;
+	top: 3.3ex; /* halfway over bottom */
+	left: 0;
+	right: 0;
+	font-size: 50%;
+	opacity: .5;
+	color: #FFF;
+	line-height: 2.25ex;
+}
+.keys .shift td b {
+	display: none;
+}
diff --git a/keyboard.plp b/keyboard.plp
index 4a49ebb..7689af5 100644
--- a/keyboard.plp
+++ b/keyboard.plp
@@ -16,6 +16,11 @@ my @keystyle = (
 	$showkeys eq 'ghost' ? '<style> .no, .alias {opacity:.5} </style>' : (),
 	'<script type="text/javascript" src="/keys.js?1.6" async></script>',
 );
+if ($include =~ /^altgr/ and open my $cssinc, '<', 'keyboard-altgr.css') {
+	local $/;
+	my $data = readline $cssinc;
+	push @keystyle, "<style>\n$data</style>";
+}
 
 Html({
 	title => "\L$mode\E keyboard cheat sheet",
-- 
2.30.0