website_next: part 3

website_next/header/index.js

@@ -1,16 +1,8 @@
-import { createCube } from "../cube/index.js";
+import { createBrand } from "../brand/index.js";
 
 export function createHeader() {
   const header = document.createElement("header");
 
-  const home = document.createElement("a");
-  const cube = document.createElement("span");
-
-  home.href = "/";
-  home.setAttribute("aria-label", "bitview home");
-  cube.append(createCube());
-  home.append(cube, "bitview");
-
-  header.append(home);
+  header.append(createBrand({ href: "/" }));
   return header;
 }

website_next/header/style.css

@@ -6,47 +6,5 @@ body {
     z-index: var(--layer-header);
     line-height: 1;
     mix-blend-mode: difference;
-
-    > a {
-      --color: var(--white);
-      opacity: 0.8;
-
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      color: var(--color);
-      font-size: var(--font-size-base);
-      text-decoration: none;
-      text-transform: lowercase;
-
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          opacity: 1;
-        }
-      }
-
-      &:active {
-        opacity: 1;
-        --color: var(--orange);
-      }
-
-      &[data-press] {
-        opacity: 1;
-        --color: var(--white);
-      }
-
-      > span {
-        display: inline-grid;
-        padding: 0.2rem 0.3rem;
-        color: var(--black);
-        background-color: var(--color);
-        border-radius: 0.25rem;
-      }
-
-      .cube {
-        --size: 0.75rem;
-        animation: cube-fill 5s linear infinite alternate;
-      }
-    }
   }
 }