nybble
/
paco_sako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

make better use of available vertical space

This commit is contained in:
Jesse D. McDonald 2020-03-14 01:39:19 -05:00
parent 1e8f59332b
commit bd450b3322
2 changed files with 129 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/chess.css
View File

@ -4,6 +4,8 @@ body {
h1 {
font-family: 'Vollkorn', serif;
font-size: 2em;
margin-bottom: 0;
}
button:disabled .silhouette {
@ -29,13 +31,9 @@ button:disabled .silhouette {
}
}
#cb_outer2 {
width: 100%;
max-width: 66.7vh;
}
#cb_outer {
max-width: 6in;
width: 100%;
max-width: calc(100vh - 4em);
}
#cb_container {

252
index.html
View File

@ -11,133 +11,131 @@
<h1>Paco Ŝako</h1>
<div id="content">
<div id="cb_outer2">
<div id="cb_outer">
<div id="cb_container">
<div id="cb_inner">
<table id="cb_board" class="noselect">
<tr>
<td class="cb-corner"></td>
<td class="cb-horiz-label"><div>A</div></td>
<td class="cb-horiz-label"><div>B</div></td>
<td class="cb-horiz-label"><div>C</div></td>
<td class="cb-horiz-label"><div>D</div></td>
<td class="cb-horiz-label"><div>E</div></td>
<td class="cb-horiz-label"><div>F</div></td>
<td class="cb-horiz-label"><div>G</div></td>
<td class="cb-horiz-label"><div>H</div></td>
<td class="cb-corner"></td>
</tr>
<tr id="cb_row8">
<td class="cb-vert-label"><div>8</div></td>
<td id="cb_a8" class="cb-square cb-lt-bg"></td>
<td id="cb_b8" class="cb-square cb-dk-bg"></td>
<td id="cb_c8" class="cb-square cb-lt-bg"></td>
<td id="cb_d8" class="cb-square cb-dk-bg"></td>
<td id="cb_e8" class="cb-square cb-lt-bg"></td>
<td id="cb_f8" class="cb-square cb-dk-bg"></td>
<td id="cb_g8" class="cb-square cb-lt-bg"></td>
<td id="cb_h8" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>8</div></td>
</tr>
<tr id="cb_row7">
<td class="cb-vert-label"><div>7</div></td>
<td id="cb_a7" class="cb-square cb-dk-bg"></td>
<td id="cb_b7" class="cb-square cb-lt-bg"></td>
<td id="cb_c7" class="cb-square cb-dk-bg"></td>
<td id="cb_d7" class="cb-square cb-lt-bg"></td>
<td id="cb_e7" class="cb-square cb-dk-bg"></td>
<td id="cb_f7" class="cb-square cb-lt-bg"></td>
<td id="cb_g7" class="cb-square cb-dk-bg"></td>
<td id="cb_h7" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>7</div></td>
</tr>
<tr id="cb_row6">
<td class="cb-vert-label"><div>6</div></td>
<td id="cb_a6" class="cb-square cb-lt-bg"></td>
<td id="cb_b6" class="cb-square cb-dk-bg"></td>
<td id="cb_c6" class="cb-square cb-lt-bg"></td>
<td id="cb_d6" class="cb-square cb-dk-bg"></td>
<td id="cb_e6" class="cb-square cb-lt-bg"></td>
<td id="cb_f6" class="cb-square cb-dk-bg"></td>
<td id="cb_g6" class="cb-square cb-lt-bg"></td>
<td id="cb_h6" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>6</div></td>
</tr>
<tr id="cb_row5">
<td class="cb-vert-label"><div>5</div></td>
<td id="cb_a5" class="cb-square cb-dk-bg"></td>
<td id="cb_b5" class="cb-square cb-lt-bg"></td>
<td id="cb_c5" class="cb-square cb-dk-bg"></td>
<td id="cb_d5" class="cb-square cb-lt-bg"></td>
<td id="cb_e5" class="cb-square cb-dk-bg"></td>
<td id="cb_f5" class="cb-square cb-lt-bg"></td>
<td id="cb_g5" class="cb-square cb-dk-bg"></td>
<td id="cb_h5" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>5</div></td>
</tr>
<tr id="cb_row4">
<td class="cb-vert-label"><div>4</div></td>
<td id="cb_a4" class="cb-square cb-lt-bg"></td>
<td id="cb_b4" class="cb-square cb-dk-bg"></td>
<td id="cb_c4" class="cb-square cb-lt-bg"></td>
<td id="cb_d4" class="cb-square cb-dk-bg"></td>
<td id="cb_e4" class="cb-square cb-lt-bg"></td>
<td id="cb_f4" class="cb-square cb-dk-bg"></td>
<td id="cb_g4" class="cb-square cb-lt-bg"></td>
<td id="cb_h4" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>4</div></td>
</tr>
<tr id="cb_row3">
<td class="cb-vert-label"><div>3</div></td>
<td id="cb_a3" class="cb-square cb-dk-bg"></td>
<td id="cb_b3" class="cb-square cb-lt-bg"></td>
<td id="cb_c3" class="cb-square cb-dk-bg"></td>
<td id="cb_d3" class="cb-square cb-lt-bg"></td>
<td id="cb_e3" class="cb-square cb-dk-bg"></td>
<td id="cb_f3" class="cb-square cb-lt-bg"></td>
<td id="cb_g3" class="cb-square cb-dk-bg"></td>
<td id="cb_h3" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>3</div></td>
</tr>
<tr id="cb_row2">
<td class="cb-vert-label"><div>2</div></td>
<td id="cb_a2" class="cb-square cb-lt-bg"></td>
<td id="cb_b2" class="cb-square cb-dk-bg"></td>
<td id="cb_c2" class="cb-square cb-lt-bg"></td>
<td id="cb_d2" class="cb-square cb-dk-bg"></td>
<td id="cb_e2" class="cb-square cb-lt-bg"></td>
<td id="cb_f2" class="cb-square cb-dk-bg"></td>
<td id="cb_g2" class="cb-square cb-lt-bg"></td>
<td id="cb_h2" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>2</div></td>
</tr>
<tr id="cb_row1">
<td class="cb-vert-label"><div>1</div></td>
<td id="cb_a1" class="cb-square cb-dk-bg"></td>
<td id="cb_b1" class="cb-square cb-lt-bg"></td>
<td id="cb_c1" class="cb-square cb-dk-bg"></td>
<td id="cb_d1" class="cb-square cb-lt-bg"></td>
<td id="cb_e1" class="cb-square cb-dk-bg"></td>
<td id="cb_f1" class="cb-square cb-lt-bg"></td>
<td id="cb_g1" class="cb-square cb-dk-bg"></td>
<td id="cb_h1" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>1</div></td>
</tr>
<tr>
<td class="cb-corner"></td>
<td class="cb-horiz-label"><div>A</div></td>
<td class="cb-horiz-label"><div>B</div></td>
<td class="cb-horiz-label"><div>C</div></td>
<td class="cb-horiz-label"><div>D</div></td>
<td class="cb-horiz-label"><div>E</div></td>
<td class="cb-horiz-label"><div>F</div></td>
<td class="cb-horiz-label"><div>G</div></td>
<td class="cb-horiz-label"><div>H</div></td>
<td class="cb-corner"></td>
</tr>
</table>
</div>
<div id="cb_outer">
<div id="cb_container">
<div id="cb_inner">
<table id="cb_board" class="noselect">
<tr>
<td class="cb-corner"></td>
<td class="cb-horiz-label"><div>A</div></td>
<td class="cb-horiz-label"><div>B</div></td>
<td class="cb-horiz-label"><div>C</div></td>
<td class="cb-horiz-label"><div>D</div></td>
<td class="cb-horiz-label"><div>E</div></td>
<td class="cb-horiz-label"><div>F</div></td>
<td class="cb-horiz-label"><div>G</div></td>
<td class="cb-horiz-label"><div>H</div></td>
<td class="cb-corner"></td>
</tr>
<tr id="cb_row8">
<td class="cb-vert-label"><div>8</div></td>
<td id="cb_a8" class="cb-square cb-lt-bg"></td>
<td id="cb_b8" class="cb-square cb-dk-bg"></td>
<td id="cb_c8" class="cb-square cb-lt-bg"></td>
<td id="cb_d8" class="cb-square cb-dk-bg"></td>
<td id="cb_e8" class="cb-square cb-lt-bg"></td>
<td id="cb_f8" class="cb-square cb-dk-bg"></td>
<td id="cb_g8" class="cb-square cb-lt-bg"></td>
<td id="cb_h8" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>8</div></td>
</tr>
<tr id="cb_row7">
<td class="cb-vert-label"><div>7</div></td>
<td id="cb_a7" class="cb-square cb-dk-bg"></td>
<td id="cb_b7" class="cb-square cb-lt-bg"></td>
<td id="cb_c7" class="cb-square cb-dk-bg"></td>
<td id="cb_d7" class="cb-square cb-lt-bg"></td>
<td id="cb_e7" class="cb-square cb-dk-bg"></td>
<td id="cb_f7" class="cb-square cb-lt-bg"></td>
<td id="cb_g7" class="cb-square cb-dk-bg"></td>
<td id="cb_h7" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>7</div></td>
</tr>
<tr id="cb_row6">
<td class="cb-vert-label"><div>6</div></td>
<td id="cb_a6" class="cb-square cb-lt-bg"></td>
<td id="cb_b6" class="cb-square cb-dk-bg"></td>
<td id="cb_c6" class="cb-square cb-lt-bg"></td>
<td id="cb_d6" class="cb-square cb-dk-bg"></td>
<td id="cb_e6" class="cb-square cb-lt-bg"></td>
<td id="cb_f6" class="cb-square cb-dk-bg"></td>
<td id="cb_g6" class="cb-square cb-lt-bg"></td>
<td id="cb_h6" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>6</div></td>
</tr>
<tr id="cb_row5">
<td class="cb-vert-label"><div>5</div></td>
<td id="cb_a5" class="cb-square cb-dk-bg"></td>
<td id="cb_b5" class="cb-square cb-lt-bg"></td>
<td id="cb_c5" class="cb-square cb-dk-bg"></td>
<td id="cb_d5" class="cb-square cb-lt-bg"></td>
<td id="cb_e5" class="cb-square cb-dk-bg"></td>
<td id="cb_f5" class="cb-square cb-lt-bg"></td>
<td id="cb_g5" class="cb-square cb-dk-bg"></td>
<td id="cb_h5" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>5</div></td>
</tr>
<tr id="cb_row4">
<td class="cb-vert-label"><div>4</div></td>
<td id="cb_a4" class="cb-square cb-lt-bg"></td>
<td id="cb_b4" class="cb-square cb-dk-bg"></td>
<td id="cb_c4" class="cb-square cb-lt-bg"></td>
<td id="cb_d4" class="cb-square cb-dk-bg"></td>
<td id="cb_e4" class="cb-square cb-lt-bg"></td>
<td id="cb_f4" class="cb-square cb-dk-bg"></td>
<td id="cb_g4" class="cb-square cb-lt-bg"></td>
<td id="cb_h4" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>4</div></td>
</tr>
<tr id="cb_row3">
<td class="cb-vert-label"><div>3</div></td>
<td id="cb_a3" class="cb-square cb-dk-bg"></td>
<td id="cb_b3" class="cb-square cb-lt-bg"></td>
<td id="cb_c3" class="cb-square cb-dk-bg"></td>
<td id="cb_d3" class="cb-square cb-lt-bg"></td>
<td id="cb_e3" class="cb-square cb-dk-bg"></td>
<td id="cb_f3" class="cb-square cb-lt-bg"></td>
<td id="cb_g3" class="cb-square cb-dk-bg"></td>
<td id="cb_h3" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>3</div></td>
</tr>
<tr id="cb_row2">
<td class="cb-vert-label"><div>2</div></td>
<td id="cb_a2" class="cb-square cb-lt-bg"></td>
<td id="cb_b2" class="cb-square cb-dk-bg"></td>
<td id="cb_c2" class="cb-square cb-lt-bg"></td>
<td id="cb_d2" class="cb-square cb-dk-bg"></td>
<td id="cb_e2" class="cb-square cb-lt-bg"></td>
<td id="cb_f2" class="cb-square cb-dk-bg"></td>
<td id="cb_g2" class="cb-square cb-lt-bg"></td>
<td id="cb_h2" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>2</div></td>
</tr>
<tr id="cb_row1">
<td class="cb-vert-label"><div>1</div></td>
<td id="cb_a1" class="cb-square cb-dk-bg"></td>
<td id="cb_b1" class="cb-square cb-lt-bg"></td>
<td id="cb_c1" class="cb-square cb-dk-bg"></td>
<td id="cb_d1" class="cb-square cb-lt-bg"></td>
<td id="cb_e1" class="cb-square cb-dk-bg"></td>
<td id="cb_f1" class="cb-square cb-lt-bg"></td>
<td id="cb_g1" class="cb-square cb-dk-bg"></td>
<td id="cb_h1" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>1</div></td>
</tr>
<tr>
<td class="cb-corner"></td>
<td class="cb-horiz-label"><div>A</div></td>
<td class="cb-horiz-label"><div>B</div></td>
<td class="cb-horiz-label"><div>C</div></td>
<td class="cb-horiz-label"><div>D</div></td>
<td class="cb-horiz-label"><div>E</div></td>
<td class="cb-horiz-label"><div>F</div></td>
<td class="cb-horiz-label"><div>G</div></td>
<td class="cb-horiz-label"><div>H</div></td>
<td class="cb-corner"></td>
</tr>
</table>
</div>
</div>
</div>