terse stylesheet
authorMischa POSLAWSKY <perl@shiar.org>
Sat, 19 Jul 2008 01:40:50 +0000 (01:40 +0000)
committerMischa POSLAWSKY <perl@shiar.org>
Fri, 1 Aug 2008 00:18:29 +0000 (00:18 +0000)
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
terse.css [new file with mode: 0644]

index 4b16cd2..2b1d3e2 100644 (file)
--- 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 (file)
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;
+}
+