RogerDodger (talk | contribs) (Created page with "→gonna rewrite this to use a grid layout tomorrow: .key-move { min-width: 20px; width: calc(20vw - 32px); max-width: 80px; } .key-moves-legend .key-move { wid...") |
RogerDodger (talk | contribs) No edit summary |
||
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.key-moves { | |||
display: block; | |||
max-width: 700px; | |||
} | |||
.key-moves tbody { | |||
display: grid; | |||
grid-template-columns: auto repeat(6, 1fr); | |||
grid-auto-rows: auto; | |||
align-items: center; | |||
gap: 2px; | |||
} | |||
.key- | .key-moves.extra-col { | ||
max-width: 800px; | |||
} | } | ||
.key-moves | .key-moves.extra-col tbody { | ||
grid-template-columns: auto repeat(7, 1fr); | |||
} | } | ||
.key-moves td { | .key-moves tr { | ||
display: contents; | |||
} | |||
.key-moves td:first-of-type { | |||
text-align: center; | text-align: center; | ||
grid-column: 1; | |||
} | } | ||
.key- | .key-moves th { | ||
overflow: hidden; | |||
white-space: nowrap; | |||
text-overflow: '·'; | |||
} | |||
.key- | .key-move-cell { | ||
width: 30px; | |||
} | } | ||
@ | @supports (display: grid) { | ||
.key-moves .key-move-cell { | |||
width: 100%; | |||
} | |||
} | } | ||
.key-move-cell.core { height: 1em; } | |||
.key-move-cell.secondary { height: 0.7em; } | |||
.key-move-cell.extra { height: 0.4em; } |
Latest revision as of 08:33, 9 July 2021
.key-moves {
display: block;
max-width: 700px;
}
.key-moves tbody {
display: grid;
grid-template-columns: auto repeat(6, 1fr);
grid-auto-rows: auto;
align-items: center;
gap: 2px;
}
.key-moves.extra-col {
max-width: 800px;
}
.key-moves.extra-col tbody {
grid-template-columns: auto repeat(7, 1fr);
}
.key-moves tr {
display: contents;
}
.key-moves td:first-of-type {
text-align: center;
grid-column: 1;
}
.key-moves th {
overflow: hidden;
white-space: nowrap;
text-overflow: '·';
}
.key-move-cell {
width: 30px;
}
@supports (display: grid) {
.key-moves .key-move-cell {
width: 100%;
}
}
.key-move-cell.core { height: 1em; }
.key-move-cell.secondary { height: 0.7em; }
.key-move-cell.extra { height: 0.4em; }