Proper .big class usable anywhere using the tableclass parameter.
);
my @modes = sort keys %{ $self->{def} };
);
my @modes = sort keys %{ $self->{def} };
- print '<table id="rows" class="keys">'."\n\n";
+ printf '<table id="rows" class="%s">'."\n\n", $self->{tableclass} // 'keys';
print_row:
for (my $row = -1; $row <= $#{ $keyrows{$self->{map}} }; $row++) {
print_row:
for (my $row = -1; $row <= $#{ $keyrows{$self->{map}} }; $row++) {
sub kbmodes ($modes) {
my %g; # present group classes
my %info = (
sub kbmodes ($modes) {
my %g; # present group classes
my %info = (
+ tableclass => 'keys big',
rows => [1, 0],
);
for my $lead (keys %{$modes}) {
rows => [1, 0],
);
for my $lead (keys %{$modes}) {
font-weight: normal; /* nice and subtle */
}
font-weight: normal; /* nice and subtle */
}
+/* enlarged keys */
+
+.keys.big td {
+ width: 1em;
+ min-width: auto;
+ height: 2.25ex;
+ font-size: 200%;
+ font-size: calc(7vmin - 4px); /* fit 12 keys to page */
+ overflow: visible;
+ position: relative;
+ padding: 0;
+ margin: 0 .2vw -1px;
+}
+
+/* override row alignments */
+.keys.big tbody {
+ font-size: calc(1.4vmin); /* enlarged td conversion */
+}
+.keys.big .row2 {margin-left: 7em}
+.keys.big .row3 {margin-left: 8em}
+.keys.big .row4 {margin-left: 10em}
+.keys.big .row0 {
+ display: none; /* headerless */
+}
+
+.keys.big td b {
+ position: absolute; /* overlay */
+ z-index: 1;
+ top: -1.2ex; /* halfway over shift */
+ left: 0;
+ right: 0;
+ font-size: 50%;
+ opacity: .5;
+ color: #FFF;
+ line-height: 2.25ex;
+}
+.keys.big .meta td b,
+.keys.big .shift td b {
+ display: none;
+}
+
return map { sprintf(
'<link rel="%s" type="text/css" media="all" href="%s" title="%s">',
return map { sprintf(
'<link rel="%s" type="text/css" media="all" href="%s" title="%s">',
- $_ eq $style ? 'stylesheet' : 'alternate stylesheet', "/$_.css?1.14", $_
+ $_ eq $style ? 'stylesheet' : 'alternate stylesheet', "/$_.css?1.17", $_
$showkeys eq 'ghost' ? '<style> .no, .alias {opacity:.5} </style>' : (),
'<script type="text/javascript" src="/keys.js?1.6" async></script>',
);
$showkeys eq 'ghost' ? '<style> .no, .alias {opacity:.5} </style>' : (),
'<script type="text/javascript" src="/keys.js?1.6" async></script>',
);
-if ($Request =~ /^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",
Html({
title => "\L$mode\E keyboard cheat sheet",
+++ /dev/null
-.keys td {
- width: 1em;
- min-width: auto;
- height: 2.25ex;
- font-size: 200%;
- font-size: calc(7vmin - 4px); /* fit 12 keys to page */
- overflow: visible;
- position: relative;
- padding: 0;
- margin: 0 .2vw -1px;
-}
-
-/* row alignments */
-.keys tbody {
- font-size: calc(1.4vmin); /* enlarged td conversion */
-}
-.row2 {margin-left: 7em}
-.row3 {margin-left: 8em}
-.row4 {margin-left: 10em}
-.keys .row0 {
- display: none; /* headerless */
-}
-
-.keys td b {
- position: absolute; /* overlay */
- z-index: 1;
- top: -1.2ex; /* halfway over shift */
- left: 0;
- right: 0;
- font-size: 50%;
- opacity: .5;
- color: #FFF;
- line-height: 2.25ex;
-}
-.keys .meta td b,
-.keys .shift td b {
- display: none;
-}