keyboard: altgr css for single-glyph keys

Complete override of labels and width adjusted to variable font size.

diff --git a/keyboard-altgr.css b/keyboard-altgr.css
new file mode 100644 (file)
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 4a49ebba91a52e64ddc6420a86bfce8d8193d727..7689af5851591a3e3fbaaf96ac2d7d4f47e51e7a 100644 (file)
--- 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",