Add nav bar with context

1 files changed, 19 insertions, 7 deletions

diff --git a/webapp/src/default.css b/webapp/src/default.css
index be10692..2dc6a3d 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -12,15 +12,27 @@ body {
 
 .app {
     display: grid;
-    grid-template-areas: ".    north  ."
-                         "west center east"
-                         ".    south  .";
-    grid-template-rows: 100px 1fr 100px;
-    grid-template-columns: 100px 1fr 100px;
+    grid-template-areas: "north north north nav"
+                         "west center east nav"
+                         "south south south nav";
+    grid-template-rows: 10vw 1fr 10vw;
+    grid-template-columns: 10vw 1fr 10vw 10vw;
     width: 100vw;
     height: 100vh;
 }
 
+.nav {
+    grid-area: nav;
+    display: grid;
+    background-color: #ccc;
+    align-content: start;
+}
+
+.nav p, .nav div {
+    background-color: #edc;
+    margin-bottom: 1vw;
+}
+
 .west {
     grid-area: west;
     /* transform: rotate(90deg); */
@@ -61,8 +73,8 @@ body {
 }
 
 .card {
-    min-width: 50px;
-    min-height: 50px;
+    min-width: 30px;
+    min-height: 20px;
     border-radius: 5px;
     border: 2px solid #444;
     transition: 0.1s;