Updated content

html/assets/style.css

@@ -13,6 +13,7 @@
 
 :root {
     --accent-color: #b4befe;
+    --accent-color-dark: #9198cd;
     --text-color: #b8c0ff;
     --background-color: #191724;
 }
@@ -26,7 +27,7 @@ body {
 }
 
 p {
-    font-size: 16px;
+    font-size: 18px;
     color: var(--text-color);
 }
 
@@ -46,15 +47,20 @@ footer {
 }
 
 footer p {
-    font-size: 10px;
+    font-size: 14px;
 }
 
 /* Custom classes */
 .box {
-    width: min(1400px, 90%);
+    width: min(80%, 1400px);
     margin-inline: auto;
 }
 
+.title {
+    font-size: 18px;
+    font-weight: bolder;
+}
+
 .invert {
     background-color: var(--text-color);
     color: var(--background-color);
@@ -91,3 +97,89 @@ footer p {
 .bold {font-weight: bold;}
 
 .no-background a:hover {background-color: transparent;}
+
+/* Top bar */
+.menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    background-color: var(--accent-color);
+    color: var(--background-color);
+
+    margin: auto;
+    width: min(80%, 1400px);
+}
+
+.menu a {
+    color: var(--background-color);
+    text-decoration: none;
+
+    user-select: none;
+    font-size: 20px;
+}
+
+.menu a:hover {
+    color: var(--accent-color);
+    background-color: var(--background-color);
+}
+
+.branding {text-align: left; width: 45%; padding: 10px;}
+.index {text-align: right; width: 45%; padding: 10px;}
+
+/* Mobile */
+@media (max-width: 800px) {
+    p {font-size: 14px;}
+
+    footer p {
+        font-size: 10px;
+    }
+
+    .title {
+        font-size: 16px;
+        font-weight: bolder;
+    }
+
+    .psst {
+        font-style: italic;
+        font-size: 12px;
+    }
+
+    .tag {
+        font-style: italic;
+        font-size: 12px;
+        user-select: none;
+    }
+
+    .rule {
+        font-size: 12px;
+        font-weight: bold;
+    }
+
+    .box {
+        width: 90%;
+        margin-inline: auto;
+    }
+
+    .menu {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        background-color: var(--accent-color);
+        color: var(--background-color);
+
+        width: 90%;
+    }
+
+    .menu a {
+        color: var(--background-color);
+        text-decoration: none;
+
+        user-select: none;
+        font-size: 16px;
+    }
+
+    .branding {text-align: center; width: 100%;}
+    .index {text-align: center; background-color: var(--accent-color-dark); width: 100%; padding: 0px;}
+}