caption {
margin: 1ex;
}
+caption aside {
+ position: absolute;
+ margin-left: 1ex;
+ font-weight: normal;
+ display: inline;
+}
hr {
clear: both;
margin: 2ex auto;
clear: both;
}
+.error > * {
+ margin-bottom: 1ex;
+}
+.error > *:last-child {
+ margin-bottom: 0;
+}
ul {
margin: 0;
list-style: none;
}
-#source pre {
+pre {
display: inline-block;
text-align: left;
}
+body > pre {
+ width: 78ch;
+ tab-size: 4;
+ -moz-tab-size: 4;
+ padding: 0 1em;
+ border-width: 0 1px;
+ border-style: solid;
+}
h2 small {
position: absolute; /* side note; do not influence alignment */
table.keys {
display: block;
- width: 82.5em; /* 12 * (2px + 1px + 6.2em + 1px + 2px) + 8em*/
+ width: 82.5em; /* 12 * td(2px + 1px + 6.2em + 1px + 2px) + 8em */
// padding-right: 72px;
border-spacing: 0;
border-collapse: collapse;
font-size: 100%;
}
+.cover td {
+ min-width: 2.5ex; /* square cells */
+}
+
/* table headers */
th,
tfoot td,
thead td {
- border: 0;
+ border-width: 0;
background: transparent;
}
.glyphs thead td {
padding-bottom: 1.1ex; /* reserve space for label */
vertical-align: bottom;
}
-.glyphs small {
+.glyphs.dilabel small {
font-size: 50%;
display: block;
margin-top: 0.2ex;
margin-bottom: -2.2ex; /* take cell padding */
}
-.glyphs small.digraph {
+.glyphs.dilabel small.digraph {
background: #000;
color: #FFF;
opacity: 0.3;
}
-.glyphs small.value {
+.glyphs.dilabel small.value {
background: #600;
color: #FFF;
opacity: 0.3;
.sy-error { font-weight: bold; background-color: #F00; color: #FFF }
.sy-todo { background-color: #FF0 }
+/* boolean alternate */
+.glyphs b { font-weight: normal; color: #800 }
+
/* hover effects */
.X:hover {cursor: help}
.X:hover > span {background: #FFF} /* whitespace marker */
right: 1em;
}
+.family-name {
+ font-variant: small-caps;
+}
+
+#index nav {
+ columns: 3;
+ -moz-columns: 3;
+ -webkit-columns: 3;
+}
+nav > .section {
+ break-inside: avoid;
+ -webkit-column-break-inside: avoid; /* webkit */
+ page-break-inside: avoid; /* moz */
+ overflow: hidden; /* webkit workaround */
+}
+#index nav a {
+ display: inline-block;
+ margin-top: 1em;
+}
+
/* printing hints */
@page {
ul.legend-set {display: none} /* current options only relevant on dynamic media */
}
+/* terse optimisation */
+
+@media (max-width: 79em) {
+ .keys td {
+ position: relative; /* hides overflow */
+ width: 4.5em;
+ }
+ .keys td b,
+ .keys.meta td b,
+ .keys.ctrl td b,
+ .keys.lead td 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;
+ }
+ table.keys {
+ width: 62.1em; /* 82.5em - 12 * Δtd(6.2em - 4.5em) */
+ }
+ @media (max-width: 61em) {
+ .keys td {
+ width: 3em;
+ height: 6.75ex; /* 3 lines */
+ font-size: 80%;
+ }
+ table.keys {
+ width: 37em; /* (12 * td(3em + 6px) + 8em) * 80% */
+ }
+ }
+}
+
+/*
+@media screen and (orientation: portrait) and (max-width: 62em) {
+ body table.keys,
+ #rows {
+ margin-top: 1ex;
+ transform: rotate(90deg);
+ transform-origin: top left;
+ width: 68em;
+ height: 37em;
+ margin-left: 40em;
+ margin-bottom: 30em;
+ font-size: 80%;
+ }
+}
+*/