Change calendar table to be css grid.

1 files changed, 18 insertions, 8 deletions

diff --git a/static/style.css b/static/style.css
index 11565ff7..810fa0b4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -117,20 +117,30 @@ body {
         flex-grow: 1;
 }
 
-main table {
-    width: 100%;
-    height: 90%; /* TODO */
-    border-collapse: collapse;
+/* ---------------------------------------- */
+
+.caltable {
+    flex-grow: 10;
+
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    /* This is for the first name, the week days.
+       NOTE that I'm not sure this is actually the
+       correct way to do it. */
+    grid-template-rows: 2em;
 }
 
-main table thead {
-    height: 1em;
+.caltable .thead {
+    font-weight: bold;
+    text-align: center;
 }
 
-main table td {
-    width: calc(100%/7);
+.caltable div {
+    border: 1px solid gray;
 }
 
+/* ---------------------------------------- */
+
 .calendar {
 	width: 100%;
 	height: 100%;