Fix github pages table jitter
Use grid, since tables are old and janky. type: documentation
This commit is contained in:
parent
9ff627c29f
commit
3f91f042c7
|
@ -26,39 +26,38 @@ a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
#intermodal {
|
||||||
border-collapse: collapse;
|
display: grid;
|
||||||
margin-bottom: var(--margin-vertical);
|
grid-template-columns: repeat(5, 1fr);
|
||||||
margin-left: var(--margin-horizontal);
|
margin-bottom: var(--margin-vertical);
|
||||||
margin-right: var(--margin-horizontal);
|
margin-left: var(--margin-horizontal);
|
||||||
margin-top: var(--margin-vertical);
|
margin-right: var(--margin-horizontal);
|
||||||
|
margin-top: var(--margin-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
#intermodal > * {
|
||||||
border-style: dashed;
|
height: var(--size);
|
||||||
border-width: 1px;
|
width: var(--size);
|
||||||
height: var(--size);
|
|
||||||
width: var(--size);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* intermodal is an isogram */
|
/* intermodal is an isogram */
|
||||||
#i:after { content:'I'; }
|
#i:after { content: 'I'; }
|
||||||
#i:hover:after { content:'私'; }
|
#i:hover:after { content: '私'; }
|
||||||
#n:after { content:'N'; }
|
#n:after { content: 'N'; }
|
||||||
#n:hover:after { content:'∅'; }
|
#n:hover:after { content: '∅'; }
|
||||||
#t:after { content:'T'; }
|
#t:after { content: 'T'; }
|
||||||
#t:hover:after { content:'࿈'; }
|
#t:hover:after { content: '࿈'; }
|
||||||
#e:after { content:'E'; }
|
#e:after { content: 'E'; }
|
||||||
#e:hover:after { content:'Ə'; }
|
#e:hover:after { content: 'Ə'; }
|
||||||
#r:after { content:'R'; }
|
#r:after { content: 'R'; }
|
||||||
#r:hover:after { content:'ℜ'; }
|
#r:hover:after { content: 'ℜ'; }
|
||||||
#m:after { content:'M'; }
|
#m:after { content: 'M'; }
|
||||||
#m:hover:after { content:'☾'; }
|
#m:hover:after { content: '☾'; }
|
||||||
#o:after { content:'O'; }
|
#o:after { content: 'O'; }
|
||||||
#o:hover:after { content:'ꙮ'; }
|
#o:hover:after { content: 'ꙮ'; }
|
||||||
#d:after { content:'D'; }
|
#d:after { content: 'D'; }
|
||||||
#d:hover:after { content:'↓'; }
|
#d:hover:after { content: '↓'; }
|
||||||
#a:after { content:'A'; }
|
#a:after { content: 'A'; }
|
||||||
#a:hover:after { content:'א'; }
|
#a:hover:after { content: 'א'; }
|
||||||
#l:after { content:'L'; }
|
#l:after { content: 'L'; }
|
||||||
#l:hover:after { content:'し'; }
|
#l:hover:after { content: 'し'; }
|
||||||
|
|
|
@ -8,22 +8,18 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="https://github.com/casey/intermodal">
|
<a href="https://github.com/casey/intermodal">
|
||||||
<table>
|
<div id="intermodal">
|
||||||
<tr>
|
<div id="i"></div>
|
||||||
<td id="i"></td>
|
<div id="n"></div>
|
||||||
<td id="n"></td>
|
<div id="t"></div>
|
||||||
<td id="t"></td>
|
<div id="e"></div>
|
||||||
<td id="e"></td>
|
<div id="r"></div>
|
||||||
<td id="r"></td>
|
<div id="m"></div>
|
||||||
</tr>
|
<div id="o"></div>
|
||||||
<tr>
|
<div id="d"></div>
|
||||||
<td id="m"></td>
|
<div id="a"></div>
|
||||||
<td id="o"></td>
|
<div id="l"></div>
|
||||||
<td id="d"></td>
|
</div>
|
||||||
<td id="a"></td>
|
|
||||||
<td id="l"></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</a>
|
</a>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user