Add basic site content

public/main.css

@@ -0,0 +1,98 @@
+/**** Global ****/
+:root {
+    /* Gruvbox colors https://github.com/morhetz/gruvbox */
+    --background: #282828;
+    --foreground: #ebdbb2;
+    --gray: #928374;
+    --gray-light: #a89984;
+    --red: #cc241d;
+    --red-light: #fb4934;
+    --green: #98921a;
+    --green-light: #b8bb26;
+    --yellow: #d79921;
+    --yellow-light: #fabd2f;
+    --blue: #458588;
+    --blue-light: #83a598;
+    --purple: #b16286;
+    --purple-light: #d3869b;
+    --aqua: #679d6a;
+    --aqua-light: #8ec07c;
+    --orange: #d65d0e;
+    --orange-light: fe8019;
+}
+
+body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: monospace;
+}
+
+a:link {
+    color: var(--green);
+}
+
+a:visited {
+    color: var(--aqua);
+}
+
+.content {
+    display: flex;
+}
+
+
+
+/**** Title Bar ****/
+.titlebar {
+    border-bottom: var(--foreground) solid 1px;
+}
+
+
+
+/**** Navbar ****/
+.navbar {
+    padding-right: 1rem;
+    border-right: var(--foreground) solid 1px;
+    width: 10rem;
+}
+
+.navbar ul {
+    padding-left: 0.5rem;
+    list-style-type: none;
+}
+
+.navbar li {
+    padding: 0.125rem;
+}
+
+.navbar li:hover {
+    background-color: var(--gray);
+}
+
+.navbar a {
+    text-decoration: none;
+    color: var(--foreground);
+    display: block;
+    width: 100%;
+}
+
+.navbar-selected {
+    color: var(--green);
+}
+
+
+/**** Page ****/
+.page {
+    padding-left: 1rem;
+}
+
+
+
+/**** Footer *****/
+.footer {
+    text-align: center;
+}
+
+.footer a {
+    text-decoration: none;
+    color: var(--orange);
+}