From d12c1560f83f4bf9535ab45c412c1f6ad698b023 Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 19 Jul 2008 01:40:50 +0000
Subject: [PATCH] terse stylesheet

Puts key names over the entire key, instead of placing them besides the
descriptions.  This allows the buttons to be much less wide, making the
entire keyboard fit on lesser resolutions as well.

The CSS surprisingly even seems to work in MSIE.  Unfortunately the key
label is always on top (z-indexes won't help here), but with enough
transparancy they still kind of fade to the background (IE is out of
luck here; I'm not going to support their filter crap).
---
 index.plp |  2 +-
 terse.css | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 terse.css

diff --git a/index.plp b/index.plp
index 4b16cd2..2b1d3e2 100644
--- a/index.plp
+++ b/index.plp
@@ -31,7 +31,7 @@ $header{content_type} = $ctype;
 <link rel="stylesheet" type="text/css" media="all" href="base.css">
 <!--[if lte IE 6]><style> .help dl.legend dt {margin:0 0 1px} </style><![endif]-->
 <!--[if lte IE 7]><style> .help dl.legend dd {float:none} </style><![endif]--><:
-	my %styles = map {$_ => $_} qw(dark circus mono);
+	my %styles = map {$_ => $_} qw(dark circus mono terse);
 	our $style = exists $get{style} && $styles{$get{style}} || "light";
 	printf(qq{\n<link rel="%s" type="text/css" media="all" href="%s" title="%s">},
 		$_ eq $style ? "stylesheet" : "alternate stylesheet", "$_.css", $_
diff --git a/terse.css b/terse.css
new file mode 100644
index 0000000..601f81b
--- /dev/null
+++ b/terse.css
@@ -0,0 +1,15 @@
+ul.keys li {
+	position: relative; /* hides overflow */
+	width: 4.5em;
+}
+ul.keys li b,
+ul.keys.ctrl li b,
+ul.keys.lead li b { /* leading chars always fit */
+	position: absolute; /* background */
+	right: 0; /* least overlap in corner */
+	font-size: 250%;
+	line-height: 2.5ex;
+	opacity: .5;
+	color: #FFF;
+}
+
-- 
2.30.0