make the timelines look nicer and add local tl

1 files changed, 50 insertions, 8 deletions

diff --git a/static/style.css b/static/style.css
index 3ea07c0..d8a8ff8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,10 +1,13 @@
+@import url(https://fonts.bunny.net/css?family=dm-sans:400,400i,800,800i);
+
 html,
 body {
-  background: white;
-  color: black;
+  background: #fdf5ff;
+  color: #0f070f;
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  font-family: "DM Sans", sans-serif;
+  font-size: 12pt;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -16,11 +19,15 @@ header {
   padding: 16px;
   margin-bottom: 8px;
   display: flex;
+  flex-direction: column;
+  align-items: center;
   width: 100vw;
   box-sizing: border-box;
 
-  *:not(:last-child) {
-    margin-right: 8px;
+  nav {
+    width: min(800px, 100vw);
+    display: grid;
+    grid-template-columns: 1fr max-content 1fr;
   }
 }
 
@@ -28,14 +35,34 @@ header {
   font-weight: bold;
 }
 
+nav {
+  ul {
+    list-style: none;
+    display: inline;
+    margin: 0;
+    margin-left: 8px;
+    padding: 0;
+    > li {
+      display: inline;
+      > a {
+        border-radius: 4px;
+        background: #fff3;
+        padding: 4px 8px;
+        color: white;
+        text-decoration: none;
+      }
+    }
+  }
+}
+
 main {
   width: min(800px, 100vw);
 }
 
 article.note {
-  background: #eee;
-  color: black;
-  border-radius: 16px;
+  background: #fee4;
+  border: 1px solid #3b005e44;
+  border-radius: 8px;
   margin: 16px;
   padding: 16px;
   display: grid;
@@ -51,3 +78,18 @@ article.note {
     font-weight: bold;
   }
 }
+
+.alertbox {
+  border: 1px solid;
+  border-radius: 8px;
+  margin: 16px;
+  padding: 16px;
+  &.info {
+    border-color: #23f4;
+    background: #5673ff44;
+  }
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}