Fix github pages table jitter

Use grid, since tables are old and janky.

type: documentation
This commit is contained in:
Casey Rodarmor 2020-01-31 09:05:20 -08:00
parent 9ff627c29f
commit 3f91f042c7
No known key found for this signature in database
GPG Key ID: 556186B153EC6FE0
2 changed files with 42 additions and 47 deletions

View File

@ -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: 'し'; }

View File

@ -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>