main, use menu-list and change border to be relative.

pages/helpers/main.css

@@ -66,13 +66,13 @@
 			.menu-list {
 				text-align: center;
 				list-style-type: none;
-				padding-left: 0px;
 			}
-			/* Does this have a typo on purpose? _ instead of - to disable it? */
+			.menu-item {
-			.menu_item {
 				display: inline-block;
-				padding: 0px;
 				white-space: nowrap;
+
+				padding: 0.6rem;
+				margin: 0.1rem;
 			}
 
 			/** Be able to position anything easily. **/
@@ -94,7 +94,7 @@
 			/** Extra objects which need borders **/
 			.border {
             border: 1px solid #131313;
-            border-radius: 4px;
+            border-radius: 0.4rem;
 			}
 
 			/** Explicitly remove border from some objects. **/

pages/helpers/menu.php

@@ -37,52 +37,46 @@
 		-->
 
 		<div class="row header menu center">
-			<p class="col-4">
+			<p class="col-4 menu-list">
 				<strong>Main</strong>
-				<br>
+				<a class="menu-item border" href="/apps/">Apps</a>
-				<br>
+				<a class="menu-item border" href="/about/">About</a>
-				<a class="menu-item col-3 border" href="/apps/">Apps</a>
+				<a class="menu-item border" href="/contact/">Contact</a>
-				<a class="menu-item col-3 border" href="/about/">About</a>
+				<a class="menu-item border" href="/support/">Support</a>
-				<a class="menu-item col-3 border" href="/contact/">Contact</a>
-				<a class="menu-item col-3 border" href="/support/">Support</a>
 			</p>
-			<p class="col-4">
+			<p class="col-4 menu-list">
 				<strong>Media</strong>
-				<br>
+				<a class="menu-item border"
-				<br>
-				<a class="menu-item col-3 border"
 					href="https://git.hyperling.com/me/"
 					target="_blank" rel="noopener noreferrer"
 				>Code</a>
-				<a class="menu-item col-3 border"
+				<a class="menu-item border"
 					href="https://works.hyperling.com/categories/books/"
 					target="_blank" rel="noopener noreferrer"
 				>Books</a>
-				<a class="menu-item col-3 border"
+				<a class="menu-item border"
 					href="https://works.hyperling.com/videos/"
 					target="_blank" rel="noopener noreferrer"
 				>Videos</a>
-				<a class="menu-item col-3 border"
+				<a class="menu-item border"
 					href="/photos/"
 				>Photos</a>
 			</p>
-			<p class="col-4">
+			<p class="col-4 menu-list">
 				<strong>Blog</strong>
-				<br>
+				<a class="menu-item border"
-				<br>
-				<a class="menu-item col-3 border"
 					href="https://blog.hyperling.com/categories/articles/"
 					target="_blank" rel="noopener noreferrer"
 				>Articles</a>
-				<a class="menu-item col-3 border"
+				<a class="menu-item border"
 					href="https://recipes.hyperling.com/categories/recipes/"
 					target="_blank" rel="noopener noreferrer"
 				>Recipes</a>
-				<a class="menu-item col-3 border"
+				<a class="menu-item border"
 					href="https://blog.hyperling.com/categories/musings/"
 					target="_blank" rel="noopener noreferrer"
 				>Poetry</a>
-				<a class="menu-item col-3 border"
+				<a class="menu-item border"
 					href="https://recipes.hyperling.com/categories/guides/"
 					target="_blank" rel="noopener noreferrer"
 				>Guides</a>