Improve nav, support .domains in workflow

sass/_main-content.scss

@@ -1,9 +0,0 @@
-.main-content {
-  position: absolute;
-  transform: translateY(-200%);
-  transition: var(--transition);
-
-  &:focus {
-    transform: translateY(0);
-  }
-}

sass/_nav.scss

@@ -1,87 +1,100 @@
 #site-nav {
   -webkit-backdrop-filter: saturate(180%) blur(10px);
-  align-items: center;
   backdrop-filter: saturate(180%) blur(10px);
   background-color: var(--nav-bg);
   border-radius: 26px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
     0px 12px 24px -16px rgba(0, 0, 0, 0.5);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
   margin: 1rem auto;
-  max-width: min(calc(var(--content-width) + 10rem), 90%);
-  padding: 0.5rem;
   position: sticky;
   top: 1rem;
+  max-width: min(calc(var(--content-width) + 10rem), 90%);
   z-index: 999;
-  width: fit-content;
 
-  ul {
+  nav {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.25rem;
     justify-content: center;
-    margin: 0;
-    padding: 0;
-  }
+    align-items: center;
+    padding: 0.5rem;
 
-  li {
-    list-style: none;
-    display: inline-flex;
-  }
-
-  a {
-    border-radius: 999px;
-    color: var(--fg-muted-4);
-    padding: 0.325rem 0.75rem;
-    text-decoration: none;
-    transition: var(--transition);
-
-    &:hover {
-      background-color: var(--fg-muted-1);
-      color: var(--primary-color);
-      text-decoration: none;
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25rem;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
     }
 
-    &:active {
-      transform: scale(var(--active));
-    }
-  }
-
-  #home {
-    position: relative;
-    margin-right: 0.625rem;
-
-    &::after {
-      background-color: var(--fg-muted-2);
-      content: "";
-      height: 110%;
-      position: absolute;
-      right: -0.5rem;
-      top: 0;
-      width: 1px;
+    li {
+      list-style: none;
+      display: inline-flex;
     }
 
     a {
-      font-weight: 800;
-      color: var(--fg-muted-5);
+      border-radius: 999px;
+      color: var(--fg-muted-4);
+      padding: 0.325rem 0.75rem;
+      text-decoration: none;
+      transition: var(--transition);
 
       &:hover {
+        background-color: var(--fg-muted-1);
         color: var(--primary-color);
+        text-decoration: none;
+      }
+
+      &:active {
+        transform: scale(var(--active));
+      }
+    }
+
+    #main-content {
+      background: var(--bg-color);
+      position: absolute;
+      transform: translateY(-200%);
+      z-index: 999;
+
+      &:focus {
+        transform: translateY(0);
+      }
+    }
+
+    #home {
+      position: relative;
+      margin-right: 0.625rem;
+
+      &::after {
+        background-color: var(--fg-muted-2);
+        content: "";
+        height: 110%;
+        position: absolute;
+        right: -0.5rem;
+        top: 0;
+        width: 1px;
+      }
+
+      a {
+        font-weight: 800;
+        color: var(--fg-muted-5);
+
+        &:hover {
+          color: var(--primary-color);
+        }
+      }
+    }
+
+    #feed a {
+      padding: 0.325rem 0.625rem;
+
+      svg {
+        vertical-align: -0.125em;
+      }
+
+      span {
+        display: none;
       }
     }
   }
-
-  #feed a {
-    padding: 0.325rem 0.625rem;
-
-    svg {
-      vertical-align: -0.125em;
-    }
-
-    span {
-      display: none;
-    }
-  }
 }

sass/style.scss

@@ -18,7 +18,6 @@
 @use "footer";
 @use "johnvertisement";
 @use "links";
-@use "main-content";
 @use "media";
 @use "nav";
 @use "not-found";