chore: menu styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/partials/nav/menu.liquid

@@ -1,10 +1,8 @@
-<nav aria-label="Primary site navigation">
-  <ul class="flex--centered flex--wrap">
-    {% for link in nav.menu %}
-      <li>
-        {% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
-      </li>
-    {% endfor %}
-    {% render "partials/nav/theme-toggle.liquid" %}
-  </ul>
+<nav
+  class="menu--primary flex--centered flex--wrap justify--center"
+  aria-label="Primary site navigation">
+  {% for link in nav.menu %}
+    {% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
+  {% endfor %}
+  {% render "partials/nav/theme-toggle.liquid" %}
 </nav>

src/_includes/partials/nav/theme-toggle.liquid

@@ -3,7 +3,7 @@
   {% render "../../../assets/styles/components/theme-toggle.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
-<li class="client-side">
+<span class="client-side">
   <theme-toggle>
     <button
       class="theme__toggle"
@@ -16,4 +16,4 @@
       </span>
     </button>
   </theme-toggle>
-</li>
+</span>

src/assets/styles/index.css

@@ -175,23 +175,15 @@ th {
 }
 
 /* nav */
-nav ul {
+.main__title nav {
   margin: 0;
   padding: 0;
-  list-style: none;
+  gap: var(--sizing-sm);
 }
 
-nav ul li {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-nav ul li:not(:last-child) {
-  margin-right: calc(var(--sizing-sm) * 1.225);
-}
-
-nav svg {
-  margin-top: var(--sizing-sm);
+.main__title nav a,
+.main__title nav span {
+  height: var(--sizing-xl);
 }
 
 :is(a:hover, a:active, a:focus) svg,