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;
break-inside: avoid;
-webkit-column-break-inside: avoid; /* webkit */
page-break-inside: avoid; /* moz */
+ overflow: hidden; /* webkit workaround */
}
#index nav a {
display: inline-block;
/* terse optimisation */
@media (max-width: 79em) {
- body .keys td {
+ .keys td {
position: relative; /* hides overflow */
width: 4.5em;
}
- body .keys td b,
- body .keys.meta td b,
- body .keys.ctrl td b,
- body .keys.lead td b { /* leading chars always fit */
+ .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%;
opacity: .5;
color: #FFF;
}
+ table.keys {
+ width: 62.1em; /* 82.5em - 12 * Δtd(6.2em - 4.5em) */
+ }
}