website: redesign part 13

website_next/home/index.js

@@ -1,8 +1,26 @@
+const links = [
+  { href: "/explore", label: "Explore" },
+  { href: "/learn", label: "Learn" },
+  { href: "/build", label: "Build" },
+];
+
 export function createHomePage() {
   const main = document.createElement("main");
   main.className = "home";
+
   const title = document.createElement("h1");
-  title.append("Home");
-  main.append(title);
+  const nav = document.createElement("nav");
+
+  nav.setAttribute("aria-label", "Sections");
+  title.append("bitview");
+
+  for (const { href, label } of links) {
+    const link = document.createElement("a");
+    link.href = href;
+    link.append(label);
+    nav.append(link);
+  }
+
+  main.append(title, nav);
   return main;
 }

website_next/home/style.css

@@ -1,5 +1,39 @@
 main.home {
   display: grid;
+  gap: 2rem;
   place-items: center;
-  font-size: 4rem;
+  align-content: center;
+  padding: var(--offset, 6rem) var(--page-x);
+
+  h1 {
+    margin: 0;
+    font-size: 4rem;
+    line-height: 1;
+  }
+
+  nav {
+    display: flex;
+    gap: 0.5rem;
+    font-size: var(--font-size-xs);
+    line-height: 1;
+    text-transform: uppercase;
+
+    a {
+      display: block;
+      padding: 0.75rem 1rem;
+      border-radius: 0.3125rem;
+      color: var(--white);
+      background: var(--dark-gray);
+      text-decoration: none;
+
+      &:hover {
+        background: var(--gray);
+      }
+
+      &:active {
+        color: var(--black);
+        background: var(--orange);
+      }
+    }
+  }
 }