Update

backend/scss/styles.scss

@@ -1,42 +1,88 @@
 html,
 body {
-    width: 100vw;
-    min-height: 100vh;
-}
-
-* {
     margin: 0;
     padding: 0;
 
+    width: 100vw;
+    min-height: 100vh;
+
     font-family: "JetBrains Mono", monospace;
 }
 
+// * {
+//     font-family: "JetBrains Mono", monospace;
+// }
+
+h1,
+h2,
+h3 {
+    text-align: center;
+}
+
+h2 {
+    text-decoration: underline;
+}
+
+h3 {
+    font-style: italic;
+}
+
+h4,
+h5,
+h6 {
+    font-weight: bold;
+}
+
+a {
+    text-decoration: none;
+}
+
+hr {
+    border: none;
+    border-top: medium solid black;
+}
+
+ul.dashed {
+    list-style-type: none;
+
+    li:before {
+        content: "-";
+        position: absolute;
+        // margin-left: -20px;
+        margin-left: -1rem;
+    }
+}
+
+table.border-rows {
+    border-collapse: collapse;
+
+    tr:first-child,
+    tr:not(:last-child) {
+        border-bottom: thin solid black;
+    }
+
+    th,
+    td {
+        padding: 1em;
+    }
+
+    th:not(:last-child),
+    td:not(:last-child) {
+        // border: thin solid black;
+        border-right: thin solid black;
+    }
+}
+
 #wrapper {
-    width: 75%;
     margin: 0 auto;
+    overflow: auto;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
 #navbar {
     display: flex;
-    margin-bottom: 1%;
-
-    ul {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-    }
-
-    li {
-        float: left;
-    }
-
-    a {
-        display: block;
-        text-align: center;
-        padding: 1em;
-        text-decoration: none;
-    }
 }
 
 #navbar-brand {
@@ -48,18 +94,138 @@ body {
     }
 }
 
+.navbar-link a,
+#navbar-links ul li a {
+    display: block;
+    text-align: center;
+}
+
 #navbar-links {
     width: 50%;
 
     ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
         float: right;
+
+        li {
+            float: left;
+
+            &:not(:first-of-type) a {
+                padding-left: 1rem;
+            }
+        }
     }
 }
 
-#content {
-    padding: 3%;
+#main-wrapper {
+    flex: 1;
+    padding: 1.5% 3%;
+}
+
+#footer {
+    font-size: small;
+    text-align: center;
+}
+
+#status-code {
+    text-align: center;
+}
+
+#status-code-message {
+    font-size: small;
+}
+
+#post-index {
+    li:not(:last-child) {
+        margin-bottom: 1rem;
+    }
 }
 
 .double-border {
     border: 5px double black;
 }
+
+.section-margin {
+    margin-top: 1%;
+}
+
+.section-light-padding {
+    padding: 1%;
+}
+
+.breadcrumb {
+    padding: 1% 0;
+
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    li:not(:last-child)::after {
+        display: inline-block;
+        margin: 0 0.5rem;
+        content: ">";
+    }
+}
+
+.wysiwyg {
+    hr {
+        width: 50%;
+    }
+
+    ul {
+        @extend ul.dashed;
+    }
+
+    table {
+        @extend table.border-rows;
+
+        margin: 0 auto;
+    }
+
+    p > code,
+    li > code,
+    dd > code,
+    td > code {
+        word-wrap: break-word;
+        box-decoration-break: clone;
+        padding: 0.1rem 0.3rem 0.2rem;
+        border: thin solid black;
+    }
+
+    pre {
+        padding: 0 1rem;
+        border: thin solid black;
+        overflow-x: scroll;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    #wrapper {
+        width: 100%;
+    }
+}
+
+@media only screen and (min-width: 600px) {
+    #wrapper {
+        width: 75%;
+    }
+}
+
+@media only screen and (min-width: 768px) {
+}
+
+@media only screen and (min-width: 992px) {
+}
+
+@media only screen and (min-width: 1200px) {
+    #wrapper {
+        width: 50%;
+    }
+}