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).

diff --git a/index.plp b/index.plp
index 4b16cd23c6e936e9d5596c446c3bc4a9f3281780..2b1d3e28b4b3b7794f08bb33ae481695a0669152 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]--><:
 <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", $_
        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;
+}
+