core: make nav bar actually a nav bar and side by side with content

default.css

@@ -6,6 +6,7 @@
 
 body {
     font-family: Arial, sans-serif;
+    font-weight: 800;
     color: #06CDFF;
     background: #03001C;
     line-height: 1.5;
@@ -14,14 +15,33 @@ body {
 }
 
 .inside {
-    max-width: 80rem;
+    max-width: 45rem;
     margin: 0 auto;
     padding: 2rem 1.5rem;
 }
 
-#navigation {
+nav {
     padding: 1rem;
     text-align: center;
+    width: 6rem;
+}
+
+.gap {
+    width: 3rem;
+}
+
+.content {
+    width: 36rem;
+    text-align: right;
+}
+
+@media screen and (max-width: 600px) {
+    .column {
+        width: 100%;
+    }
+    .gap {
+        visibility: hidden;
+    }
 }
 
 .trianta {

index.html

@@ -11,13 +11,19 @@
             <a href="/" class="trianta">TRIANTA</a>
             <p>Function over form by design</p>
         </div>
-        <div id="navigation">
-            <a href="https://www.github.com/trimutex">GitHub</a>
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
-            <a href="/completed">Completed</a>
-            <a href="/current">Current</a>
-            <a href="/other">Other</a>
-            <a href="/contact">Contact</a>
+        <nav class="column">
+            <ul>
+                <li><a href="https://www.github.com/trimutex">GitHub</a></li>
+                <li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
+                <li><a href="/completed">Completed</a></li>
+                <li><a href="/current">Current</a></li>
+                <li><a href="/other">Other</a></li>
+                <li><a href="/contact">Contact</a></li>
+            </ul>
+        </nav>
+        <div class="column gap">
+        </div>
+        <div class="column content">
         </div>
     </div>
 </body>