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,21 +1,22 @@
 #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);
+  margin: 1rem auto;
+  position: sticky;
+  top: 1rem;
+  max-width: min(calc(var(--content-width) + 10rem), 90%);
+  z-index: 999;
+
+  nav {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-  margin: 1rem auto;
+    align-items: center;
-  max-width: min(calc(var(--content-width) + 10rem), 90%);
     padding: 0.5rem;
-  position: sticky;
-  top: 1rem;
-  z-index: 999;
-  width: fit-content;
 
     ul {
       display: flex;
@@ -49,6 +50,17 @@
       }
     }
 
+    #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;
@@ -84,4 +96,5 @@
         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";

templates/includes/nav.html

@@ -1,6 +1,6 @@
-<header>
+<header id="site-nav">
-  <a href="#main" class="main-content" tabindex="0">Skip to main content</a>
+  <nav>
-  <nav id="site-nav">
+    <a href="#main" id="main-content" tabindex="0">Skip to main content</a>
     <ul>
       <li id="home">
         <a href="{{ get_url(path='') }}">{{ config.title }}</a>