update: _nav.scss — format for the new implementation

Author: EmptyWork

src/assets/scss/components/_nav.scss

@@ -6,10 +6,22 @@
   flex-shrink: 0;
   position: sticky;
   top: 0;
-  padding: 0.8rem;
   z-index: 20;
 
+  &-skip {
+    position: relative;
+    width: 100%;
+    height: 0;
+    transition: height 200ms ease;
+    justify-content: center;
+
+    &:has(:focus) {
+      height: calc(1em + 0.6em);
+    }
+  }
+
   &-container {
+    padding: 0.8rem;
     width: 100%;
     max-width: 64rem;
     margin: 0 auto;
@@ -29,17 +41,22 @@
   &-skipto {
     background-color: var(--clr-accent);
     color: var(--clr-white);
-    display: flex;
     padding: 0 0.3rem;
-    align-self: center;
-    scale: 0 1;
-    order: 2;
-    transform-origin: left;
-    transition: scale 200ms ease;
+    position: absolute !important;
+    left: 0;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: max-content;
+    text-align: center;
+    opacity: 0;
+    transition: opacity 200ms ease;
+    pointer-events: none;
 
     &:focus {
+      pointer-events: unset;
+      opacity: 1;
       color: var(--clr-white);
-      scale: 1;
     }
   }