checkpoint: update CSS stylesheet

- Add some tokyonight colours
- Update background
- Update sidebar, ensure that the sidebar occupies 100% of the screen's
  height

flow/content/css/stylesheet.css

@@ -1,3 +1,11 @@
+:root {
+  --background: #1a1b26;
+  --background-dark: #16161e;
+  --foreground: #a9b1d6;
+  --link: #7aa2f7;
+  --link-hover: #bb9af7;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -5,20 +13,20 @@
 }
 
 body {
-  background: #fff;
+  background: var(--background);
+  color: var(--foreground);
 }
 
 a {
   text-decoration: none;
 }
 
-a:link,
+a:link, a:visited {
-a:visited {
+  color: var(--link);
-  color: #f30;
 }
 
 a:hover {
-  color: #f90;
+  color: var(--link-hover);
 }
 
 #main {
@@ -55,19 +63,20 @@ a:hover {
 }
 
 #sidebar {
-  position: absolute;
+  background: var(--background-dark);
-  top: 40px;
+  position: fixed;
-  left: 20px;
+  top: 0px;
+  left: 0px;
   width: 200px;
-  padding: 20px 20px 0 0;
+  height: 100%;
-  border-right: 1px solid #ccc;
+  padding: 30px 20px 0 0;
+  #border-right: 1px solid #ccc;
   text-align: right;
 }
 
 #sidebar h2 {
   text-transform: uppercase;
   font-size: 13px;
-  color: #333;
   letter-spacing: 1px;
   line-height: 20px;
 }
@@ -87,9 +96,10 @@ a:hover {
   margin: 0;
   padding: 0;
   overflow: hidden;
-  background-color: #333;
+  background-color: var(--background-dark);
   position: fixed;
   top: 0;
+  left: 220px;
   width: 100%;
 }
 

flow/layouts/projects.html

@@ -7,7 +7,7 @@
       <%= yield %>
     </div>
     <div id="sidebar">
-      <h2>Projects</h2>
+      <h2>My Projects</h2>
       <ul>
         <%= projects %>
       </ul>