diff options
| author | Thomas Voss <thomasvoss@live.com> | 2022-01-06 17:16:12 +0100 |
|---|---|---|
| committer | Thomas Voss <thomasvoss@live.com> | 2022-01-06 17:16:12 +0100 |
| commit | 21bf2506ef92634820967afa7626e2aa560f467e (patch) | |
| tree | 2245b2e4b66ee58d6810e996e9f72e9ac9337ca2 | |
| parent | 3a1de160291321943f581a6e1372a6f5b769c950 (diff) | |
Maybe make the table not look stupid on some machines
| -rw-r--r-- | draughts/public/game.html | 3 | ||||
| -rw-r--r-- | draughts/public/stylesheets/game.css | 25 |
2 files changed, 17 insertions, 11 deletions
diff --git a/draughts/public/game.html b/draughts/public/game.html index 65c1858..71fbb08 100644 --- a/draughts/public/game.html +++ b/draughts/public/game.html @@ -1,3 +1,4 @@ +<!-- -*- tab-width: 4 -*- --> <!DOCTYPE html> <html lang="en"> <head> @@ -23,7 +24,7 @@ <!-- Each row has squares which are either black or white, and only black cells have IDs since a piece cannot land on a white cell. --> - <tr> + <tr> <td id="1"> <div class="circle-outer blue-outer-circle"> <div class="top-pad"></div> diff --git a/draughts/public/stylesheets/game.css b/draughts/public/stylesheets/game.css index 3a01d34..ed84c3e 100644 --- a/draughts/public/stylesheets/game.css +++ b/draughts/public/stylesheets/game.css @@ -32,17 +32,22 @@ #outer-board { border: 8px black solid; border-spacing: 8px; - height: 80%; + height: calc(7vmin * 10); } #board { border-collapse: collapse; /* Make all the cells snap together */ - height: 100%; /* Make sure height == width */ + height: calc(7vmin * 10); /* Make sure height == width */ +} + +#board tr { + display: table; } #board td { - height: 70px; - width: 70px; + height: 7vmin; + width: 7vmin; + display: inline-block; } #board tr:nth-child(even) td:nth-child(even), #board tr:nth-child(odd) td:nth-child(odd) { @@ -50,7 +55,7 @@ } .top-pad { - height: 10px; + height: 1vmin; } .circle-outer, .circle-inner { @@ -58,14 +63,14 @@ } .circle-outer { - height: 70px; - width: 70px; + height: 7vmin; + width: 7vmin; } .circle-inner { - width: 50px; - height: 50px; - margin-left: 10px; + width: 5vmin; + height: 5vmin; + margin-left: 1vmin; } .blue-outer-circle { |