unicode: common and improved css

[sheet.git] / unicode.plp
diff --git a/unicode.plp b/unicode.plp

index 81e54a3f5593f2b4c57acb924ffa5715a081aea1..d5e01450b3258ddbadbad49c49a803fbe243d113 100644 (file)
--- a/unicode.plp
+++ b/unicode.plp
@@ -17,78 +17,6 @@ $header{content_type} = 'text/html; charset=utf-8';
  <title>digraph cheat sheet</title>
  <meta http-equiv="content-type" content="utf-8">
  <link rel="stylesheet" type="text/css" media="all" href="/digraphs.css">
-<style>
-#list-common {
-       overflow: hidden;
-}
-
-table {
-       margin: 1ex 1ex 2ex;
-       float: left;
-       table-layout: auto;
-}
-thead td {
-       width: auto;
-}
-tbody {
-       border-width: 0;
-}
-h2, h3 {
-       clear: both;
-}
-h2 {
-       margin: 0 1ex;
-       font-size: 100%;
-}
-
-th {
-       text-align: left;
-       font-size: 50%;
-       background: #888;
-       background: #778;
-       background: #889;
-       color: #FFF;
-       padding: 0 0.2em;
-}
-th, td {
-       border-color: #778;
-       border: 1px solid #888;
-}
-thead td {
-       border: 0;
-       background: transparent;
-}
-thead th {
-       text-align: center;
-}
-
-td {
-       vertical-align: top;
-       margin: 0;
-       padding: 0;
-       width: 1.6em;
-}
-small {
-       font-size: 50%;
-       display: block;
-}
-small.digraph {
-       background: #888;
-       color: #FFF;
-
-       background: #000;
-       color: #FFF;
-       opacity: 0.3;
-}
-small.value {
-       background: #CCC;
-       color: #666;
-
-       background: #800;
-       color: #FFF;
-       opacity: 0.3;
-}
-</style>
  </head>
  
  <body>
@@ -97,7 +25,7 @@ small.value {
  <p>i^k in <a href="/">Vim</a>.
  Also see the <a href="/digraphs">complete digraphs table</a>.</p>
  
-<div id="list-common">
+<div class="diinfo">
  
  <:
  my $diinfo = do 'digraphs.inc.pl';
@@ -173,26 +101,29 @@ sub table {
                         @$colheads
         }
  
-       return sprintf "<table>\n%s</table>\n", join '', map {"<tr>$_\n"} @rows;
+       return sprintf qq{<table class="glyphs dilabel">\n%s</table>\n},
+               join '', map {"<tr>$_\n"} @rows;
  }
  
-print "<h2>Common</h2>\n\n";
+print "<div>\n", "<h2>Popular</h2>\n\n";
  print table(@$_) for (
         [ 3 => [qw{. « » . ‹ › . ‘ ’ . “ ” . „ ‚}]],
         [ 3 => [qw{. † ‡ • . § ¶ # . © ® ™ . − × ÷ . ± ² √}]],
         [ 3 => [qw{. å ä ö ü ß . Å æ ø ű ſ}]],
         [ 3 => [qw{. ¿ ç ñ é ê è}]],
  );
+print "</div>\n\n";
  
-print "<h2>Arrows</h2>\n\n";
+print "<div>\n", "<h2>Arrows</h2>\n\n";
  print table(@$_) for (
         [ 4 => [qw{. ↖ ↑ ↗ ↔ . ← - → ↕ . ↙ ↓ ↘ -}]],
         [ 4 => [qw{. ⇖ ⇑ ⇗ ⇔ . ⇐ - ⇒ ⇕ . ⇙ ⇓ ⇘ -}]],
         [ 3 => [qw{. ◤ ▲ ◥ . ◀ ◆ ▶ . ◣ ▼ ◢}]],
         [ 3 => [qw{. ◸ △ ◹ . ◁ ◇ ▷ . ◺ ▽ ◿}]],
  );
+print "</div>\n\n";
  
-print "<h2>Line drawing</h2>\n\n";
+print "<div>\n", "<h2>Line drawing</h2>\n\n";
  print table(@$_) for (
         [ 4 => [qw{. ┌ ┬ ┐ . ├ ┼ ┤ . └ ┴ ┘}]],
         [ 4 => [qw{. ┏ ┳ ┓ . ┣ ╋ ┫ . ┗ ┻ ┛}]],
@@ -209,8 +140,9 @@ print table(@$_) for (
         [ 3 => [qw{. ╒ ╤ ╕ . ╞ ╪ ╡ . ╘ ╧ ╛ }]],
         [ 3 => [qw{. ╓ ╥ ╖ . ╟ ╫ ╢ . ╙ ╨ ╜ }]],
  );
+print "</div>\n\n";
  
-print "<h2>Blocks</h2>\n\n";
+print "<div>\n", "<h2>Blocks</h2>\n\n";
  print table(@$_) for (
         [ 3 => [qw{. ▘ ▀ ▝ . ▌ █ ▐ . ▖ ▄ ▗ }]],
         [ 3 => [qw{. ░ . ▒ . ▓ }]],
@@ -218,16 +150,18 @@ print table(@$_) for (
         [ 2 => [qw{. ▁ ▂ ▃ ▄ ▅ ▆ ▇ ▔ . ▏ ▎ ▍ ▌ ▋ ▊ ▉ ▕ }]],
         [ 3 => [qw{. □ ▣ ■ . ▤ ▦ ▥ . ▧ ▩ ▨}]],
  );
+print "</div>\n\n";
  
-print "<h2>Signs</h2>\n\n";
+print "<div>\n", "<h2>Signs</h2>\n\n";
  print table(@$_) for (
         [ 8 => [qw{. ¤ ¢ ₥ € £ ₨ $ ¥ . ₫ ₭ ₦ ₱ ₧ ₮ ₩ ₪}]],
         [ 4 => [qw{. ♠ ♡ ♢ ♣ . ♤ ♥ ♦ ♧}]],
         [ 5 => [qw{. ☉ ☿ ♀ ♁ ♂ ♃ ♄ ♅ ♆ ♇}]],  # solar
         [12 => [qw{. ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓}]],  # zodiac
  );
+print "</div>\n\n";
  
-print "<h2>IPA</h2>\n\n";
+print "<div>\n", "<h2>IPA</h2>\n\n";
  print table(@$_) for (
         [
                 12 => [qw{
@@ -278,8 +212,9 @@ print table(@$_) for (
                 [map {substr($_, 0, 1).':'.$_, substr($_, 0, 1)." r:$_ rounded"} qw{Front Central Back}]
         ],
  );
+print "</div>\n\n";
  
-print "<h2>Alphabetics</h2>\n\n";
+print "<div>\n", "<h2>Alphabetics</h2>\n\n";
  print table(1,
         [ map { ('.', split //, $_->[1]) } @$_ ],
         [ map {                 $_->[0]  } @$_ ],
@@ -289,8 +224,9 @@ print table(1,
         [Greek    => 'αίϊηϋπψσςθξΩ'],
         [Hebrew   => 'אײיעונןסשטצץ'],
  ];
+print "</div>\n\n";
  
-print "<h2>Japanese</h2>\n\n";
+print "<div>\n", "<h2>Japanese</h2>\n\n";
  print table(@$_) for (
         [
                 1 => [qw{
@@ -348,6 +284,7 @@ print table(@$_) for (
                 [qw{A I U E O}],
         ],
  );
+print "</div>\n\n";
  
  :></div>