website: redesign part 13

website_next/header/index.js

@@ -1,5 +1,4 @@
 import { createCube } from "../cube/index.js";
-import { primaryRoutes } from "../routes.js";
 
 export function createHeader() {
   const header = document.createElement("header");
@@ -12,21 +11,6 @@ export function createHeader() {
   cube.append(createCube());
   home.append(cube, "bitview");
 
-  const nav = document.createElement("nav");
-  const list = document.createElement("ul");
-  nav.setAttribute("aria-label", "Primary");
-
-  for (const { pathname, label } of primaryRoutes) {
-    const item = document.createElement("li");
-    const anchor = document.createElement("a");
-
-    anchor.href = pathname;
-    anchor.append(label);
-    item.append(anchor);
-    list.append(item);
-  }
-
-  nav.append(list);
-  header.append(home, nav);
+  header.append(home);
   return header;
 }

website_next/header/style.css

@@ -1,20 +1,16 @@
 body {
   > header {
     position: fixed;
-    inset: 1.5rem var(--page-x) auto;
+    top: 1.5rem;
+    left: var(--page-x);
     z-index: var(--layer-header);
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    align-items: center;
-    font-size: var(--font-size-sm);
     line-height: 1;
-    text-transform: uppercase;
+    mix-blend-mode: difference;
 
     > a {
       --color: var(--white);
       opacity: 0.8;
 
-      justify-self: start;
       display: flex;
       align-items: center;
       gap: 0.5rem;
@@ -45,44 +41,5 @@ body {
         animation: cube-fill 5s linear infinite alternate;
       }
     }
-
-    > nav {
-      font-size: var(--font-size-xs);
-
-      ul {
-        display: flex;
-        gap: 0.5rem;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-
-      a {
-        display: block;
-        padding: 0.75rem 1rem;
-        border-radius: 0.3125rem;
-        text-decoration: none;
-
-        color: var(--white);
-        background: var(--dark-gray);
-
-        &:hover {
-          background: var(--gray);
-        }
-
-        &:active {
-          background: var(--orange);
-        }
-
-        &[aria-current="page"] {
-          color: var(--black);
-          background: var(--dark-white);
-
-          &:hover {
-            background: var(--white);
-          }
-        }
-      }
-    }
   }
 }