website: redesign part 4

website/build/style.css

@@ -1,7 +1,5 @@
 main.build {
-  min-height: 100dvh;
   display: grid;
   place-items: center;
-  color: white;
   font-size: 4rem;
 }

website/explore/style.css

@@ -1,7 +1,5 @@
 main.explore {
-  min-height: 100dvh;
   display: grid;
   place-items: center;
-  color: white;
   font-size: 4rem;
 }

website/home/style.css

@@ -1,7 +1,5 @@
 main.home {
-  min-height: 100dvh;
   display: grid;
   place-items: center;
-  color: white;
   font-size: 4rem;
 }

website/learn/index.js

@@ -15,10 +15,9 @@ function createChart(label) {
 
 /**
  * @param {string} title
- * @param {number[]} indexes
  */
-function createSectionId(title, indexes) {
+function createSectionId(title) {
-  return `${indexes.join("-")}-${title.toLowerCase().replaceAll(" ", "-")}`;
+  return title.toLowerCase().replaceAll(" ", "-");
 }
 
 /**
@@ -30,9 +29,10 @@ function createSection(section, indexes) {
   const title = document.createElement(indexes.length === 1 ? "h1" : "h2");
   const anchor = document.createElement("a");
   const description = document.createElement("p");
+  const id = createSectionId(section.title);
 
-  element.id = createSectionId(section.title, indexes);
+  title.id = id;
-  anchor.href = `#${element.id}`;
+  anchor.href = `#${id}`;
   anchor.append(section.title);
   title.append(anchor);
   description.append(section.description);
@@ -52,7 +52,7 @@ function createSection(section, indexes) {
 function createContentsItem(section, indexes) {
   const item = document.createElement("li");
   const anchor = document.createElement("a");
-  anchor.href = `#${createSectionId(section.title, indexes)}`;
+  anchor.href = `#${createSectionId(section.title)}`;
   anchor.append(section.title);
   item.append(anchor);
 
@@ -83,7 +83,7 @@ function createContents() {
 
 /** @param {HTMLElement} main */
 function initScrollSpy(main) {
-  const sections = [...main.querySelectorAll("section[id]")];
+  const titles = [...main.querySelectorAll("h1[id], h2[id]")];
   const visible = new Set();
   const links = new Map(
     [...main.querySelectorAll('nav a[href^="#"]')].map((link) => [
@@ -96,15 +96,15 @@ function initScrollSpy(main) {
   let current = null;
 
   function update() {
-    const section = sections.find((section) => visible.has(section.id));
+    const title = titles.find((title) => visible.has(title.id));
-    if (!section) return;
+    if (!title) return;
 
-    const hash = `#${section.id}`;
+    const hash = `#${title.id}`;
     if (hash === current) return;
 
     links.get(current)?.removeAttribute("aria-current");
     links.get(hash)?.setAttribute("aria-current", "location");
-    history.replaceState(null, "", `/learn${hash}`);
+    history.replaceState(null, "", hash);
     current = hash;
   }
 
@@ -119,8 +119,8 @@ function initScrollSpy(main) {
     update();
   });
 
-  for (const section of sections) {
+  for (const title of titles) {
-    observer.observe(section);
+    observer.observe(title);
   }
 }
 

website/learn/style.css

@@ -1,19 +1,13 @@
 main.learn {
-  min-height: 100dvh;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 14rem;
   gap: 4rem;
   padding: 8rem 2rem 6rem;
-  color: white;
 
   article {
     width: min(100%, 52rem);
     justify-self: center;
 
-    section {
-      scroll-margin-top: 6rem;
-    }
-
     > section + section {
       margin-top: 8rem;
     }
@@ -27,6 +21,7 @@ main.learn {
   h2 {
     font-weight: 400;
     line-height: 1;
+    scroll-margin-top: 6rem;
 
     a {
       position: relative;

website/styles/main.css

@@ -12,8 +12,10 @@ body {
     position: fixed;
     inset: 0;
     overflow: auto;
+    color: white;
     opacity: 0;
     pointer-events: none;
+    scroll-behavior: smooth;
     transition: opacity 180ms ease;
   }
 
@@ -23,16 +25,9 @@ body {
   }
 }
 
-html {
-  scroll-behavior: smooth;
-}
-
 @media (prefers-reduced-motion: reduce) {
   body > main {
+    scroll-behavior: auto;
     transition: none;
   }
-
-  html {
-    scroll-behavior: auto;
-  }
 }