Add project files

public/static/style.css

@@ -0,0 +1,84 @@
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: top;
+    width: 100vw;
+    font-family: sans-serif;
+}
+.sidebar-symbol {
+    margin-left: .5rem;
+    margin-top: .5rem;
+    width: 2rem;
+    height: 2rem;
+    font-size: 1.8rem;
+    font-family: monospace;
+    text-align: center;
+    user-select: none;
+    cursor: pointer;
+    pointer-events: all;
+}
+.sidebar-switch { pointer-events: none; }
+.sidebar-switch > input { display: none; }
+.sidebar-switch > .sidebar { display: none; }
+.sidebar-switch > input:checked + .sidebar { display: flex; }
+.sidebar {
+    flex-direction: column;
+    pointer-events: all;
+    width: max-content;
+    padding: 1rem;
+    gap: .25rem;
+}
+a {
+    color: black;
+    text-decoration: none;
+}
+a:hover { text-decoration: underline; }
+.main {
+    padding-right: 2rem;
+    margin: 2rem 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.main > h1, .content {
+    width: 70vw;
+    max-width: 50rem;
+}
+.main > h1 {
+    font-size: 1.4rem;
+    margin-bottom: 0;
+}
+.content { white-space: pre-line; }
+
+@media only screen and (max-width: 750px) {
+    body {
+        flex-direction: column;
+        align-items: center;
+    }
+    .sidebar-symbol {
+        margin-left: unset;
+        text-align: left;
+    }
+    .sidebar-switch {
+        width: 90vw;
+        background-color: white;
+    }
+    .sidebar {
+        width: 100%;
+        height: max-content;
+        padding: 1rem 0;
+        gap: .4rem;
+    }
+    .main {
+        margin-top: .5rem;
+        padding-right: 0;
+    }
+    .main > h1, .content {
+        width: 90vw;
+        max-width: unset;
+    }
+}