From b5770997564659fc6a205c774152f6f41d8d1832 Mon Sep 17 00:00:00 2001 From: Mischa POSLAWSKY Date: Wed, 4 Feb 2009 21:11:26 +0000 Subject: [PATCH] integrate digraphs.css in a single stylesheet --- base.css | 220 ++++++++++++++++++++++++++++++++++++++++++++++-- digraphs.css | 233 --------------------------------------------------- digraphs.plp | 10 +-- unicode.plp | 8 +- 4 files changed, 224 insertions(+), 247 deletions(-) delete mode 100644 digraphs.css diff --git a/base.css b/base.css index 38b4b51..918d824 100644 --- a/base.css +++ b/base.css @@ -19,6 +19,9 @@ a:active, a:hover { color: #00F; text-decoration: none; } + +/* common sections */ + h1, h2 { text-align: center; font-size: 200%; @@ -26,11 +29,8 @@ h1, h2 { } h2 { font-size: 125%; - margin-bottom: -4ex; } -/* footer */ - hr { clear: both; visibility: hidden; @@ -38,9 +38,25 @@ hr { margin: 0; } +.diinfo h2 { + margin: 0 1ex; + clear: both; + font-size: 110%; + text-align: left; +} + +p { + text-align: center; + margin: 1ex 0 1em; +} +p.aside { + font-size: 80%; +} p.footer { + margin: 1em 0 0; +} +hr ~ .footer { margin: 0; - text-align: center; } /* "keyboard" (list of keys) */ @@ -50,6 +66,7 @@ ul { padding: 0; list-style: none; } +ul#rows {margin-top: -5ex} /* top (esc) row fits besides header */ li.row1 {margin-left: 7em} /* row offsets relative to ~6em key width */ li.row2 {margin-left: 8em} li.row3 {margin-left: 10em} /* should actually align to next key on row0 */ @@ -112,6 +129,189 @@ ul.keys.ctrl li b small { /* meta key indicator */ font-weight: normal; /* nice and subtle */ } +/* character table */ + +table.glyphs { + border-collapse: collapse; +} +.glyphs thead th, .glyphs td { + text-align: center; + width: 1.6em; /* regular interval */ +} +.glyphs th, .glyphs td { + border-color: #778; + border: 1px solid #888; + background: #DDD; +} +.glyphs tbody td { + font-size: 112%; +} + +/* table headers */ + +.glyphs th, +.glyphs thead td { + border: 0; + background: transparent; +} +.glyphs thead td { + width: auto; /* no glyph cells in header */ +} +.glyphs th { + padding: 0 0.2em; +} +.diinfo .glyphs th { + font-size: 50%; /* mostly insignificant here */ + font-weight: normal; +} +.diinfo .glyphs tbody th { + text-align: right; /* variable width so keep near cells */ + padding: 0 0.5em; +} + +/* digraphs map */ + +table.glyphs.dimap { + table-layout: fixed; /* prevent resizing, notably in msie6 */ +} +.glyphs.dimap thead th, .glyphs.dimap td { + /* below-maximum size (but still average enough to be regular) so we can fit more */ + width: 1.2em; /* msie only looks at the first row */ + min-width: 1em; /* prevents gecko from restricting to page width */ +} +.glyphs.dimap th { + text-align: center; /* row headers are also glyph-sized */ +} + +.glyphs.dimap tbody, .glyphs.dimap colgroup { + border: 2px double #888; /* major character group grid */ +} +.glyphs.dimap tbody { + border-width: 2px 0; /* horizontal group dividers */ +} +.glyphs.dimap colgroup { + border-width: 0 2px; /* vertical divides */ +} + +/* digraph selection */ + +.diinfo { + -moz-column-width: 24em; +} +.diinfo > div { + overflow: hidden; +} + +.diinfo table.glyphs { + margin: 1ex 1ex 2ex; + float: left; +} + +/* glyph cell overlay (digraph labels) */ + +.glyphs.dilabel td { + padding: 0; + padding-bottom: 1.1ex; /* reserve space for label */ + vertical-align: bottom; +} +.glyphs small { + font-size: 50%; + display: block; + margin-top: 0.2ex; + margin-bottom: -2.2ex; /* take cell padding */ +} +.glyphs small.digraph { + background: #888; + color: #FFF; + + background: #000; + color: #FFF; + opacity: 0.3; +} +.glyphs small.value { + background: #CCC; + color: #666; + + background: #600; + color: #FFF; + opacity: 0.3; +} + +/* character properties */ + +td.X {background: #FFF} /* unidentified */ +td.Xr {background: #EEE} /* reverse */ +td.Xa {color: #0A0} /* ascii */ +td.Xl {color: #070} /* latin1 */ + .Xz {color: #D00} /* proposed */ + +td.Lm, td.Mc, td.Me, td.Zl, td.Zp, td.Cs {background: #F00} /* unstyled */ + +/* letter scripts */ +td.Greek {background: #FFE0CF} +td.Cyrillic {background: #FFDDA8} +td.Latin {background: #FFB} +td.Hebrew {background: #FFD} +td.Arabic {background: #EFE} +td.Hangul {background: #DEA} +td.Katakana {background: #DFA} +td.Hiragana {background: #DFC} +td.Bopomofo {background: #BFC} + +/* other categories */ +td.Nd, td.Nl, td.No {background: #FBB} /* number */ +td.Sc {background: #FCD} /* currency */ +td.Sm {background: #ECE} /* math */ +td.So {background: #DCF} /* symbol */ +td.Cf, td.Pd, td.Po {background: #CDF} /* punctuation */ +td.Ps, td.Pe, td.Pi, td.Pf {background: #BEF} /* quote */ +td.Lm, td.Sk {background: #CEE} /* spacing modifier */ +td.Mn {background: #ACC} /* modifier */ +td.Cc {color: #666; background: #BBB} /* control */ +td.Zs {background: #ACB} /* space */ +td.Zs span {background: #EEE} +td.Co {background: #A99} /* private */ + +/* implementation-based alternatives */ +td.di-b {background: #FDD} /* bmp */ +td.di-d {background: #FFD} /* rfc-1345 digraph */ +td.di-prop {background: #FED} /* proposed digraph */ +td.di-a {background: #EFD} /* ascii */ +td.di-rare {background: #EEE} /* disfavoured */ +td.di-invalid {background: #BBB} /* impossible */ + +/* hover effects */ +td.di-d, +td.X:hover {cursor: help} +td.Greek:hover {background: #FA9} +td.Cyrillic:hover {background: #FB7} +td.Latin:hover {background: #FF6} +td.Hebrew:hover {background: #FFA} +td.Arabic:hover {background: #CFD} +td.Hangul:hover {background: #CE6} +td.Katakana:hover {background: #BF7} +td.Hiragana:hover {background: #AF8} +td.Bopomofo:hover {background: #8FA} +td.Nd:hover, td.Nl:hover, td.No:hover {background: #F88} /* number */ +td.Sc:hover {background: #F8C} /* currency */ +td.Sm:hover {background: #F8F} /* math */ +td.So:hover {background: #A8F} /* symbol */ +td.Cf:hover, td.Pd:hover, td.Po:hover {background: #8AF} /* punctuation */ +td.Ps:hover, td.Pe:hover, td.Pi:hover, td.Pf:hover {background: #8DF} /* quote */ +td.Lm:hover, td.Sk:hover {background: #BFF} /* spacing modifier */ +td.Mn:hover {background: #CDE} /* modifier */ +td.Zs:hover {background: #CED} /* space */ +td.Cc:hover {background: #DDD} /* control */ +td.Co:hover {background: #A77} /* private */ +td.Xa:hover {outline: 1px solid #0F0} /* ascii */ +td.Xl:hover {outline: 1px solid #0C0} /* latin1 */ +td.Xz:hover {outline: 1px solid #F00} /* proposed */ +td.di-rare:hover {background: #BBB} +td.di-b:hover {background: #F88} +td.di-d:hover {background: #FF8} +td.di-prop:hover {background: #FC8} +td.di-a:hover {background: #CF8} + /* key type colorization */ .pm {background: #BFB} /* motion */ @@ -211,6 +411,16 @@ ul.legend-set li { margin: 6px 0; /* similar to dl legends */ } +.legend { + margin-top: 1em; +} +.legend table { + width: 100%; +} +.legend td { + padding: 0 0.2em; +} + /* printing hints */ @page { @@ -219,6 +429,6 @@ ul.legend-set li { } @media print { - ul.legend-set {display: none} + ul.legend-set {display: none} /* current options only relevant on dynamic media */ } diff --git a/digraphs.css b/digraphs.css deleted file mode 100644 index a4b903a..0000000 --- a/digraphs.css +++ /dev/null @@ -1,233 +0,0 @@ -/* general */ - -body { - background: #FFF; - color: #000; -} - -a, a:visited { - color: #000; - text-decoration: underline; -} -a:active, a:hover { - color: #00F; - text-decoration: none; -} - -/* head/foot */ - -h1 { - text-align: center; - font-size: 180%; /* 200% * 90% */ - margin: 0 0 0.5ex; -} -h2 { - margin: 0 1ex; - font-size: 100%; - clear: both; -} -p { - text-align: center; - font-size: 90%; /* like base.css body */ - margin: 1ex 0 1em; -} -p#footer { - margin: 1em 0 0; -} - -/* digraph table */ - -table.glyphs { - border-collapse: collapse; -} -.glyphs thead th, .glyphs td { - text-align: center; - width: 1.6em; /* regular interval */ -} -.glyphs th, .glyphs td { - border-color: #778; - border: 1px solid #888; - background: #DDD; -} - -/* table headers */ - -.glyphs th { - text-align: left; - font-size: 50%; - background: #888; - background: #778; - background: #889; - color: #FFF; - padding: 0 0.2em; -} -.glyphs.dimap th, -.glyphs thead td { - /* reset to background styling */ - border: 0; - background: transparent; - color: inherit; - font-size: 90%; -} -.glyphs thead td { - width: auto; -} - -/* digraphs map */ - -table.glyphs.dimap { - table-layout: fixed; /* prevent resizing, notably in msie6 */ -} -.glyphs.dimap thead th, .glyphs.dimap td { - /* below-maximum size (but still average enough to be regular) so we can fit more */ - width: 1.2em; /* msie only looks at the first row */ - min-width: 1em; /* prevents gecko from restricting to page width */ -} -.glyphs.dimap th { - text-align: center; /* row headers are also glyph-sized */ -} - -.glyphs.dimap tbody, .glyphs.dimap colgroup { - border: 2px double #888; /* major character group grid */ -} -.glyphs.dimap tbody { - border-width: 2px 0; /* horizontal group dividers */ -} -.glyphs.dimap colgroup { - border-width: 0 2px; /* vertical divides */ -} - -/* digraph selection */ - -.diinfo { - -moz-column-width: 24em; -} -.diinfo > div { - overflow: hidden; -} - -.diinfo table.glyphs { - margin: 1ex 1ex 2ex; - float: left; -} - -/* legend */ - -#legend { - margin-top: 1em; -} -#legend table { - width: 100%; -} -#legend tbody { - border: 0; -} -#legend td { - padding: 0 0.2em; -} - -/* glyph cell overlay (digraph labels) */ - -.glyphs.dilabel td { - padding: 0; - padding-bottom: 1.1ex; /* reserve space for label */ - vertical-align: bottom; -} -.glyphs small { - font-size: 50%; - display: block; - margin-top: 0.2ex; - margin-bottom: -2.2ex; /* take cell padding */ -} -.glyphs small.digraph { - background: #888; - color: #FFF; - - background: #000; - color: #FFF; - opacity: 0.3; -} -.glyphs small.value { - background: #CCC; - color: #666; - - background: #600; - color: #FFF; - opacity: 0.3; -} - -/* character properties */ - -td.X {background: #FFF} /* unidentified */ -td.Xr {background: #EEE} /* reverse */ -td.Xa {color: #0A0} /* ascii */ -td.Xl {color: #070} /* latin1 */ - .Xz {color: #D00} /* proposed */ - -td.Lm, td.Mc, td.Me, td.Zl, td.Zp, td.Cs {background: #F00} /* unstyled */ - -/* letter scripts */ -td.Greek {background: #FFE0CF} -td.Cyrillic {background: #FFDDA8} -td.Latin {background: #FFB} -td.Hebrew {background: #FFD} -td.Arabic {background: #EFE} -td.Hangul {background: #DEA} -td.Katakana {background: #DFA} -td.Hiragana {background: #DFC} -td.Bopomofo {background: #BFC} - -/* other categories */ -td.Nd, td.Nl, td.No {background: #FBB} /* number */ -td.Sc {background: #FCD} /* currency */ -td.Sm {background: #ECE} /* math */ -td.So {background: #DCF} /* symbol */ -td.Cf, td.Pd, td.Po {background: #CDF} /* punctuation */ -td.Ps, td.Pe, td.Pi, td.Pf {background: #BEF} /* quote */ -td.Lm, td.Sk {background: #CEE} /* spacing modifier */ -td.Mn {background: #ACC} /* modifier */ -td.Cc {color: #666; background: #BBB} /* control */ -td.Zs {background: #ACB} /* space */ -td.Zs span {background: #EEE} -td.Co {background: #A99} /* private */ - -/* implementation-based alternatives */ -td.di-b {background: #FDD} /* bmp */ -td.di-d {background: #FFD} /* rfc-1345 digraph */ -td.di-prop {background: #FED} /* proposed digraph */ -td.di-a {background: #EFD} /* ascii */ -td.di-rare {background: #EEE} /* disfavoured */ -td.di-invalid {background: #BBB} /* impossible */ - -/* hover effects */ -td.di-d, -td.X:hover {cursor: help} -td.Greek:hover {background: #FA9} -td.Cyrillic:hover {background: #FB7} -td.Latin:hover {background: #FF6} -td.Hebrew:hover {background: #FFA} -td.Arabic:hover {background: #CFD} -td.Hangul:hover {background: #CE6} -td.Katakana:hover {background: #BF7} -td.Hiragana:hover {background: #AF8} -td.Bopomofo:hover {background: #8FA} -td.Nd:hover, td.Nl:hover, td.No:hover {background: #F88} /* number */ -td.Sc:hover {background: #F8C} /* currency */ -td.Sm:hover {background: #F8F} /* math */ -td.So:hover {background: #A8F} /* symbol */ -td.Cf:hover, td.Pd:hover, td.Po:hover {background: #8AF} /* punctuation */ -td.Ps:hover, td.Pe:hover, td.Pi:hover, td.Pf:hover {background: #8DF} /* quote */ -td.Lm:hover, td.Sk:hover {background: #BFF} /* spacing modifier */ -td.Mn:hover {background: #CDE} /* modifier */ -td.Zs:hover {background: #CED} /* space */ -td.Cc:hover {background: #DDD} /* control */ -td.Co:hover {background: #A77} /* private */ -td.Xa:hover {outline: 1px solid #0F0} /* ascii */ -td.Xl:hover {outline: 1px solid #0C0} /* latin1 */ -td.Xz:hover {outline: 1px solid #F00} /* proposed */ -td.di-rare:hover {background: #BBB} -td.di-b:hover {background: #F88} -td.di-d:hover {background: #FF8} -td.di-prop:hover {background: #FC8} -td.di-a:hover {background: #CF8} - diff --git a/digraphs.plp b/digraphs.plp index b4d3d01..98fba89 100644 --- a/digraphs.plp +++ b/digraphs.plp @@ -16,16 +16,16 @@ $header{content_type} = 'text/html; charset=utf-8'; digraph cheat sheet - + - +

RFC-1345 Digraphs

i^k in Vim. Also see common digraphs.

-

Unofficial proposals +

Unofficial proposals are available as ex commands.

<: @@ -87,7 +87,7 @@ for my $c1group (@chars) { } print "\n"; :> -
+
control spacing @@ -117,7 +117,7 @@ print "
\n";
-

sheet.shiar.nl/digraphs <:= "v$VERSION" :> created by • diff --git a/unicode.plp b/unicode.plp index 6e585a4..cc133d5 100644 --- a/unicode.plp +++ b/unicode.plp @@ -16,10 +16,10 @@ $header{content_type} = 'text/html; charset=utf-8'; digraph cheat sheet - + - +

Common uncommon Unicode

i^k in Vim. @@ -269,7 +269,7 @@ print_glyph_tables( :>

-
+
ascii digraph @@ -279,7 +279,7 @@ print_glyph_tables(
-

sheet.shiar.nl/unicode <:= "v$VERSION" :> created by • -- 2.30.0