From 21bf2506ef92634820967afa7626e2aa560f467e Mon Sep 17 00:00:00 2001 From: Thomas Voss Date: Thu, 6 Jan 2022 17:16:12 +0100 Subject: Maybe make the table not look stupid on some machines --- draughts/public/game.html | 3 ++- 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 @@ + @@ -23,7 +24,7 @@ - +
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 { -- cgit v1.2.3