website_next: part 3

website_next/learn/contents/style.css

@@ -1,4 +1,4 @@
-main.learn {
+main[data-page="learn"] {
   > nav {
     --nav-offset: calc(var(--offset) + 2rem);
     --line-gap: 0.5rem;

website_next/learn/details.js

@@ -58,6 +58,15 @@ function openSection(main, section) {
   }
 }
 
+/** @param {Event} event */
+function getSectionDetailsEventTarget(event) {
+  if (!(event.target instanceof HTMLDetailsElement)) return null;
+
+  const section = event.target.parentElement;
+
+  return section?.matches("article section[id]") ? event.target : null;
+}
+
 /** @param {HTMLElement} main */
 export function initSectionDetails(main) {
   const sections = [
@@ -72,9 +81,10 @@ export function initSectionDetails(main) {
   }
 
   main.addEventListener("toggle", (event) => {
-    const details = /** @type {HTMLDetailsElement} */ (event.target);
+    const details = getSectionDetailsEventTarget(event);
+    if (!details) return;
+
     const section = /** @type {HTMLElement} */ (details.parentElement);
-    if (!section.matches("article section[id]")) return;
 
     localStorage.setItem(getStorageKey(section.id), details.open ? "1" : "0");
     syncNavSection(main, section);

website_next/learn/index.js

@@ -50,7 +50,7 @@ function createSection(section, path = []) {
 
 export function createLearnPage() {
   const main = document.createElement("main");
-  main.className = "learn";
+  main.dataset.page = "learn";
   const article = document.createElement("article");
 
   for (const section of sections) {

website_next/learn/style.css

@@ -1,4 +1,4 @@
-main.learn {
+main[data-page="learn"] {
   --offset: 4rem;
   --content-width: 52rem;
   --heading-padding-bottom: 0.5rem;