Properly responsive & centered navbar

component/navbar.html

@@ -1,11 +1,18 @@
 <nav>
-  <ul>
-    <li><a href="/" class="title">Colormatic</a></li>
-  </ul>
-  <img src="/img/colormatic_logo.svg">
-  <ul>
-    <li><a href="/zakarya">Zakarya</a></li>
-    <li><a href="https://github.com/ColormaticStudios" target="_blank" rel="noopener noreferrer">GitHub</a></li>
-    <li><a href="/about">About</a></li>
-  </ul>
+  <script>
+var menu = document.getElementById("menu");
+function toggle_nav_menu() {
+  menu.classList.toggle("responsive-hidden")
+}
+  </script>
+  <a href="/" class="title nav-left">Colormatic</a>
+  <img src="/img/colormatic_logo.svg" class="nav-center">
+  <div class="nav-right inline">
+    <ul id="menu" class="responsive-hidden">
+      <li><a href="/zakarya">Zakarya</a></li>
+      <li><a href="https://github.com/ColormaticStudios" target="_blank" rel="noopener noreferrer">GitHub</a></li>
+      <li><a href="/about">About</a></li>
+    </ul>
+    <button onclick="toggle_nav_menu();" class="responsive-button"><img src="https://icons.getbootstrap.com/assets/icons/list.svg"></button>
+  </div>
 </nav>

css/style.css

@@ -3,12 +3,35 @@ body {
 }
 
 nav {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 1fr min-content 1fr;
+    /*flex-direction: row;
+    justify-content: space-between;*/
     align-items: center;
     padding: 12px;
     border-bottom: solid 1px #00000033;
+
+    width: 100%;
+    box-sizing: border-box;
+    overflow-wrap: anywhere;
+}
+
+nav .nav-left {
+    /*justify-content: flex-start;*/
+    justify-self: left;
+    grid-column: 1;
+}
+
+nav .nav-center {
+    /*justify-content: center;*/
+    justify-self: center;
+    grid-column: 2;
+}
+
+nav .nav-right {
+    /*justify-content: flex-end;*/
+    justify-self: right;
+    grid-column: 3;
 }
 
 nav img {
@@ -24,7 +47,7 @@ nav ul {
     flex-direction: row;
 }
 
-nav li a {
+nav a {
     padding: 8px;
     color: #383c3f;
     text-decoration: none;
@@ -36,17 +59,39 @@ nav li a {
     }
     nav li {
         text-align: center;
+        padding: 12px;
     }
-    nav li a {
+    nav a {
         padding: 12px;
     }
 }
 
-nav li a.title {
+nav a.title {
     font-size: 140%;
     font-weight: bold;
 }
 
+nav button.responsive-button {
+    display: none;
+
+    border: none;
+    background: none;
+    cursor: pointer;
+}
+
+nav div.inline {
+    display: flex;
+}
+
+@media screen and (max-width: 600px) {
+    nav button.responsive-button {
+        display: block;
+    }
+    nav ul.responsive-hidden {
+        display: none;
+    }
+}
+
 main div.heading {
     color: #383c3f;
     font-size: 200%;