Run prettier

styleguide/assets/script/generator.js

@@ -1,11 +1,11 @@
 let can = document.createElement("canvas");
-let ctx = can.getContext('2d');
+let ctx = can.getContext("2d");
 let result;
-const downloadButton = document.querySelector('#download');
+const downloadButton = document.querySelector("#download");
 
 function filterImage(svgDataUrl, width, height) {
   const filteredImage = new Image();
-    const resultPreview = document.querySelector('#result_img')
+  const resultPreview = document.querySelector("#result_img");
 
   can.width = width;
   can.height = height;
@@ -21,9 +21,9 @@ function filterImage(svgDataUrl, width, height) {
 
 function loadImage(base64Image) {
   const sourceImage = new Image();
-    const svg = document.querySelector('svg')
+  const svg = document.querySelector("svg");
-    const svgImage = svg.querySelector('image')
+  const svgImage = svg.querySelector("image");
-    const sourcePreview = document.querySelector('#source_img')
+  const sourcePreview = document.querySelector("#source_img");
   let svgDataUrl;
 
   sourceImage.onload = function () {
@@ -32,26 +32,25 @@ function loadImage(base64Image) {
 
     if (this.height > 1000) {
       svgHeight = 1000;
-            svgWidth = 1000 * this.width / this.height;
+      svgWidth = (1000 * this.width) / this.height;
     }
 
     svg.setAttribute("height", svgHeight);
     svg.setAttribute("width", svgWidth);
 
-        let svgString = (new XMLSerializer).serializeToString(svg);
+    let svgString = new XMLSerializer().serializeToString(svg);
-        svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString);
+    svgDataUrl = "data:image/svg+xml," + encodeURIComponent(svgString);
 
     filterImage(svgDataUrl, this.width, this.height);
   };
   sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
 }
 
-
 function handleFileSelect(e) {
   const files = e.target.files;
   if (!files || !files.length) return;
   const file = files[0];
-    if (!file.type.match('image.*')) return;
+  if (!file.type.match("image.*")) return;
 
   const reader = new FileReader();
 
@@ -62,11 +61,13 @@ function handleFileSelect(e) {
   reader.readAsDataURL(file);
 }
 
-document.querySelector('#file_input').addEventListener('change', handleFileSelect, false);
+document
+  .querySelector("#file_input")
+  .addEventListener("change", handleFileSelect, false);
 
 function downloadURI(_uri, _name) {
   let link = document.createElement("a");
-    link.download = 'distortedImageEH22.png';
+  link.download = "distortedImageEH22.png";
   link.href = result;
   document.body.appendChild(link);
   link.click();
@@ -74,17 +75,18 @@ function downloadURI(_uri, _name) {
   delete link;
 }
 
-downloadButton.addEventListener('click', downloadURI);
+downloadButton.addEventListener("click", downloadURI);
 
 (async () => {
-    let exampleImageBlob = await fetch("../assets/image/example_cat.jpg")
+  let exampleImageBlob = await fetch("../assets/image/example_cat.jpg").then(
-        .then(r => r.blob());
+    (r) => r.blob(),
+  );
 
-    let dataUrl = await new Promise(resolve => {
+  let dataUrl = await new Promise((resolve) => {
     let reader = new FileReader();
     reader.onload = () => resolve(reader.result);
     reader.readAsDataURL(exampleImageBlob);
   });
 
   loadImage(dataUrl);
-})()
+})();

styleguide/assets/script/merch.js

@@ -1,6 +1,16 @@
 const sizes = [
-    "XXS", "XS", "S", "M", "L", "XL", "2XL", "3XL", "4XL", "5XL", "6XL"
+  "XXS",
-]
+  "XS",
+  "S",
+  "M",
+  "L",
+  "XL",
+  "2XL",
+  "3XL",
+  "4XL",
+  "5XL",
+  "6XL",
+];
 
 function selectCell(e) {
   const cell = e.target;
@@ -8,27 +18,30 @@ function selectCell(e) {
   const col = cell.dataset.col;
   const dimension = cell.dataset.dim;
 
-    document.querySelectorAll('td.val:not(.empty)').forEach(match => {
+  document.querySelectorAll("td.val:not(.empty)").forEach((match) => {
-        match.dataset.diff = '';
+    match.dataset.diff = "";
-        match.classList.remove('highlighted')
+    match.classList.remove("highlighted");
-        match.classList.remove('currentDimension')
+    match.classList.remove("currentDimension");
     if (match.dataset.dim === dimension) {
-            match.classList.add('currentDimension')
+      match.classList.add("currentDimension");
       const diff = parseFloat(match.dataset.val) - value;
       match.dataset.diff = diff > 0 ? `+${diff}` : diff;
-            if (match.dataset.dim === 'A') match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`
+      if (match.dataset.dim === "A")
-            if (match.dataset.dim === 'B') match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`
+        match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`;
-            if (match.dataset.dim === 'C') match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`
+      if (match.dataset.dim === "B")
+        match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`;
+      if (match.dataset.dim === "C")
+        match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`;
     }
   });
-    document.querySelectorAll('td.dimension').forEach(match => {
+  document.querySelectorAll("td.dimension").forEach((match) => {
-        match.classList.remove('currentDimension');
+    match.classList.remove("currentDimension");
     if (match.innerHTML === dimension) {
-            match.classList.add('currentDimension');
+      match.classList.add("currentDimension");
     }
   });
 
-    cell.classList.add('highlighted')
+  cell.classList.add("highlighted");
 }
 
 function selectCellPlus(e) {
@@ -37,36 +50,41 @@ function selectCellPlus(e) {
   const group = cell.parentElement.parentElement;
   const col = cell.dataset.col;
 
-    if (cell.classList.contains('highlighted') && !cell.classList.contains('currentDimension')) {
+  if (
+    cell.classList.contains("highlighted") &&
+    !cell.classList.contains("currentDimension")
+  ) {
     selectCell(e);
     return;
   }
 
-    const values = {}
+  const values = {};
-    group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
+  group.querySelectorAll(`td[data-col='${col}']`).forEach((match) => {
     values[match.dataset.dim] = parseFloat(match.dataset.val);
-    })
+  });
 
-    document.querySelectorAll('td.val:not(.empty)').forEach(match => {
+  document.querySelectorAll("td.val:not(.empty)").forEach((match) => {
-        match.dataset.diff = '';
+    match.dataset.diff = "";
-        match.classList.remove('highlighted')
+    match.classList.remove("highlighted");
-        match.classList.remove('currentDimension')
+    match.classList.remove("currentDimension");
     if (match.dataset.dim in values) {
       const diff = parseFloat(match.dataset.val) - values[match.dataset.dim];
       match.dataset.diff = diff > 0 ? `+${diff}` : diff;
-            if (match.dataset.dim === 'A') match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`
+      if (match.dataset.dim === "A")
-            if (match.dataset.dim === 'B') match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`
+        match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`;
-            if (match.dataset.dim === 'C') match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`
+      if (match.dataset.dim === "B")
+        match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`;
+      if (match.dataset.dim === "C")
+        match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`;
     }
   });
-    document.querySelectorAll('td.dimension').forEach(match => {
+  document.querySelectorAll("td.dimension").forEach((match) => {
-        match.classList.remove('currentDimension');
+    match.classList.remove("currentDimension");
   });
 
-    group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
+  group.querySelectorAll(`td[data-col='${col}']`).forEach((match) => {
-        match.classList.add('highlighted')
+    match.classList.add("highlighted");
-    })
+  });
-
 }
 
 function hoverCell(e) {
@@ -75,42 +93,42 @@ function hoverCell(e) {
   const col = cell.dataset.col;
   const dim = cell.dataset.dim;
 
-    hoverOff()
+  hoverOff();
-    document.querySelectorAll('table > thead > tr > th').forEach(match => {
+  document.querySelectorAll("table > thead > tr > th").forEach((match) => {
-        if (match.dataset.col === col) match.classList.add('hover')
+    if (match.dataset.col === col) match.classList.add("hover");
   });
-    group.querySelectorAll('td.dimension').forEach(match => {
+  group.querySelectorAll("td.dimension").forEach((match) => {
-        if (match.innerText === dim) match.classList.add('hover')
+    if (match.innerText === dim) match.classList.add("hover");
   });
-    group.querySelectorAll('td:not(.dimension), th').forEach(match => {
+  group.querySelectorAll("td:not(.dimension), th").forEach((match) => {
-        match.classList.add('hover')
+    match.classList.add("hover");
   });
 }
 
 function hoverOff() {
-    document.querySelectorAll('table > thead > tr > th').forEach(match => {
+  document.querySelectorAll("table > thead > tr > th").forEach((match) => {
-        match.classList.remove('hover')
+    match.classList.remove("hover");
   });
-    document.querySelectorAll('td.dimension, td, th').forEach(match => {
+  document.querySelectorAll("td.dimension, td, th").forEach((match) => {
-        match.classList.remove('hover')
+    match.classList.remove("hover");
   });
 }
 
-const typeList = new Set()
+const typeList = new Set();
-const fitList = new Set()
+const fitList = new Set();
 
-document.querySelectorAll('tbody').forEach(tbody => {
+document.querySelectorAll("tbody").forEach((tbody) => {
   if (tbody.dataset.from) {
-        const source = document.querySelector(`tbody#${tbody.dataset.from}`)
+    const source = document.querySelector(`tbody#${tbody.dataset.from}`);
     if (!source) {
       console.log(`tbody with ID '${tbody.dataset.from}' not found.`);
       return;
     }
 
-        const name = tbody.querySelector('tr th').innerHTML;
+    const name = tbody.querySelector("tr th").innerHTML;
-        tbody.replaceChildren()
+    tbody.replaceChildren();
-        tbody.insertAdjacentHTML("afterbegin", source.innerHTML)
+    tbody.insertAdjacentHTML("afterbegin", source.innerHTML);
-        tbody.querySelector('tr th').innerHTML = name;
+    tbody.querySelector("tr th").innerHTML = name;
     delete tbody.dataset.from;
     tbody.dataset.type = source.dataset.type;
     tbody.dataset.fit = source.dataset.fit;
@@ -121,77 +139,91 @@ document.querySelectorAll('tbody').forEach(tbody => {
 });
 
 // build filter
-const filterTypeElement = document.querySelector('#filterType');
+const filterTypeElement = document.querySelector("#filterType");
-typeList.forEach(type => {
+typeList.forEach((type) => {
-    filterTypeElement.insertAdjacentHTML('beforeend', `<label>
+  filterTypeElement.insertAdjacentHTML(
+    "beforeend",
+    `<label>
                 <input type="checkbox" value="${type}" checked>
                 ${type}
-            </label>`)
+            </label>`,
-})
+  );
-const filterFitElement = document.querySelector('#filterFit');
+});
-fitList.forEach(fit => {
+const filterFitElement = document.querySelector("#filterFit");
-    filterFitElement.insertAdjacentHTML('beforeend', `<label>
+fitList.forEach((fit) => {
+  filterFitElement.insertAdjacentHTML(
+    "beforeend",
+    `<label>
                 <input type="checkbox" value="${fit}" checked>
                 ${fit}
-            </label>`)
+            </label>`,
-})
+  );
+});
 
 const filterType = new Set(typeList);
 const filterFit = new Set(fitList);
 
 function filter() {
-    document.querySelectorAll(`tbody`).forEach(match => {
+  document.querySelectorAll(`tbody`).forEach((match) => {
-        match.classList.toggle('filtered', !filterType.has(match.dataset.type) || !filterFit.has(match.dataset.fit));
+    match.classList.toggle(
-    })
+      "filtered",
+      !filterType.has(match.dataset.type) || !filterFit.has(match.dataset.fit),
+    );
+  });
 }
 
-filterTypeElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+filterTypeElement
-    checkbox.addEventListener('change', (e) => {
+  .querySelectorAll('input[type="checkbox"]')
+  .forEach((checkbox) => {
+    checkbox.addEventListener("change", (e) => {
       if (checkbox.checked) {
-            filterType.add(checkbox.value)
+        filterType.add(checkbox.value);
       } else {
-            filterType.delete(checkbox.value)
+        filterType.delete(checkbox.value);
       }
       filter();
     });
   });
 
-filterFitElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+filterFitElement
-    checkbox.addEventListener('change', (e) => {
+  .querySelectorAll('input[type="checkbox"]')
+  .forEach((checkbox) => {
+    checkbox.addEventListener("change", (e) => {
       if (checkbox.checked) {
-            filterFit.add(checkbox.value)
+        filterFit.add(checkbox.value);
       } else {
-            filterFit.delete(checkbox.value)
+        filterFit.delete(checkbox.value);
       }
 
       filter();
     });
   });
 
-document.querySelectorAll('td.val').forEach(cell => {
+document.querySelectorAll("td.val").forEach((cell) => {
-    const rowTitle = cell.parentElement.querySelector('th');
+  const rowTitle = cell.parentElement.querySelector("th");
-    cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
+  cell.dataset.col =
-    cell.addEventListener('pointerenter', hoverCell);
+    sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
-    cell.addEventListener('pointerleave', hoverOff);
+  cell.addEventListener("pointerenter", hoverCell);
+  cell.addEventListener("pointerleave", hoverOff);
 });
 
 // initialize table
-document.querySelectorAll('td.val:not(.empty)').forEach(cell => {
+document.querySelectorAll("td.val:not(.empty)").forEach((cell) => {
   cell.dataset.val = cell.innerText;
-    cell.dataset.diff = '';
+  cell.dataset.diff = "";
-    cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML;
+  cell.dataset.dim = cell.parentElement.querySelector("td.dimension").innerHTML;
 
-    cell.addEventListener('click', selectCellPlus);
+  cell.addEventListener("click", selectCellPlus);
 });
 
 // disable select on click outside value cell
-document.addEventListener('click', e => {
+document.addEventListener("click", (e) => {
-    document.querySelectorAll('td.val:not(.empty)').forEach(match => {
+  document.querySelectorAll("td.val:not(.empty)").forEach((match) => {
-        match.dataset.diff = '';
+    match.dataset.diff = "";
-        match.classList.remove('highlighted')
+    match.classList.remove("highlighted");
-        match.classList.remove('currentDimension')
+    match.classList.remove("currentDimension");
   });
-    document.querySelectorAll('td.dimension').forEach(match => {
+  document.querySelectorAll("td.dimension").forEach((match) => {
-        match.classList.remove('currentDimension');
+    match.classList.remove("currentDimension");
   });
 });

styleguide/assets/script/styleguide.js

@@ -1,19 +1,18 @@
-document.querySelector('nav > button')?.addEventListener('click', (e) => {
+document.querySelector("nav > button")?.addEventListener("click", (e) => {
-    document.querySelector('nav').classList.toggle('visible');
+  document.querySelector("nav").classList.toggle("visible");
-})
+});
 
-document.querySelectorAll('.toggleTheme')?.forEach(
+document.querySelectorAll(".toggleTheme")?.forEach((element) =>
-    element => element.addEventListener('click', (e) => {
+  element.addEventListener("click", (e) => {
     const newTheme = element.dataset.theme;
     applyTheme(newTheme);
-        }
+  }),
-    )
 );
 
-document.querySelector('#themeDark').addEventListener('change', (e) => {
+document.querySelector("#themeDark").addEventListener("change", (e) => {
-    setTheme(e.target.checked ? 'dark' : 'system');
+  setTheme(e.target.checked ? "dark" : "system");
-})
+});
 
-document.querySelector('#themeLight').addEventListener('change', (e) => {
+document.querySelector("#themeLight").addEventListener("change", (e) => {
-    setTheme(e.target.checked ? 'light' : 'system');
+  setTheme(e.target.checked ? "light" : "system");
-})
+});

styleguide/assets/style/base.css

@@ -129,14 +129,23 @@
   --color-accent-1: var(--color-dark-accent-1);
   --color-accent-2: var(--color-dark-accent-2);
   --color-accent-3: var(--color-dark-accent-3);
-  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
-  --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
+    drop-shadow(0 0 0.125em var(--color-primary))
+    drop-shadow(0 0 0.25em var(--color-primary));
+  --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
+    drop-shadow(0 0 0.125em var(--color-secondary))
+    drop-shadow(0 0 0.25em var(--color-secondary));
   --color-glow-primary: var(--color-white);
   --color-glow-secondary: var(--color-white);
-  --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
+  --transition-glow:
+    filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
     border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
-  --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
+  --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
-  --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
+    drop-shadow(0 0 0.0625em var(--color-primary))
+    drop-shadow(0 0 0.125em var(--color-primary));
+  --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
+    drop-shadow(0 0 0.0625em var(--color-secondary))
+    drop-shadow(0 0 0.125em var(--color-secondary));
 }
 .dark .light-only {
   display: none;
@@ -163,7 +172,8 @@
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
   --color-glow-primary: var(--color-argon-950);
   --color-glow-secondary: var(--color-krypton-950);
-  --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+  --transition-glow:
+    filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
     border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
   --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
   --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
@@ -190,14 +200,23 @@
     --color-accent-1: var(--color-dark-accent-1);
     --color-accent-2: var(--color-dark-accent-2);
     --color-accent-3: var(--color-dark-accent-3);
-    --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+    --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
-    --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
+      drop-shadow(0 0 0.125em var(--color-primary))
+      drop-shadow(0 0 0.25em var(--color-primary));
+    --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
+      drop-shadow(0 0 0.125em var(--color-secondary))
+      drop-shadow(0 0 0.25em var(--color-secondary));
     --color-glow-primary: var(--color-white);
     --color-glow-secondary: var(--color-white);
-    --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
+    --transition-glow:
+      filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
       border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
-    --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
+    --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
-    --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
+      drop-shadow(0 0 0.0625em var(--color-primary))
+      drop-shadow(0 0 0.125em var(--color-primary));
+    --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
+      drop-shadow(0 0 0.0625em var(--color-secondary))
+      drop-shadow(0 0 0.125em var(--color-secondary));
   }
   html .light-only {
     display: none;
@@ -223,7 +242,8 @@
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
     --color-glow-primary: var(--color-argon-950);
     --color-glow-secondary: var(--color-krypton-950);
-    --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+    --transition-glow:
+      filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
       border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
     --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
@@ -257,7 +277,8 @@
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
     --color-glow-primary: var(--color-argon-950);
     --color-glow-secondary: var(--color-krypton-950);
-    --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+    --transition-glow:
+      filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
       border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
     --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
@@ -282,14 +303,23 @@
     --color-accent-1: var(--color-dark-accent-1);
     --color-accent-2: var(--color-dark-accent-2);
     --color-accent-3: var(--color-dark-accent-3);
-    --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+    --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
-    --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
+      drop-shadow(0 0 0.125em var(--color-primary))
+      drop-shadow(0 0 0.25em var(--color-primary));
+    --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
+      drop-shadow(0 0 0.125em var(--color-secondary))
+      drop-shadow(0 0 0.25em var(--color-secondary));
     --color-glow-primary: var(--color-white);
     --color-glow-secondary: var(--color-white);
-    --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
+    --transition-glow:
+      filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
       border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
-    --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
+    --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
-    --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
+      drop-shadow(0 0 0.0625em var(--color-primary))
+      drop-shadow(0 0 0.125em var(--color-primary));
+    --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
+      drop-shadow(0 0 0.0625em var(--color-secondary))
+      drop-shadow(0 0 0.125em var(--color-secondary));
   }
   html:has(#themeDark:checked) .light-only {
     display: none;
@@ -385,12 +415,18 @@ body {
   font-family: "Athiti", ui-sans, sans-serif;
 }
 
-h1, .h1,
+h1,
-h2, .h2,
+.h1,
-h3, .h3,
+h2,
-h4, .h4,
+.h2,
-h5, .h5,
+h3,
-h6, .h6 {
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
   font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   margin: 1rem 0;
@@ -496,7 +532,9 @@ a {
   color: var(--color-accent-1);
   text-decoration: underline;
 }
-a:hover, a:active, a:focus {
+a:hover,
+a:active,
+a:focus {
   color: var(--color-accent-3);
   text-decoration: none;
 }
@@ -504,7 +542,9 @@ a:visited {
   color: var(--color-accent-2);
   text-decoration: underline;
 }
-a:visited:hover, a:visited:active, a:visited:focus {
+a:visited:hover,
+a:visited:active,
+a:visited:focus {
   color: var(--color-accent-3);
   text-decoration: none;
 }

styleguide/assets/style/base.scss

@@ -145,16 +145,24 @@ $mobile-navigation-height: 4rem;
   --color-accent-2: var(--color-dark-accent-2);
   --color-accent-3: var(--color-dark-accent-3);
 
-  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
-  --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
+    drop-shadow(0 0 0.125em var(--color-primary))
+    drop-shadow(0 0 0.25em var(--color-primary));
+  --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
+    drop-shadow(0 0 0.125em var(--color-secondary))
+    drop-shadow(0 0 0.25em var(--color-secondary));
   --color-glow-primary: var(--color-white);
   --color-glow-secondary: var(--color-white);
-  --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
+  --transition-glow:
+    filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
     border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
 
-  --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
+  --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
-  --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
+    drop-shadow(0 0 0.0625em var(--color-primary))
-
+    drop-shadow(0 0 0.125em var(--color-primary));
+  --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
+    drop-shadow(0 0 0.0625em var(--color-secondary))
+    drop-shadow(0 0 0.125em var(--color-secondary));
 
   .light-only {
     display: none;
@@ -184,13 +192,13 @@ $mobile-navigation-height: 4rem;
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
   --color-glow-primary: var(--color-argon-950);
   --color-glow-secondary: var(--color-krypton-950);
-  --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+  --transition-glow:
+    filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
     border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
 
   --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
   --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
 
-
   .light-only {
     display: initial;
   }
@@ -237,91 +245,91 @@ $mobile-navigation-height: 4rem;
 // fonts
 
 @font-face {
-  font-family: 'Athiti';
+  font-family: "Athiti";
   font-weight: 700;
-  src: url('../font/athiti/Athiti-Bold.woff2') format('woff2');
+  src: url("../font/athiti/Athiti-Bold.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Athiti';
+  font-family: "Athiti";
   font-weight: 600;
-  src: url('../font/athiti/Athiti-SemiBold.woff2') format('woff2');
+  src: url("../font/athiti/Athiti-SemiBold.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Athiti';
+  font-family: "Athiti";
   font-weight: 500;
-  src: url('../font/athiti/Athiti-Medium.woff2') format('woff2');
+  src: url("../font/athiti/Athiti-Medium.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Athiti';
+  font-family: "Athiti";
   font-weight: 400;
-  src: url('../font/athiti/Athiti-Regular.woff2') format('woff2');
+  src: url("../font/athiti/Athiti-Regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Athiti';
+  font-family: "Athiti";
   font-weight: 300;
-  src: url('../font/athiti/Athiti-Light.woff2') format('woff2');
+  src: url("../font/athiti/Athiti-Light.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Athiti';
+  font-family: "Athiti";
   font-weight: 200;
-  src: url('../font/athiti/Athiti-ExtraLight.woff2') format('woff2');
+  src: url("../font/athiti/Athiti-ExtraLight.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Departure Mono';
+  font-family: "Departure Mono";
-  src: url('../font/departuremono/DepartureMono-Regular.woff2') format('woff2');
+  src: url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Argon Glow';
+  font-family: "Argon Glow";
   font-weight: 100;
-  src: url('../font/argonglow/ArgonGlow-Thin.woff2') format('woff2');
+  src: url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Argon Glow';
+  font-family: "Argon Glow";
   font-weight: 200;
-  src: url('../font/argonglow/ArgonGlow-ExtraLight.woff2') format('woff2');
+  src: url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Argon Glow';
+  font-family: "Argon Glow";
   font-weight: 300;
-  src: url('../font/argonglow/ArgonGlow-Light.woff2') format('woff2');
+  src: url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Argon Glow';
+  font-family: "Argon Glow";
   font-weight: 400;
-  src: url('../font/argonglow/ArgonGlow-Regular.woff2') format('woff2');
+  src: url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Argon Glow';
+  font-family: "Argon Glow";
   font-weight: 500;
-  src: url('../font/argonglow/ArgonGlow-Medium.woff2') format('woff2');
+  src: url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Argon Glow';
+  font-family: "Argon Glow";
   font-weight: 600;
-  src: url('../font/argonglow/ArgonGlow-SemiBold.woff2') format('woff2');
+  src: url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Argon Glow';
+  font-family: "Argon Glow";
   font-weight: 700;
-  src: url('../font/argonglow/ArgonGlow-Bold.woff2') format('woff2');
+  src: url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Argon Glow';
+  font-family: "Argon Glow";
-  src: url('../font/argonglow/ArgonGlow-VariableVF.woff2') format('woff2');
+  src: url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
   font-weight: 100 900;
 }
 
@@ -334,22 +342,26 @@ $mobile-navigation-height: 4rem;
 body {
   background-color: var(--color-background);
   color: var(--color-foreground);
-  font-family: 'Athiti', ui-sans, sans-serif;
+  font-family: "Athiti", ui-sans, sans-serif;
 }
 
-h1, .h1,
+h1,
-h2, .h2,
+.h1,
-h3, .h3,
+h2,
-h4, .h4,
+.h2,
-h5, .h5,
+h3,
-h6, .h6,
+.h3,
-{
+h4,
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   margin: 1rem 0;
 }
 
-
 h1,
 .h1 {
   font-size: var(--text-5xl);
@@ -387,7 +399,7 @@ h6,
 }
 
 pre {
-  font-family: 'Departure Mono', ui-monospace, monospace;
+  font-family: "Departure Mono", ui-monospace, monospace;
   font-size: 0.8em;
   display: block;
   padding: 1rem;
@@ -404,7 +416,7 @@ pre {
 
 code,
 .code {
-  font-family: 'Departure Mono', ui-monospace, monospace;
+  font-family: "Departure Mono", ui-monospace, monospace;
   font-size: 0.8em;
   background-color: var(--color-shade-2);
   border-radius: 0.2em;
@@ -415,7 +427,6 @@ table {
   width: fit-content;
   border-collapse: collapse;
 
-
   th,
   td {
     padding: 0.25rem 0.5rem;
@@ -493,7 +504,7 @@ figure {
     object-position: center;
 
     &.glitch {
-      filter: url('glitch.svg#glitch');
+      filter: url("glitch.svg#glitch");
     }
   }
 }
@@ -506,6 +517,6 @@ img {
   margin: 0 auto;
 
   &.glitch {
-    filter: url('glitch.svg#glitch');
+    filter: url("glitch.svg#glitch");
   }
 }

styleguide/assets/style/icons.scss

@@ -1,4 +1,3 @@
-
 i[data-icon] {
   display: inline-block;
   width: 1em;
@@ -8,7 +7,7 @@ i[data-icon] {
   box-sizing: content-box;
 
   &::before {
-    content: '';
+    content: "";
     display: block;
     width: 100%;
     height: 100%;
@@ -18,39 +17,39 @@ i[data-icon] {
     background-color: currentColor;
   }
 
-  &[data-icon='arrow-left']::before {
+  &[data-icon="arrow-left"]::before {
-    mask-image: url('../icon/arrow_left.svg');
+    mask-image: url("../icon/arrow_left.svg");
   }
 
-  &[data-icon='arrow-up']::before {
+  &[data-icon="arrow-up"]::before {
-    mask-image: url('../icon/arrow_up.svg');
+    mask-image: url("../icon/arrow_up.svg");
   }
 
-  &[data-icon='arrow-right']::before {
+  &[data-icon="arrow-right"]::before {
-    mask-image: url('../icon/arrow_right.svg');
+    mask-image: url("../icon/arrow_right.svg");
   }
 
-  &[data-icon='arrow-down']::before {
+  &[data-icon="arrow-down"]::before {
-    mask-image: url('../icon/arrow_down.svg');
+    mask-image: url("../icon/arrow_down.svg");
   }
 
-  &[data-icon='info']::before {
+  &[data-icon="info"]::before {
-    mask-image: url('../icon/info.svg');
+    mask-image: url("../icon/info.svg");
   }
 
-  &[data-icon='home']::before {
+  &[data-icon="home"]::before {
-    mask-image: url('../icon/home.svg');
+    mask-image: url("../icon/home.svg");
   }
 
-  &[data-icon='menu-small']::before {
+  &[data-icon="menu-small"]::before {
-    mask-image: url('../icon/menu_small.svg');
+    mask-image: url("../icon/menu_small.svg");
   }
 
-  &[data-icon='light']::before {
+  &[data-icon="light"]::before {
-    mask-image: url('../icon/lightbulb.svg');
+    mask-image: url("../icon/lightbulb.svg");
   }
 
-  &[data-icon='warning']::before {
+  &[data-icon="warning"]::before {
-    mask-image: url('../icon/warning.svg');
+    mask-image: url("../icon/warning.svg");
   }
 }

styleguide/assets/style/merch.css

@@ -86,13 +86,13 @@ table td.val:not(.empty).hover {
 table td.val:not(.empty):hover {
   background-color: var(--color-shade-3);
 }
-table td.val.highlighted[data-dim=A] {
+table td.val.highlighted[data-dim="A"] {
   background-color: rgb(96, 165, 249);
 }
-table td.val.highlighted[data-dim=B] {
+table td.val.highlighted[data-dim="B"] {
   background-color: rgb(211, 129, 247);
 }
-table td.val.highlighted[data-dim=C] {
+table td.val.highlighted[data-dim="C"] {
   background-color: rgb(255, 121, 117);
 }
 table td.val.currentDimension:not(.hover) {
@@ -165,7 +165,7 @@ div.filterBox > div label {
   align-items: center;
   gap: 0.5rem;
 }
-div.filterBox > div label input[type=checkbox] {
+div.filterBox > div label input[type="checkbox"] {
   appearance: none;
   background-color: var(--color-shade-1);
   margin: 0;
@@ -178,7 +178,7 @@ div.filterBox > div label input[type=checkbox] {
   position: relative;
   font-family: inherit;
 }
-div.filterBox > div label input[type=checkbox]::before {
+div.filterBox > div label input[type="checkbox"]::before {
   position: absolute;
   inset: 0;
   content: "x";
@@ -188,7 +188,7 @@ div.filterBox > div label input[type=checkbox]::before {
   transform: scale(0);
   transition: 120ms transform ease-in-out;
 }
-div.filterBox > div label input[type=checkbox]:checked::before {
+div.filterBox > div label input[type="checkbox"]:checked::before {
   transform: scale(1);
 }
 

styleguide/assets/style/merch.scss

@@ -37,7 +37,7 @@ table {
       }
     }
 
-    tr:first-child > th[colspan='15'] {
+    tr:first-child > th[colspan="15"] {
       background-color: var(--color-shade-2);
       color: var(--color-dark-foreground);
     }
@@ -86,7 +86,7 @@ table {
 
   td {
     &.val {
-      font-family: 'Departure Mono', ui-monospace, monospace;
+      font-family: "Departure Mono", ui-monospace, monospace;
 
       &.hover {
         background-color: transparent;
@@ -105,15 +105,15 @@ table {
       }
 
       &.highlighted {
-        &[data-dim='A'] {
+        &[data-dim="A"] {
           background-color: rgb(96, 165, 249);
         }
 
-        &[data-dim='B'] {
+        &[data-dim="B"] {
           background-color: rgb(211, 129, 247);
         }
 
-        &[data-dim='C'] {
+        &[data-dim="C"] {
           background-color: rgb(255, 121, 117);
         }
       }
@@ -122,7 +122,7 @@ table {
         background-color: var(--color-shade-2);
       }
 
-      &:not([data-diff=''])::after {
+      &:not([data-diff=""])::after {
         content: attr(data-diff);
         display: block;
         font-size: 0.8em;
@@ -135,8 +135,8 @@ table {
         margin-top: -0.25rem;
       }
 
-      &[data-diff='']::after {
+      &[data-diff=""]::after {
-        content: '';
+        content: "";
         display: block;
         font-size: 0.8em;
         background-color: transparent;
@@ -155,9 +155,9 @@ table {
       }
 
       &.currentDimension::after {
-        content: '>';
+        content: ">";
         /*color: var(--color-secondary);*/
-        font-family: 'Departure Mono', ui-monospace, monospace;
+        font-family: "Departure Mono", ui-monospace, monospace;
         position: relative;
         right: calc(-0.5rem - 0.5ch);
         margin-left: -1ch;
@@ -172,7 +172,7 @@ div.filterBox {
   margin: 2rem 0;
   padding: 1rem;
   position: relative;
-  font-family: 'Departure Mono', ui-monospace, monospace;
+  font-family: "Departure Mono", ui-monospace, monospace;
   display: flex;
   flex-wrap: wrap;
   column-gap: 4rem;
@@ -180,7 +180,7 @@ div.filterBox {
   width: fit-content;
 
   &::before {
-    content: 'filter';
+    content: "filter";
     position: absolute;
     top: -0.6lh;
     background-color: var(--color-background);
@@ -198,7 +198,7 @@ div.filterBox {
       align-items: center;
       gap: 0.5rem;
 
-      input[type='checkbox'] {
+      input[type="checkbox"] {
         appearance: none;
         background-color: var(--color-shade-1);
         margin: 0;
@@ -214,7 +214,7 @@ div.filterBox {
         &::before {
           position: absolute;
           inset: 0;
-          content: 'x';
+          content: "x";
           text-align: center;
           font-size: 1.2rem;
           line-height: 0.7;

styleguide/assets/style/styleguide.css

@@ -129,14 +129,23 @@
   --color-accent-1: var(--color-dark-accent-1);
   --color-accent-2: var(--color-dark-accent-2);
   --color-accent-3: var(--color-dark-accent-3);
-  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
-  --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
+    drop-shadow(0 0 0.125em var(--color-primary))
+    drop-shadow(0 0 0.25em var(--color-primary));
+  --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
+    drop-shadow(0 0 0.125em var(--color-secondary))
+    drop-shadow(0 0 0.25em var(--color-secondary));
   --color-glow-primary: var(--color-white);
   --color-glow-secondary: var(--color-white);
-  --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
+  --transition-glow:
+    filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
     border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
-  --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
+  --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
-  --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
+    drop-shadow(0 0 0.0625em var(--color-primary))
+    drop-shadow(0 0 0.125em var(--color-primary));
+  --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
+    drop-shadow(0 0 0.0625em var(--color-secondary))
+    drop-shadow(0 0 0.125em var(--color-secondary));
 }
 .dark .light-only {
   display: none;
@@ -163,7 +172,8 @@
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
   --color-glow-primary: var(--color-argon-950);
   --color-glow-secondary: var(--color-krypton-950);
-  --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+  --transition-glow:
+    filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
     border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
   --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
   --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
@@ -190,14 +200,23 @@
     --color-accent-1: var(--color-dark-accent-1);
     --color-accent-2: var(--color-dark-accent-2);
     --color-accent-3: var(--color-dark-accent-3);
-    --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+    --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
-    --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
+      drop-shadow(0 0 0.125em var(--color-primary))
+      drop-shadow(0 0 0.25em var(--color-primary));
+    --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
+      drop-shadow(0 0 0.125em var(--color-secondary))
+      drop-shadow(0 0 0.25em var(--color-secondary));
     --color-glow-primary: var(--color-white);
     --color-glow-secondary: var(--color-white);
-    --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
+    --transition-glow:
+      filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
       border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
-    --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
+    --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
-    --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
+      drop-shadow(0 0 0.0625em var(--color-primary))
+      drop-shadow(0 0 0.125em var(--color-primary));
+    --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
+      drop-shadow(0 0 0.0625em var(--color-secondary))
+      drop-shadow(0 0 0.125em var(--color-secondary));
   }
   html .light-only {
     display: none;
@@ -223,7 +242,8 @@
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
     --color-glow-primary: var(--color-argon-950);
     --color-glow-secondary: var(--color-krypton-950);
-    --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+    --transition-glow:
+      filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
       border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
     --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
@@ -257,7 +277,8 @@
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
     --color-glow-primary: var(--color-argon-950);
     --color-glow-secondary: var(--color-krypton-950);
-    --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+    --transition-glow:
+      filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
       border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
     --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
@@ -282,14 +303,23 @@
     --color-accent-1: var(--color-dark-accent-1);
     --color-accent-2: var(--color-dark-accent-2);
     --color-accent-3: var(--color-dark-accent-3);
-    --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+    --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
-    --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
+      drop-shadow(0 0 0.125em var(--color-primary))
+      drop-shadow(0 0 0.25em var(--color-primary));
+    --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
+      drop-shadow(0 0 0.125em var(--color-secondary))
+      drop-shadow(0 0 0.25em var(--color-secondary));
     --color-glow-primary: var(--color-white);
     --color-glow-secondary: var(--color-white);
-    --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
+    --transition-glow:
+      filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
       border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
-    --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) drop-shadow(0 0 0.125em var(--color-primary));
+    --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
-    --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
+      drop-shadow(0 0 0.0625em var(--color-primary))
+      drop-shadow(0 0 0.125em var(--color-primary));
+    --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
+      drop-shadow(0 0 0.0625em var(--color-secondary))
+      drop-shadow(0 0 0.125em var(--color-secondary));
   }
   html:has(#themeDark:checked) .light-only {
     display: none;
@@ -385,12 +415,18 @@ body {
   font-family: "Athiti", ui-sans, sans-serif;
 }
 
-h1, .h1,
+h1,
-h2, .h2,
+.h1,
-h3, .h3,
+h2,
-h4, .h4,
+.h2,
-h5, .h5,
+h3,
-h6, .h6 {
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
   font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   margin: 1rem 0;
@@ -496,7 +532,9 @@ a {
   color: var(--color-accent-1);
   text-decoration: underline;
 }
-a:hover, a:active, a:focus {
+a:hover,
+a:active,
+a:focus {
   color: var(--color-accent-3);
   text-decoration: none;
 }
@@ -504,7 +542,9 @@ a:visited {
   color: var(--color-accent-2);
   text-decoration: underline;
 }
-a:visited:hover, a:visited:active, a:visited:focus {
+a:visited:hover,
+a:visited:active,
+a:visited:focus {
   color: var(--color-accent-3);
   text-decoration: none;
 }
@@ -553,31 +593,31 @@ i[data-icon]::before {
   mask-repeat: no-repeat;
   background-color: currentColor;
 }
-i[data-icon][data-icon=arrow-left]::before {
+i[data-icon][data-icon="arrow-left"]::before {
   mask-image: url("../icon/arrow_left.svg");
 }
-i[data-icon][data-icon=arrow-up]::before {
+i[data-icon][data-icon="arrow-up"]::before {
   mask-image: url("../icon/arrow_up.svg");
 }
-i[data-icon][data-icon=arrow-right]::before {
+i[data-icon][data-icon="arrow-right"]::before {
   mask-image: url("../icon/arrow_right.svg");
 }
-i[data-icon][data-icon=arrow-down]::before {
+i[data-icon][data-icon="arrow-down"]::before {
   mask-image: url("../icon/arrow_down.svg");
 }
-i[data-icon][data-icon=info]::before {
+i[data-icon][data-icon="info"]::before {
   mask-image: url("../icon/info.svg");
 }
-i[data-icon][data-icon=home]::before {
+i[data-icon][data-icon="home"]::before {
   mask-image: url("../icon/home.svg");
 }
-i[data-icon][data-icon=menu-small]::before {
+i[data-icon][data-icon="menu-small"]::before {
   mask-image: url("../icon/menu_small.svg");
 }
-i[data-icon][data-icon=light]::before {
+i[data-icon][data-icon="light"]::before {
   mask-image: url("../icon/lightbulb.svg");
 }
-i[data-icon][data-icon=warning]::before {
+i[data-icon][data-icon="warning"]::before {
   mask-image: url("../icon/warning.svg");
 }
 
@@ -617,10 +657,14 @@ body header #backToWiki > img {
 body header #backToWiki:hover > img {
   transform: scale(1.05);
 }
-body h1, body .h1,
+body h1,
-body h2, body .h2,
+body .h1,
-body h3, body .h3,
+body h2,
-body h4, body .h4 {
+body .h2,
+body h3,
+body .h3,
+body h4,
+body .h4 {
   filter: var(--text-glow-primary);
 }
 body > div {
@@ -706,10 +750,12 @@ body > div nav ul li.link-back {
 body > div nav ul li.active {
   background-color: var(--color-shade-2);
 }
-body > div nav ul li.link-back a, body > div nav ul li.active a {
+body > div nav ul li.link-back a,
+body > div nav ul li.active a {
   border-color: var(--color-shade-4);
 }
-body > div nav ul li > a, body > div nav ul li label {
+body > div nav ul li > a,
+body > div nav ul li label {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -724,26 +770,60 @@ body > div nav ul li > a, body > div nav ul li label {
   transition-duration: 400ms;
   transition-timing-function: ease-in;
 }
-body > div nav ul li > a:visited, body > div nav ul li > a:focus, body > div nav ul li > a:active, body > div nav ul li > a:hover, body > div nav ul li label:visited, body > div nav ul li label:focus, body > div nav ul li label:active, body > div nav ul li label:hover {
+body > div nav ul li > a:visited,
+body > div nav ul li > a:focus,
+body > div nav ul li > a:active,
+body > div nav ul li > a:hover,
+body > div nav ul li label:visited,
+body > div nav ul li label:focus,
+body > div nav ul li label:active,
+body > div nav ul li label:hover {
   color: var(--color-foreground);
 }
-body > div nav ul li:hover, body > div nav ul li:focus-within {
+body > div nav ul li:hover,
+body > div nav ul li:focus-within {
   background-color: transparent;
 }
-body > div nav ul li:hover a, body > div nav ul li:hover label, body > div nav ul li:focus-within a, body > div nav ul li:focus-within label {
+body > div nav ul li:hover a,
+body > div nav ul li:hover label,
+body > div nav ul li:focus-within a,
+body > div nav ul li:focus-within label {
   border: solid 0.1em var(--color-glow-primary);
   background-color: transparent;
   filter: var(--filter-glow-primary);
   transition: var(--transition-glow);
 }
-body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body > div nav ul li:hover a:active, body > div nav ul li:hover a:hover, body > div nav ul li:hover label:visited, body > div nav ul li:hover label:focus, body > div nav ul li:hover label:active, body > div nav ul li:hover label:hover, body > div nav ul li:focus-within a:visited, body > div nav ul li:focus-within a:focus, body > div nav ul li:focus-within a:active, body > div nav ul li:focus-within a:hover, body > div nav ul li:focus-within label:visited, body > div nav ul li:focus-within label:focus, body > div nav ul li:focus-within label:active, body > div nav ul li:focus-within label:hover {
+body > div nav ul li:hover a:visited,
+body > div nav ul li:hover a:focus,
+body > div nav ul li:hover a:active,
+body > div nav ul li:hover a:hover,
+body > div nav ul li:hover label:visited,
+body > div nav ul li:hover label:focus,
+body > div nav ul li:hover label:active,
+body > div nav ul li:hover label:hover,
+body > div nav ul li:focus-within a:visited,
+body > div nav ul li:focus-within a:focus,
+body > div nav ul li:focus-within a:active,
+body > div nav ul li:focus-within a:hover,
+body > div nav ul li:focus-within label:visited,
+body > div nav ul li:focus-within label:focus,
+body > div nav ul li:focus-within label:active,
+body > div nav ul li:focus-within label:hover {
   color: var(--color-glow-primary);
 }
-body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-back a {
+body > div nav ul li:hover.link-back a,
+body > div nav ul li:focus-within.link-back a {
   border: solid 0.1em var(--color-glow-secondary);
   filter: var(--filter-glow-secondary);
 }
-body > div nav ul li:hover.link-back a:visited, body > div nav ul li:hover.link-back a:focus, body > div nav ul li:hover.link-back a:active, body > div nav ul li:hover.link-back a:hover, body > div nav ul li:focus-within.link-back a:visited, body > div nav ul li:focus-within.link-back a:focus, body > div nav ul li:focus-within.link-back a:active, body > div nav ul li:focus-within.link-back a:hover {
+body > div nav ul li:hover.link-back a:visited,
+body > div nav ul li:hover.link-back a:focus,
+body > div nav ul li:hover.link-back a:active,
+body > div nav ul li:hover.link-back a:hover,
+body > div nav ul li:focus-within.link-back a:visited,
+body > div nav ul li:focus-within.link-back a:focus,
+body > div nav ul li:focus-within.link-back a:active,
+body > div nav ul li:focus-within.link-back a:hover {
   color: var(--color-glow-secondary);
 }
 body > div nav ul li:not(.themeToggle) i[data-icon] {
@@ -779,15 +859,23 @@ body > div main {
   background-color: var(--color-background);
 }
 
-a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
+a.a-regular,
+a.a-regular:hover,
+a.a-regular:active,
+a.a-regular:focus,
+a.a-regular:visited {
   color: var(--color-accent-1);
   text-decoration: underline;
 }
-a.a-hover, a.a-hover:visited {
+a.a-hover,
+a.a-hover:visited {
   color: var(--color-accent-3);
   text-decoration: none;
 }
-a.a-visited, a.a-visited:hover, a.a-visited:active, a.a-visited:focus {
+a.a-visited,
+a.a-visited:hover,
+a.a-visited:active,
+a.a-visited:focus {
   color: var(--color-accent-2);
   text-decoration: underline;
 }
@@ -873,11 +961,15 @@ main > div.generator img {
   width: 400px;
   height: 300px;
   object-fit: contain;
-  filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+  filter: drop-shadow(0 0 0.0625em var(--color-white))
+    drop-shadow(0 0 0.125em var(--color-primary))
+    drop-shadow(0 0 0.25em var(--color-primary));
 }
 main > div.generator i {
   font-size: 3em;
-  filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+  filter: drop-shadow(0 0 0.0625em var(--color-white))
+    drop-shadow(0 0 0.125em var(--color-primary))
+    drop-shadow(0 0 0.25em var(--color-primary));
 }
 
 .swatch-grid {

styleguide/assets/style/styleguide.scss

@@ -1,5 +1,5 @@
-@import 'base';
+@import "base";
-@import 'icons';
+@import "icons";
 
 * {
   box-sizing: border-box;
@@ -40,10 +40,14 @@ body {
     }
   }
 
-  h1, .h1,
+  h1,
-  h2, .h2,
+  .h1,
-  h3, .h3,
+  h2,
-  h4, .h4, {
+  .h2,
+  h3,
+  .h3,
+  h4,
+  .h4 {
     filter: var(--text-glow-primary);
   }
 
@@ -143,7 +147,8 @@ body {
             }
           }
 
-          > a, label {
+          > a,
+          label {
             display: flex;
             align-items: center;
             gap: 0.5rem;
@@ -171,7 +176,8 @@ body {
           &:focus-within {
             background-color: transparent;
 
-            a, label {
+            a,
+            label {
               border: solid 0.1em var(--color-glow-primary);
               background-color: transparent;
               filter: var(--filter-glow-primary);
@@ -242,7 +248,6 @@ body {
 }
 
 a {
-
   &.a-regular,
   &.a-regular:hover,
   &.a-regular:active,
@@ -294,7 +299,7 @@ a {
   }
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     border-radius: 1rem;
@@ -344,24 +349,26 @@ pre,
   }
 }
 
-
 main > div.generator {
   display: flex;
   flex-direction: column;
   gap: 1em;
   align-items: center;
 
-
   img {
     width: 400px;
     height: 300px;
     object-fit: contain;
-    filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+    filter: drop-shadow(0 0 0.0625em var(--color-white))
+      drop-shadow(0 0 0.125em var(--color-primary))
+      drop-shadow(0 0 0.25em var(--color-primary));
   }
 
   i {
     font-size: 3em;
-    filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+    filter: drop-shadow(0 0 0.0625em var(--color-white))
+      drop-shadow(0 0 0.125em var(--color-primary))
+      drop-shadow(0 0 0.25em var(--color-primary));
   }
 }
 
@@ -399,7 +406,7 @@ main > div.generator {
       }
 
       span {
-        font-family: 'Departure Mono', ui-monospace, monospace;
+        font-family: "Departure Mono", ui-monospace, monospace;
         color: var(--color-foreground);
         line-height: 1.5;
       }
@@ -408,113 +415,113 @@ main > div.generator {
 }
 
 .glow-16-primary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 16px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur16Primary')
+  filter: url("glows.svg#textBlur16Primary");
 }
 
 .glow-18-primary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 18px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur18Primary')
+  filter: url("glows.svg#textBlur18Primary");
 }
 
 .glow-24-primary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 24px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur24Primary')
+  filter: url("glows.svg#textBlur24Primary");
 }
 
 .glow-32-primary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 32px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur32Primary')
+  filter: url("glows.svg#textBlur32Primary");
 }
 
 .glow-48-primary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 48px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur48Primary')
+  filter: url("glows.svg#textBlur48Primary");
 }
 
 .glow-72-primary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 72px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur72Primary')
+  filter: url("glows.svg#textBlur72Primary");
 }
 
 .glow-160-primary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 160px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur160Primary')
+  filter: url("glows.svg#textBlur160Primary");
 }
 
 .glow-16-secondary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 16px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur16Secondary')
+  filter: url("glows.svg#textBlur16Secondary");
 }
 
 .glow-18-secondary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 18px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur18Secondary')
+  filter: url("glows.svg#textBlur18Secondary");
 }
 
 .glow-24-secondary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 24px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur24Secondary')
+  filter: url("glows.svg#textBlur24Secondary");
 }
 
 .glow-32-secondary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 32px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur32Secondary')
+  filter: url("glows.svg#textBlur32Secondary");
 }
 
 .glow-48-secondary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 48px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur48Secondary')
+  filter: url("glows.svg#textBlur48Secondary");
 }
 
 .glow-72-secondary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 72px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur72Secondary')
+  filter: url("glows.svg#textBlur72Secondary");
 }
 
 .glow-160-secondary {
-  font-family: 'Argon Glow', ui-sans, sans-serif;
+  font-family: "Argon Glow", ui-sans, sans-serif;
   font-weight: 400;
   font-size: 160px;
   color: var(--color-white);
-  filter: url('glows.svg#textBlur160Secondary')
+  filter: url("glows.svg#textBlur160Secondary");
 }

styleguide/colors/index.html

@@ -1,6 +1,5 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
   <head>
     <script>
       const setTheme = (theme) => {
@@ -13,44 +12,84 @@
         setTheme();
       });
     </script>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../assets/style/styleguide.css"
+    />
     <title>Color Guide</title>
   </head>
 
   <body>
     <header>
       <a href="/" id="backToWiki">
-            <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img
+          src="../assets/image/logo_eventname_glow.svg"
+          class="header-image dark-only"
+          alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
+     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
-            <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        />
+        <img
+          src="../assets/image/logo_eventname_glow_off.svg"
+          class="header-image light-only"
+          alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
+        />
       </a>
     </header>
     <div>
       <nav>
-            <button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
+        <button aria-label="Open Navigation">
+          <i data-icon="menu-small"></i>
+        </button>
         <ul>
-                <li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
+          <li class="link-back">
-                <li><a href="../"><i data-icon="home"></i>Overview</a></li>
+            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
-                <li class="active"><a href=""><i data-icon="info"></i>Colors</a></li>
+          </li>
-                <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
+          <li>
-                <li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
+            <a href="../"><i data-icon="home"></i>Overview</a>
-                <li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
+          </li>
-                <li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
+          <li class="active">
-                <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
+            <a href=""><i data-icon="info"></i>Colors</a>
-                <li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
+          </li>
+          <li>
+            <a href="../typography"><i data-icon="info"></i>Typography</a>
+          </li>
+          <li>
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+          </li>
+          <li>
+            <a href="../logo"><i data-icon="info"></i>Logo</a>
+          </li>
+          <li>
+            <a href="../glow"><i data-icon="info"></i>Glow</a>
+          </li>
+          <li>
+            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+          </li>
+          <li>
+            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+          </li>
           <li id="themeToggleDark" class="themeToggle">
-                    <input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeDark"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeDark">
               <i data-icon="light"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
-                    <input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeLight"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeLight">
               <i data-icon="light"></i>
             </label>
@@ -62,46 +101,57 @@
           <i data-icon="warning"></i>
           <p>
             <strong>Work in progress</strong>
-                    This style guide is still under development.<br>
+            This style guide is still under development.<br />
-                    Not all resources may be available yet, explanations and examples may be missing and things may
+            Not all resources may be available yet, explanations and examples
-                    change without notice.
+            may be missing and things may change without notice.
           </p>
         </div>
         <h1>Color Guide</h1>
         <p>
-                The design consists of two sets of colors: lightmode and darkmode. Each set consists of the same number
+          The design consists of two sets of colors: lightmode and darkmode.
-                of colors, each of which has its own function. At the end of the page, one can find an overview of all
+          Each set consists of the same number of colors, each of which has its
-                defined colors for quick lockup. Read on for the functions of each color.
+          own function. At the end of the page, one can find an overview of all
+          defined colors for quick lockup. Read on for the functions of each
+          color.
         </p>
         <p>
-                The fore- and background colors are chosen for good contrast and are the same but swapped for light- and
+          The fore- and background colors are chosen for good contrast and are
-                darkmode. Most backgrounds should use the background color and most texts should use the foreground
+          the same but swapped for light- and darkmode. Most backgrounds should
+          use the background color and most texts should use the foreground
           color. In some cases, more subtelty is needed:
         </p>
         <ul>
           <li>
-                    If visual distinction through containers, boxes or similar is needed, the background shades can be
+            If visual distinction through containers, boxes or similar is
-                    used to use a slightly lighter background color (in case of darkmode) or a slightly darker one (in
+            needed, the background shades can be used to use a slightly lighter
-                    case of lightmode). Preferably, each shade should corespond to a layer of nesting, but if desired,
+            background color (in case of darkmode) or a slightly darker one (in
-                    one can also mix-and-match, as long as the background for the main content is always the regular
+            case of lightmode). Preferably, each shade should corespond to a
+            layer of nesting, but if desired, one can also mix-and-match, as
+            long as the background for the main content is always the regular
             background color.
           </li>
           <li>
-                    For more subtle text, e.g. in a footer, subtitle, etc. one can use the foreground shades to achieve
+            For more subtle text, e.g. in a footer, subtitle, etc. one can use
-                    this effect. To ensure a high enough contrast between fore- and background, these colors should not
+            the foreground shades to achieve this effect. To ensure a high
-                    be used in front of the background shades mentioned above, other than for very small amounts of
+            enough contrast between fore- and background, these colors should
-                    texts like headings and alike.
+            not be used in front of the background shades mentioned above, other
+            than for very small amounts of texts like headings and alike.
           </li>
         </ul>
         <p>
-                Additionally, there are also colors for various design elements. The accent colors can be used for
+          Additionally, there are also colors for various design elements. The
-                whatever one desires, but are especially intended for use in hyperlinks like this:
+          accent colors can be used for whatever one desires, but are especially
+          intended for use in hyperlinks like this:
         </p>
         <table>
-                <caption>Overview of link highlighting</caption>
+          <caption>
+            Overview of link highlighting
+          </caption>
           <tr>
             <th scope="row">Regular Link:</th>
-                    <td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td>
+            <td>
+              <a class="a-regular" href="">https://eh22.easterhegg.eu/</a>
+            </td>
           </tr>
           <tr>
             <th scope="row">Hover/Focus/Active Link:</th>
@@ -109,13 +159,16 @@
           </tr>
           <tr>
             <th scope="row">Visited Link:</th>
-                    <td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td>
+            <td>
+              <a class="a-visited" href="">https://eh22.easterhegg.eu/</a>
+            </td>
           </tr>
         </table>
         <p>
-                Other than that, there are two more colors: the error and the success color. Intended for anything
+          Other than that, there are two more colors: the error and the success
-                regarding user-feedback, they should tell someone that something is a critical action, has some positive
+          color. Intended for anything regarding user-feedback, they should tell
-                or negativ meaning or progresses something in some way or form.
+          someone that something is a critical action, has some positive or
+          negativ meaning or progresses something in some way or form.
         </p>
 
         <h2>Digital Media</h2>
@@ -124,15 +177,29 @@
             <h3>Darkmode</h3>
 
             <section aria-labelledby="label-dark-fore-background">
-                        <span id="label-dark-fore-background">Fore- &amp; Background</span>
+              <span id="label-dark-fore-background"
+                >Fore- &amp; Background</span
+              >
 
-                        <div aria-labelledby="label-dark-swatch-foreground" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div>
+                aria-labelledby="label-dark-swatch-foreground"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-foreground)"
+                ></div>
                 <span id="label-dark-swatch-foreground">#f2f0f5</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-background" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-background)"></div>
+                aria-labelledby="label-dark-swatch-background"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-background)"
+                ></div>
                 <span id="label-dark-swatch-background">#0c011f</span>
               </div>
             </section>
@@ -140,23 +207,47 @@
             <section aria-labelledby="label-dark-shades">
               <span id="label-dark-shades">Background Shades</span>
 
-                        <div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
+                aria-labelledby="label-dark-swatch-shade-1"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-shade-1)"
+                ></div>
                 <span id="label-dark-swatch-shade-1">#180736</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div>
+                aria-labelledby="label-dark-swatch-shade-2"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-shade-2)"
+                ></div>
                 <span id="label-dark-swatch-shade-2">#26114B</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div>
+                aria-labelledby="label-dark-swatch-shade-3"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-shade-3)"
+                ></div>
                 <span id="label-dark-swatch-shade-3">#371F60</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div>
+                aria-labelledby="label-dark-swatch-shade-4"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-shade-4)"
+                ></div>
                 <span id="label-dark-swatch-shade-4">#4B3176</span>
               </div>
             </section>
@@ -164,37 +255,75 @@
             <section aria-labelledby="label-dark-texts">
               <span id="label-dark-texts">Text Shades</span>
 
-                        <div aria-labelledby="label-dark-swatch-text-1" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-text-1)"></div>
+                aria-labelledby="label-dark-swatch-text-1"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-text-1)"
+                ></div>
                 <span id="label-dark-swatch-text-1">#b2a0cb</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-text-2" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-text-2)"></div>
+                aria-labelledby="label-dark-swatch-text-2"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-text-2)"
+                ></div>
                 <span id="label-dark-swatch-text-2">#957eb5</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-text-3" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-text-3)"></div>
+                aria-labelledby="label-dark-swatch-text-3"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-text-3)"
+                ></div>
                 <span id="label-dark-swatch-text-3">#7a60a0</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-text-4" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-text-4)"></div>
+                aria-labelledby="label-dark-swatch-text-4"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-text-4)"
+                ></div>
                 <span id="label-dark-swatch-text-4">#61468b</span>
               </div>
             </section>
 
             <section aria-labelledby="label-dark-primary-secondary">
-                        <span id="label-dark-primary-secondary">Primary &amp; Secondary</span>
+              <span id="label-dark-primary-secondary"
+                >Primary &amp; Secondary</span
+              >
 
-                        <div aria-labelledby="label-dark-swatch-primary" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div>
+                aria-labelledby="label-dark-swatch-primary"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-primary)"
+                ></div>
                 <span id="label-dark-swatch-primary">#c6257d</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-secondary" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div>
+                aria-labelledby="label-dark-swatch-secondary"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-secondary)"
+                ></div>
                 <span id="label-dark-swatch-secondary">#4dadd8</span>
               </div>
             </section>
@@ -202,13 +331,25 @@
             <section aria-labelledby="label-dark-error-success">
               <span id="label-dark-error-success">Error &amp; Success</span>
 
-                        <div aria-labelledby="label-dark-swatch-error" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-error)"></div>
+                aria-labelledby="label-dark-swatch-error"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-error)"
+                ></div>
                 <span id="label-dark-swatch-error">#bb2626</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-success" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-success)"></div>
+                aria-labelledby="label-dark-swatch-success"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-success)"
+                ></div>
                 <span id="label-dark-swatch-success">#54aa18</span>
               </div>
             </section>
@@ -216,18 +357,36 @@
             <section aria-labelledby="label-dark-accents">
               <span id="label-dark-accents">Accents</span>
 
-                        <div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div>
+                aria-labelledby="label-dark-swatch-accent-1"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-accent-1)"
+                ></div>
                 <span id="label-dark-swatch-accent-1">#60a5f9</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div>
+                aria-labelledby="label-dark-swatch-accent-2"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-accent-2)"
+                ></div>
                 <span id="label-dark-swatch-accent-2">#d381f7</span>
               </div>
 
-                        <div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div>
+                aria-labelledby="label-dark-swatch-accent-3"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-accent-3)"
+                ></div>
                 <span id="label-dark-swatch-accent-3">#ff7975</span>
               </div>
             </section>
@@ -237,15 +396,29 @@
             <h3>Lightmode</h3>
 
             <section aria-labelledby="label-light-fore-background">
-                        <span id="label-light-fore-background">Fore- &amp; Background</span>
+              <span id="label-light-fore-background"
+                >Fore- &amp; Background</span
+              >
 
-                        <div aria-labelledby="label-light-swatch-foreground" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div>
+                aria-labelledby="label-light-swatch-foreground"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-foreground)"
+                ></div>
                 <span id="label-light-swatch-foreground">#0c011f</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-background" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-background)"></div>
+                aria-labelledby="label-light-swatch-background"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-background)"
+                ></div>
                 <span id="label-light-swatch-background">#f2f0f5</span>
               </div>
             </section>
@@ -253,23 +426,47 @@
             <section aria-labelledby="label-light-shades">
               <span id="label-light-shades">Background Shades</span>
 
-                        <div aria-labelledby="label-light-swatch-shade-1" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div>
+                aria-labelledby="label-light-swatch-shade-1"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-shade-1)"
+                ></div>
                 <span id="label-light-swatch-shade-1">#d1c6e0</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-shade-2" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div>
+                aria-labelledby="label-light-swatch-shade-2"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-shade-2)"
+                ></div>
                 <span id="label-light-swatch-shade-2">#b2a0cb</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-shade-3" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div>
+                aria-labelledby="label-light-swatch-shade-3"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-shade-3)"
+                ></div>
                 <span id="label-light-swatch-shade-3">#957eb5</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-shade-4" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div>
+                aria-labelledby="label-light-swatch-shade-4"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-shade-4)"
+                ></div>
                 <span id="label-light-swatch-shade-4">#7a60a0</span>
               </div>
             </section>
@@ -277,37 +474,75 @@
             <section aria-labelledby="label-light-texts">
               <span id="label-light-texts">Text Shades</span>
 
-                        <div aria-labelledby="label-light-swatch-text-1" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-text-1)"></div>
+                aria-labelledby="label-light-swatch-text-1"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-text-1)"
+                ></div>
                 <span id="label-light-swatch-text-1">#26114b</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-text-2" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-text-2)"></div>
+                aria-labelledby="label-light-swatch-text-2"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-text-2)"
+                ></div>
                 <span id="label-light-swatch-text-2">#371f60</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-text-3" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-text-3)"></div>
+                aria-labelledby="label-light-swatch-text-3"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-text-3)"
+                ></div>
                 <span id="label-light-swatch-text-3">#4b3176</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-text-4" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-text-4)"></div>
+                aria-labelledby="label-light-swatch-text-4"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-text-4)"
+                ></div>
                 <span id="label-light-swatch-text-4">#61468b</span>
               </div>
             </section>
 
             <section aria-labelledby="label-light-primary-secondary">
-                        <span id="label-light-primary-secondary">Primary &amp; Secondary</span>
+              <span id="label-light-primary-secondary"
+                >Primary &amp; Secondary</span
+              >
 
-                        <div aria-labelledby="label-light-swatch-primary" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-primary)"></div>
+                aria-labelledby="label-light-swatch-primary"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-primary)"
+                ></div>
                 <span id="label-light-swatch-primary">#9a0a61</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div>
+                aria-labelledby="label-light-swatch-secondary"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-secondary)"
+                ></div>
                 <span id="label-light-swatch-secondary">#167fac</span>
               </div>
             </section>
@@ -315,13 +550,25 @@
             <section aria-labelledby="label-light-error-success">
               <span id="label-light-error-success">Error &amp; Success</span>
 
-                        <div aria-labelledby="label-light-swatch-error" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-error)"></div>
+                aria-labelledby="label-light-swatch-error"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-error)"
+                ></div>
                 <span id="label-light-swatch-error">#b21010</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-success" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-success)"></div>
+                aria-labelledby="label-light-swatch-success"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-success)"
+                ></div>
                 <span id="label-light-swatch-success">#47990f</span>
               </div>
             </section>
@@ -329,18 +576,36 @@
             <section aria-labelledby="label-light-accents">
               <span id="label-light-accents">Accents</span>
 
-                        <div aria-labelledby="label-light-swatch-accent-1" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-accent-1)"></div>
+                aria-labelledby="label-light-swatch-accent-1"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-accent-1)"
+                ></div>
                 <span id="label-light-swatch-accent-1">#303ec0</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-accent-2" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-accent-2)"></div>
+                aria-labelledby="label-light-swatch-accent-2"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-accent-2)"
+                ></div>
                 <span id="label-light-swatch-accent-2">#6c366c</span>
               </div>
 
-                        <div aria-labelledby="label-light-swatch-accent-3" class="swatch-container">
+              <div
-                            <div class="swatch" style="--swatch-color: var(--color-light-accent-3)"></div>
+                aria-labelledby="label-light-swatch-accent-3"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-accent-3)"
+                ></div>
                 <span id="label-light-swatch-accent-3">#932f0a</span>
               </div>
             </section>
@@ -356,13 +621,25 @@
           <section aria-labelledby="label-light-primary-secondary">
             <span id="label-cmyk-primary-secondary">CMYK Colors</span>
 
-                    <div aria-labelledby="label-light-swatch-primary" class="swatch-container">
+            <div
-                        <div class="swatch" style="--swatch-color: var(--color-cmyk-primary)"></div>
+              aria-labelledby="label-light-swatch-primary"
+              class="swatch-container"
+            >
+              <div
+                class="swatch"
+                style="--swatch-color: var(--color-cmyk-primary)"
+              ></div>
               <span id="label-cmyk-swatch-primary">0/94/6/0</span>
             </div>
 
-                    <div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
+            <div
-                        <div class="swatch" style="--swatch-color: var(--color-cmyk-secondary)"></div>
+              aria-labelledby="label-light-swatch-secondary"
+              class="swatch-container"
+            >
+              <div
+                class="swatch"
+                style="--swatch-color: var(--color-cmyk-secondary)"
+              ></div>
               <span id="label-cmyk-swatch-secondary">81/0/10/0</span>
             </div>
           </section>
@@ -370,5 +647,4 @@
       </main>
     </div>
   </body>
-
 </html>

styleguide/demopage/index.html

@@ -1,6 +1,5 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
   <head>
     <script>
       const setTheme = (theme) => {
@@ -13,44 +12,84 @@
         setTheme();
       });
     </script>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../assets/style/styleguide.css"
+    />
     <title>Demopage</title>
   </head>
 
   <body>
     <header>
       <a href="/" id="backToWiki">
-            <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img
+          src="../assets/image/logo_eventname_glow.svg"
+          class="header-image dark-only"
+          alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
-            <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        />
+        <img
+          src="../assets/image/logo_eventname_glow_off.svg"
+          class="header-image light-only"
+          alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
+        />
       </a>
     </header>
     <div>
       <nav>
-            <button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
+        <button aria-label="Open Navigation">
+          <i data-icon="menu-small"></i>
+        </button>
         <ul>
-                <li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
+          <li class="link-back">
-                <li><a href="../"><i data-icon="home"></i>Overview</a></li>
+            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
-                <li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
+          </li>
-                <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
+          <li>
-                <li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
+            <a href="../"><i data-icon="home"></i>Overview</a>
-                <li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
+          </li>
-                <li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
+          <li>
-                <li class="active"><a href=""><i data-icon="info"></i>Demopage</a></li>
+            <a href="../colors"><i data-icon="info"></i>Colors</a>
-                <li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
+          </li>
+          <li>
+            <a href="../typography"><i data-icon="info"></i>Typography</a>
+          </li>
+          <li>
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+          </li>
+          <li>
+            <a href="../logo"><i data-icon="info"></i>Logo</a>
+          </li>
+          <li>
+            <a href="../glow"><i data-icon="info"></i>Glow</a>
+          </li>
+          <li class="active">
+            <a href=""><i data-icon="info"></i>Demopage</a>
+          </li>
+          <li>
+            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+          </li>
           <li id="themeToggleDark" class="themeToggle">
-                    <input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeDark"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeDark">
               <i data-icon="light"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
-                    <input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeLight"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeLight">
               <i data-icon="light"></i>
             </label>
@@ -62,14 +101,17 @@
           <i data-icon="warning"></i>
           <p>
             <strong>Work in progress</strong>
-                    This style guide is still under development.<br>
+            This style guide is still under development.<br />
-                    Not all resources may be available yet, explanations and examples may be missing and things may
+            Not all resources may be available yet, explanations and examples
-                    change without notice.
+            may be missing and things may change without notice.
           </p>
         </div>
         <h1>Demopage</h1>
-            <p>This page contains examples for various text-components and fonts, as well as colorpalettes, images, and
+        <p>
-                so on. Use can use it to get familiar with the design and as a reference for styling your own content.
+          This page contains examples for various text-components and fonts, as
+          well as colorpalettes, images, and so on. Use can use it to get
+          familiar with the design and as a reference for styling your own
+          content.
         </p>
 
         <section>
@@ -77,49 +119,78 @@
           <table>
             <tr>
               <th scope="row">Regular Link:</th>
-                        <td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td>
+              <td>
+                <a class="a-regular" href="">https://eh22.easterhegg.eu/</a>
+              </td>
             </tr>
             <tr>
               <th scope="row">Hover/Focus/Active Link:</th>
-                        <td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
+              <td>
+                <a class="a-hover" href="">https://eh22.easterhegg.eu/</a>
+              </td>
             </tr>
             <tr>
               <th scope="row">Visited Link:</th>
-                        <td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td>
+              <td>
+                <a class="a-visited" href="">https://eh22.easterhegg.eu/</a>
+              </td>
             </tr>
           </table>
         </section>
 
         <section>
           <h2>Ordered and Unordered Lists</h2>
-                <p>This is just a simple section containing plain text as well as some lists. This way you can get a
+          <p>
-                    feel for how lists fit into their surrounding content. Have a look at this ordered list: We simply
+            This is just a simple section containing plain text as well as some
-                    prefix each item with a one-indexed, right aligned number followed by a dot.</p>
+            lists. This way you can get a feel for how lists fit into their
+            surrounding content. Have a look at this ordered list: We simply
+            prefix each item with a one-indexed, right aligned number followed
+            by a dot.
+          </p>
           <ol>
             <li>Short item no. 1.</li>
-                    <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
+            <li>
-                        into the next line and therefore moves the next item further down.</li>
+              Long item in the middle. This item is longer then one visual line,
-                    <li>Long item at the end, which is also longer than one visual line. It also wraps over into the
+              which is why it wraps over into the next line and therefore moves
-                        next line, but there is no next item to move.</li>
+              the next item further down.
+            </li>
+            <li>
+              Long item at the end, which is also longer than one visual line.
+              It also wraps over into the next line, but there is no next item
+              to move.
+            </li>
           </ol>
-                <p>But sometimes, the order of items doesn't matter, in that case, we instead put a basic bullet point
+          <p>
-                    infront of each item:</p>
+            But sometimes, the order of items doesn't matter, in that case, we
+            instead put a basic bullet point infront of each item:
+          </p>
           <ul>
             <li>Short item no. 1.</li>
-                    <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
+            <li>
-                        into the next line and therefore moves the next item further down.</li>
+              Long item in the middle. This item is longer then one visual line,
-                    <li>Long item at the end, which is also longer than one visual line. It also wraps over into the
+              which is why it wraps over into the next line and therefore moves
-                        next line, but there is no next item to move.</li>
+              the next item further down.
+            </li>
+            <li>
+              Long item at the end, which is also longer than one visual line.
+              It also wraps over into the next line, but there is no next item
+              to move.
+            </li>
           </ul>
         </section>
 
         <section>
           <h2>Preformatted Text</h2>
           <!-- TODO: custom highlighting theme -->
-                <p>This example doesn't use any syntax highlighting, but one can of course use a highlighting theme to
+          <p>
-                    make it easier to differentiate identifiers and similar. At the current state, we don't recommended
+            This example doesn't use any syntax highlighting, but one can of
-                    a specific highlight-theme, but this might still change.</p>
+            course use a highlighting theme to make it easier to differentiate
-                <pre area-labelledby="code-positives-description"><code>#include &lt;stdlib.h&gt;
+            identifiers and similar. At the current state, we don't recommended
+            a specific highlight-theme, but this might still change.
+          </p>
+          <pre
+            area-labelledby="code-positives-description"
+          ><code>#include &lt;stdlib.h&gt;
 
 int *positives(int *numbers, int *size) {
     int new_size = 0;
@@ -134,45 +205,73 @@ int *positives(int *numbers, int *size) {
     *size = new_size;
     return realloc(numbers, sizeof(*numbers) * new_size);
 }</code></pre>
-                <p>This is a simple function written in C, which removes all negative integers from an array and updates
+          <p>
-                    its element count.</p>
+            This is a simple function written in C, which removes all negative
+            integers from an array and updates its element count.
+          </p>
         </section>
 
         <section>
           <h2>Section With Image</h2>
-                <p>When including images in your content, you can opt into applying an SVG filter that adds visual
+          <p>
-                    glitches to the image. This shouldn't be used on images with text or important details, because the
+            When including images in your content, you can opt into applying an
-                    glitches will most likely reduce readability. Let's use the following plain image:</p>
+            SVG filter that adds visual glitches to the image. This shouldn't be
+            used on images with text or important details, because the glitches
+            will most likely reduce readability. Let's use the following plain
+            image:
+          </p>
           <figure>
-                    <img src="../assets/image/example_cat.jpg" alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
+            <img
+              src="../assets/image/example_cat.jpg"
+              alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
                       of leopard-print fabric and looking at something behind the camera. The background is dark and
-                      plain." />
+                      plain."
-                    <figcaption>Example image without any distortion applied.</figcaption>
+            />
+            <figcaption>
+              Example image without any distortion applied.
+            </figcaption>
           </figure>
-                <p>Now, in HTML you could simply specify <code>class="glitch"</code> on the image tag to add the SVG
+          <p>
-                    filter dynamically, but this won't render said filter in Apple's Safari, which has been a known
+            Now, in HTML you could simply specify <code>class="glitch"</code> on
-                    issue for many years. So instead, we also made <a href="../generator">a simple web-tool to apply the
+            the image tag to add the SVG filter dynamically, but this won't
-                        filter</a> to an image and export it as a PNG. The tool also scales the image down to ensure
+            render said filter in Apple's Safari, which has been a known issue
-                    that the filter looks similar across all images.</p>
+            for many years. So instead, we also made
+            <a href="../generator">a simple web-tool to apply the filter</a> to
+            an image and export it as a PNG. The tool also scales the image down
+            to ensure that the filter looks similar across all images.
+          </p>
           <figure>
-                    <img class="glitch" src="../assets/image/example_cat.jpg" alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
+            <img
+              class="glitch"
+              src="../assets/image/example_cat.jpg"
+              alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
                       bright edges, which get surrounded by pink and blue to their left and right hand side. The second
                       one distorts the image by offsetting parts of the image horizontally by seemingly random yet
-                      somewhat osscilating amounts." />
+                      somewhat osscilating amounts."
+            />
             <figcaption>Example image with visual glitches applied.</figcaption>
           </figure>
-                <p>Of course, every image should include an image description. No matter if its a website, social media
+          <p>
-                    post, or a PDF. Most if not all wordprocessors (this includes Word, LaTeX and Typst) support this in
+            Of course, every image should include an image description. No
-                    one way or another.</p>
+            matter if its a website, social media post, or a PDF. Most if not
-                <p>We would also prefer it, if no one uses "AI-generated" images. The entire event design was created
+            all wordprocessors (this includes Word, LaTeX and Typst) support
-                    through hard work by living beings. No LLM/GenAI was involved in any part of the design processes.
+            this in one way or another.
-                    So we kindly ask you not to use tools which are based on theft, actively harm artist and destroy our
+          </p>
-                    planet in the process. ("AI-generated" of course does not apply to generative art and similar, but
+          <p>
-                    to LLMs/GenAI.)</p>
+            We would also prefer it, if no one uses "AI-generated" images. The
+            entire event design was created through hard work by living beings.
+            No LLM/GenAI was involved in any part of the design processes. So we
+            kindly ask you not to use tools which are based on theft, actively
+            harm artist and destroy our planet in the process. ("AI-generated"
+            of course does not apply to generative art and similar, but to
+            LLMs/GenAI.)
+          </p>
         </section>
       </main>
     </div>
-    <script src="../assets/script/styleguide.js" type="text/javascript"></script>
+    <script
+      src="../assets/script/styleguide.js"
+      type="text/javascript"
+    ></script>
   </body>
-
 </html>

styleguide/generator/index.html

@@ -1,6 +1,5 @@
 <!doctype html>
 <html lang="en">
-
   <head>
     <script>
       const setTheme = (theme) => {
@@ -13,44 +12,84 @@
         setTheme();
       });
     </script>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../assets/style/styleguide.css"
+    />
     <title>Document</title>
   </head>
 
-<body style="height: 100vh;">
+  <body style="height: 100vh">
     <header>
       <a href="/" id="backToWiki">
-            <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img
+          src="../assets/image/logo_eventname_glow.svg"
+          class="header-image dark-only"
+          alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
-            <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        />
+        <img
+          src="../assets/image/logo_eventname_glow_off.svg"
+          class="header-image light-only"
+          alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
+        />
       </a>
     </header>
     <div>
       <nav>
-            <button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
+        <button aria-label="Open Navigation">
+          <i data-icon="menu-small"></i>
+        </button>
         <ul>
-                <li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
+          <li class="link-back">
-                <li><a href="../"><i data-icon="home"></i>Overview</a></li>
+            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
-                <li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
+          </li>
-                <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
+          <li>
-                <li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
+            <a href="../"><i data-icon="home"></i>Overview</a>
-                <li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
+          </li>
-                <li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
+          <li>
-                <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
+            <a href="../colors"><i data-icon="info"></i>Colors</a>
-                <li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
+          </li>
+          <li>
+            <a href="../typography"><i data-icon="info"></i>Typography</a>
+          </li>
+          <li>
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+          </li>
+          <li>
+            <a href="../logo"><i data-icon="info"></i>Logo</a>
+          </li>
+          <li>
+            <a href="../glow"><i data-icon="info"></i>Glow</a>
+          </li>
+          <li>
+            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+          </li>
+          <li class="active">
+            <a href=""><i data-icon="info"></i>Image Generator</a>
+          </li>
           <li id="themeToggleDark" class="themeToggle">
-                    <input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeDark"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeDark">
               <i data-icon="light"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
-                    <input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeLight"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeLight">
               <i data-icon="light"></i>
             </label>
@@ -62,33 +101,44 @@
           <i data-icon="warning"></i>
           <p>
             <strong>Work in progress</strong>
-                    This style guide is still under development.<br>
+            This style guide is still under development.<br />
-                    Not all resources may be available yet, explanations and examples may be missing and things may
+            Not all resources may be available yet, explanations and examples
-                    change without notice.
+            may be missing and things may change without notice.
           </p>
         </div>
         <div class="generator">
-
           <div>
-                    <input id="file_input" type="file" name="image" accept="image/*">
+            <input id="file_input" type="file" name="image" accept="image/*" />
           </div>
 
           <img id="source_img" src="" />
           <i data-icon="arrow-down"></i>
           <img id="result_img" src="" />
 
-                <div style="display: none;">
+          <div style="display: none">
             <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
-                        <filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
+              <filter
-                            primitiveUnits="objectBoundingBox">
+                id="filter0"
-                            <feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" />
+                color-interpolation-filters="linearRGB"
+                filterUnits="objectBoundingBox"
+                primitiveUnits="objectBoundingBox"
+              >
+                <feColorMatrix
+                  in="SourceGraphic"
+                  type="saturate"
+                  values="0"
+                  result="bw"
+                />
                 <feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
                 <feComponentTransfer in="ltoa" result="ltoa_inverse">
                   <feFuncA type="table" tableValues="0 1" />
                 </feComponentTransfer>
 
-                            <feConvolveMatrix in="ltoa_inverse" result="pink_edges"
+                <feConvolveMatrix
-                                kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
+                  in="ltoa_inverse"
+                  result="pink_edges"
+                  kernelMatrix="-4 0 4 0 0 0 -4 0 4"
+                />
                 <feComponentTransfer in="pink_edges" result="pink">
                   <feFuncR type="table" tableValues="0.7765 0" />
                   <feFuncG type="table" tableValues="0.1451 0" />
@@ -96,8 +146,11 @@
                 </feComponentTransfer>
                 <feOffset in="pink" result="pink_shift" dx="-0.002" />
 
-                            <feConvolveMatrix in="ltoa_inverse" result="cyan_edges"
+                <feConvolveMatrix
-                                kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
+                  in="ltoa_inverse"
+                  result="cyan_edges"
+                  kernelMatrix="4 0 -4 0 0 0 4 0 -4"
+                />
                 <feComponentTransfer in="cyan_edges" result="cyan">
                   <feFuncR type="table" tableValues="0.2941 0" />
                   <feFuncG type="table" tableValues="0.6784 0" />
@@ -111,8 +164,18 @@
                   <feMergeNode in="cyan_shift" />
                 </feMerge>
 
-                            <feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" />
+                <feTurbulence
-                            <feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" />
+                  type="fractalNoise"
+                  baseFrequency="0 0.2"
+                  numOctaves="1"
+                  result="noise"
+                />
+                <feDisplacementMap
+                  in="pink_cyan_shift"
+                  in2="noise"
+                  result="distorted_raw"
+                  scale="0.02"
+                />
                 <feOffset in="distorted_raw" result="distorted" />
               </filter>
 
@@ -122,16 +185,15 @@
             </svg>
           </div>
 
-                <button id="download" disabled>
+          <button id="download" disabled>Download Result</button>
-                    Download Result
-                </button>
-
         </div>
       </main>
     </div>
 
     <script src="../assets/script/generator.js" type="text/javascript"></script>
-    <script src="../assets/script/styleguide.js" type="text/javascript"></script>
+    <script
+      src="../assets/script/styleguide.js"
+      type="text/javascript"
+    ></script>
   </body>
-
 </html>

styleguide/glow/index.html

@@ -1,6 +1,5 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
   <head>
     <script>
       const setTheme = (theme) => {
@@ -13,44 +12,84 @@
         setTheme();
       });
     </script>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../assets/style/styleguide.css"
+    />
     <title>Glow</title>
   </head>
 
   <body>
     <header>
       <a href="/" id="backToWiki">
-            <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img
+          src="../assets/image/logo_eventname_glow.svg"
+          class="header-image dark-only"
+          alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
-            <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        />
+        <img
+          src="../assets/image/logo_eventname_glow_off.svg"
+          class="header-image light-only"
+          alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
+        />
       </a>
     </header>
     <div>
       <nav>
-            <button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
+        <button aria-label="Open Navigation">
+          <i data-icon="menu-small"></i>
+        </button>
         <ul>
-                <li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
+          <li class="link-back">
-                <li><a href="../"><i data-icon="home"></i>Overview</a></li>
+            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
-                <li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
+          </li>
-                <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
+          <li>
-                <li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
+            <a href="../"><i data-icon="home"></i>Overview</a>
-                <li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
+          </li>
-                <li class="active"><a href=""><i data-icon="info"></i>Glow</a></li>
+          <li>
-                <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
+            <a href="../colors"><i data-icon="info"></i>Colors</a>
-                <li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
+          </li>
+          <li>
+            <a href="../typography"><i data-icon="info"></i>Typography</a>
+          </li>
+          <li>
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+          </li>
+          <li>
+            <a href="../logo"><i data-icon="info"></i>Logo</a>
+          </li>
+          <li class="active">
+            <a href=""><i data-icon="info"></i>Glow</a>
+          </li>
+          <li>
+            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+          </li>
+          <li>
+            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+          </li>
           <li id="themeToggleDark" class="themeToggle">
-                    <input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeDark"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeDark">
               <i data-icon="light"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
-                    <input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeLight"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeLight">
               <i data-icon="light"></i>
             </label>
@@ -58,14 +97,13 @@
         </ul>
       </nav>
       <main>
-
         <div class="alert">
           <i data-icon="warning"></i>
           <p>
             <strong>Work in progress</strong>
-                    This style guide is still under development.<br>
+            This style guide is still under development.<br />
-                    Not all resources may be available yet, explanations and examples may be missing and things may
+            Not all resources may be available yet, explanations and examples
-                    change without notice.
+            may be missing and things may change without notice.
           </p>
         </div>
 
@@ -73,7 +111,9 @@
         <!-- TODO -->
       </main>
     </div>
-    <script src="../assets/script/styleguide.js" type="text/javascript"></script>
+    <script
+      src="../assets/script/styleguide.js"
+      type="text/javascript"
+    ></script>
   </body>
-
 </html>

styleguide/iconography/index.html

@@ -1,6 +1,5 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
   <head>
     <script>
       const setTheme = (theme) => {
@@ -13,44 +12,84 @@
         setTheme();
       });
     </script>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../assets/style/styleguide.css"
+    />
     <title>Iconography</title>
   </head>
 
   <body>
     <header>
       <a href="/" id="backToWiki">
-            <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img
+          src="../assets/image/logo_eventname_glow.svg"
+          class="header-image dark-only"
+          alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
-            <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        />
+        <img
+          src="../assets/image/logo_eventname_glow_off.svg"
+          class="header-image light-only"
+          alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
+        />
       </a>
     </header>
     <div>
       <nav>
-            <button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
+        <button aria-label="Open Navigation">
+          <i data-icon="menu-small"></i>
+        </button>
         <ul>
-                <li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
+          <li class="link-back">
-                <li><a href="../"><i data-icon="home"></i>Overview</a></li>
+            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
-                <li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
+          </li>
-                <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
+          <li>
-                <li class="active"><a href=""><i data-icon="info"></i>Iconography</a></li>
+            <a href="../"><i data-icon="home"></i>Overview</a>
-                <li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
+          </li>
-                <li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
+          <li>
-                <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
+            <a href="../colors"><i data-icon="info"></i>Colors</a>
-                <li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
+          </li>
+          <li>
+            <a href="../typography"><i data-icon="info"></i>Typography</a>
+          </li>
+          <li class="active">
+            <a href=""><i data-icon="info"></i>Iconography</a>
+          </li>
+          <li>
+            <a href="../logo"><i data-icon="info"></i>Logo</a>
+          </li>
+          <li>
+            <a href="../glow"><i data-icon="info"></i>Glow</a>
+          </li>
+          <li>
+            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+          </li>
+          <li>
+            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+          </li>
           <li id="themeToggleDark" class="themeToggle">
-                    <input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeDark"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeDark">
               <i data-icon="light"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
-                    <input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeLight"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeLight">
               <i data-icon="light"></i>
             </label>
@@ -58,37 +97,58 @@
         </ul>
       </nav>
       <main>
-
         <div class="alert">
           <i data-icon="warning"></i>
           <p>
             <strong>Work in progress</strong>
-                    This style guide is still under development.<br>
+            This style guide is still under development.<br />
-                    Not all resources may be available yet, explanations and examples may be missing and things may
+            Not all resources may be available yet, explanations and examples
-                    change without notice.
+            may be missing and things may change without notice.
           </p>
         </div>
 
         <h1>Iconography</h1>
-            <p>Icons can help with conveying meaning or to help with directions. In order to fit into the overall theme,
+        <p>
-                we wanted to have a set of icons that implement the same design characteristics and rules as the <a
+          Icons can help with conveying meaning or to help with directions. In
-                    href="../logo/">logo, about which you can read more here</a>, and our font, <a
+          order to fit into the overall theme, we wanted to have a set of icons
-                    href="../typography/">Argon Glow, which we talk about more in the typography</a>.</p>
+          that implement the same design characteristics and rules as the
-            <p>Of course, creating a full iconset would require years of work for such a small team, which is why we
+          <a href="../logo/">logo, about which you can read more here</a>, and
-                focused on the icons needed for the wiki, styleguide and signage on the event. At time of writing that
+          our font,
-                is still roughly sixty icons which we needed to design. They can be found in our design repository (not
+          <a href="../typography/"
-                yet published).</p>
+            >Argon Glow, which we talk about more in the typography</a
+          >.
+        </p>
+        <p>
+          Of course, creating a full iconset would require years of work for
+          such a small team, which is why we focused on the icons needed for the
+          wiki, styleguide and signage on the event. At time of writing that is
+          still roughly sixty icons which we needed to design. They can be found
+          in our design repository (not yet published).
+        </p>
         <!-- TODO: Link to repository or other form of icon collection -->
-            <p>Luckily, the rules which the icons needed to adhere to, also meant, that the icons would need to be
+        <p>
-                fairly simple. Uniform bend-radii (based on a circle, not bezier), a minimum gap distance, and as few
+          Luckily, the rules which the icons needed to adhere to, also meant,
-                lines as possible, all within a limited canvas size. In the end, we decide on an SVG canvas of 600 by
+          that the icons would need to be fairly simple. Uniform bend-radii
-                600 units with a uniform grid of 25 units between gridlines. Line width was set to 50 units, and the
+          (based on a circle, not bezier), a minimum gap distance, and as few
-                same for a 90° bend's radius. Because gaps didn't always align perfectly to the grid, they were chosen
+          lines as possible, all within a limited canvas size. In the end, we
-                to always be at least 50 units and rounded up to the next gridline. Because we are aiming at a
+          decide on an SVG canvas of 600 by 600 units with a uniform grid of 25
-                neon-esque tube look, line-caps were set to rounded, adding a semicircle with a radius of 25 units.</p>
+          units between gridlines. Line width was set to 50 units, and the same
+          for a 90° bend's radius. Because gaps didn't always align perfectly to
+          the grid, they were chosen to always be at least 50 units and rounded
+          up to the next gridline. Because we are aiming at a neon-esque tube
+          look, line-caps were set to rounded, adding a semicircle with a radius
+          of 25 units.
+        </p>
         <figure>
-                <svg height="20rem" viewBox="0 0 600 600" version="1.1" id="svg" xml:space="preserve"
+          <svg
-                    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+            height="20rem"
+            viewBox="0 0 600 600"
+            version="1.1"
+            id="svg"
+            xml:space="preserve"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:svg="http://www.w3.org/2000/svg"
+          >
             <defs>
               <style>
                 g {
@@ -98,38 +158,54 @@
             </defs>
             <g>
               <path
-                            d="M 213.37856,242.00777 C 227.32944,264.08838 251.97907,278.75 280,278.75 c 1.62235,0 3.23375,-0.0492 4.83265,-0.14613 v -7.5149 C 283.23611,271.19575 281.62471,271.25 280,271.25 c -25.69487,0 -48.1643,-13.57397 -60.70703,-33.93164 l -0.46709,-0.75791 z" />
+                d="M 213.37856,242.00777 C 227.32944,264.08838 251.97907,278.75 280,278.75 c 1.62235,0 3.23375,-0.0492 4.83265,-0.14613 v -7.5149 C 283.23611,271.19575 281.62471,271.25 280,271.25 c -25.69487,0 -48.1643,-13.57397 -60.70703,-33.93164 l -0.46709,-0.75791 z"
+              />
               <path
-                            d="m 277.18801,72.132287 c 15.38784,6.470687 32.9424,8.121551 50.32371,3.594275 4.76947,-1.242294 9.3272,-2.898256 13.6409,-4.918946 l -5.67991,-5.67991 c -3.15163,1.331329 -6.43925,2.45223 -9.85162,3.341044 -14.67629,3.822705 -29.46101,2.785261 -42.66223,-2.107307 z" />
+                d="m 277.18801,72.132287 c 15.38784,6.470687 32.9424,8.121551 50.32371,3.594275 4.76947,-1.242294 9.3272,-2.898256 13.6409,-4.918946 l -5.67991,-5.67991 c -3.15163,1.331329 -6.43925,2.45223 -9.85162,3.341044 -14.67629,3.822705 -29.46101,2.785261 -42.66223,-2.107307 z"
+              />
               <g aria-label="α=135°, r=75 px">
                 <path
-                                d="m 196.15111,292.57293 -0.45833,-2.40625 q -0.46875,-2.46875 -2.32292,-2.46875 -1.39583,0 -2.03124,1.14583 -0.80209,1.4375 -0.80209,3.33333 0,2.29167 0.78125,3.38541 0.79167,1.11459 2.05208,1.11459 1.39583,0 2.14583,-2.21875 z m 1.07291,-3.1875 1.03125,-3.05208 h 1.70833 l -2.13541,6.32291 0.41667,2.28124 q 0.0937,0.51042 0.45833,0.9375 0.42708,0.5 0.76041,0.5 h 0.91667 V 298 h -1.14583 q -0.97917,0 -1.85417,-0.875 -0.42708,-0.4375 -0.60416,-1.35416 -0.47917,1.15625 -1.45833,2.06249 -0.45834,0.42709 -1.94792,0.42709 -2.44791,0 -3.63541,-1.58333 -1.21875,-1.63542 -1.21875,-4.5 0,-3.06249 1.32292,-4.49999 1.46875,-1.60416 3.53124,-1.60416 3.23958,0 3.85416,3.31249 z m 6.43749,-1.07291 h 13.35415 v 1.74999 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 18.26039,3.66666 h 3.4375 V 284.3646 l -3.73958,0.75 v -1.91666 l 3.71874,-0.75 h 2.10417 v 13.78123 h 3.43749 V 298 h -8.95832 z m 19.5833,-6.61457 q 1.51042,0.32291 2.35417,1.34374 0.85416,1.02084 0.85416,2.52083 0,2.30208 -1.58333,3.5625 -1.58333,1.26041 -4.49999,1.26041 -0.97917,0 -2.02083,-0.19791 -1.03125,-0.1875 -2.13541,-0.57292 V 295.5 q 0.87499,0.51042 1.91666,0.77084 1.04166,0.26041 2.17708,0.26041 1.97916,0 3.01041,-0.78125 1.04167,-0.78125 1.04167,-2.27083 0,-1.37499 -0.96875,-2.14583 -0.95833,-0.78124 -2.67708,-0.78124 h -1.8125 v -1.72917 h 1.89583 q 1.55208,0 2.375,-0.61458 0.82291,-0.625 0.82291,-1.79167 0,-1.19791 -0.85416,-1.83333 -0.84375,-0.64583 -2.42708,-0.64583 -0.86458,0 -1.85417,0.1875 -0.98958,0.1875 -2.17708,0.58333 v -1.87499 q 1.19792,-0.33334 2.23958,-0.5 1.05209,-0.16667 1.97917,-0.16667 2.39583,0 3.79166,1.09375 1.39583,1.08333 1.39583,2.9375 0,1.29166 -0.73958,2.18749 -0.73958,0.88542 -2.10417,1.22917 z m 7.21874,-7.16666 h 8.26041 v 1.77083 h -6.33333 v 3.8125 q 0.45834,-0.15625 0.91667,-0.22917 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42708 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16666 -1.01041,-0.16667 -2.09375,-0.5 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05208,-0.94792 1.05208,-2.57292 0,-1.62499 -1.05208,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 16.60414,1.0625 q -0.83333,0 -1.40624,0.58333 -0.57292,0.57292 -0.57292,1.40625 0,0.82292 0.57292,1.39583 0.57291,0.5625 1.40624,0.5625 0.83334,0 1.40625,-0.5625 0.57292,-0.57291 0.57292,-1.39583 0,-0.82292 -0.58334,-1.40625 -0.57291,-0.58333 -1.39583,-0.58333 z m 0,-1.34375 q 0.66667,0 1.28125,0.26042 0.61458,0.25 1.0625,0.72916 0.47917,0.46875 0.71875,1.0625 0.23958,0.59375 0.23958,1.28125 0,1.375 -0.96875,2.33333 -0.95833,0.94791 -2.35416,0.94791 -1.40625,0 -2.34375,-0.93749 -0.93749,-0.9375 -0.93749,-2.34375 0,-1.39583 0.95833,-2.36458 0.95833,-0.96875 2.34374,-0.96875 z" />
+                  d="m 196.15111,292.57293 -0.45833,-2.40625 q -0.46875,-2.46875 -2.32292,-2.46875 -1.39583,0 -2.03124,1.14583 -0.80209,1.4375 -0.80209,3.33333 0,2.29167 0.78125,3.38541 0.79167,1.11459 2.05208,1.11459 1.39583,0 2.14583,-2.21875 z m 1.07291,-3.1875 1.03125,-3.05208 h 1.70833 l -2.13541,6.32291 0.41667,2.28124 q 0.0937,0.51042 0.45833,0.9375 0.42708,0.5 0.76041,0.5 h 0.91667 V 298 h -1.14583 q -0.97917,0 -1.85417,-0.875 -0.42708,-0.4375 -0.60416,-1.35416 -0.47917,1.15625 -1.45833,2.06249 -0.45834,0.42709 -1.94792,0.42709 -2.44791,0 -3.63541,-1.58333 -1.21875,-1.63542 -1.21875,-4.5 0,-3.06249 1.32292,-4.49999 1.46875,-1.60416 3.53124,-1.60416 3.23958,0 3.85416,3.31249 z m 6.43749,-1.07291 h 13.35415 v 1.74999 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 18.26039,3.66666 h 3.4375 V 284.3646 l -3.73958,0.75 v -1.91666 l 3.71874,-0.75 h 2.10417 v 13.78123 h 3.43749 V 298 h -8.95832 z m 19.5833,-6.61457 q 1.51042,0.32291 2.35417,1.34374 0.85416,1.02084 0.85416,2.52083 0,2.30208 -1.58333,3.5625 -1.58333,1.26041 -4.49999,1.26041 -0.97917,0 -2.02083,-0.19791 -1.03125,-0.1875 -2.13541,-0.57292 V 295.5 q 0.87499,0.51042 1.91666,0.77084 1.04166,0.26041 2.17708,0.26041 1.97916,0 3.01041,-0.78125 1.04167,-0.78125 1.04167,-2.27083 0,-1.37499 -0.96875,-2.14583 -0.95833,-0.78124 -2.67708,-0.78124 h -1.8125 v -1.72917 h 1.89583 q 1.55208,0 2.375,-0.61458 0.82291,-0.625 0.82291,-1.79167 0,-1.19791 -0.85416,-1.83333 -0.84375,-0.64583 -2.42708,-0.64583 -0.86458,0 -1.85417,0.1875 -0.98958,0.1875 -2.17708,0.58333 v -1.87499 q 1.19792,-0.33334 2.23958,-0.5 1.05209,-0.16667 1.97917,-0.16667 2.39583,0 3.79166,1.09375 1.39583,1.08333 1.39583,2.9375 0,1.29166 -0.73958,2.18749 -0.73958,0.88542 -2.10417,1.22917 z m 7.21874,-7.16666 h 8.26041 v 1.77083 h -6.33333 v 3.8125 q 0.45834,-0.15625 0.91667,-0.22917 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42708 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16666 -1.01041,-0.16667 -2.09375,-0.5 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05208,-0.94792 1.05208,-2.57292 0,-1.62499 -1.05208,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 16.60414,1.0625 q -0.83333,0 -1.40624,0.58333 -0.57292,0.57292 -0.57292,1.40625 0,0.82292 0.57292,1.39583 0.57291,0.5625 1.40624,0.5625 0.83334,0 1.40625,-0.5625 0.57292,-0.57291 0.57292,-1.39583 0,-0.82292 -0.58334,-1.40625 -0.57291,-0.58333 -1.39583,-0.58333 z m 0,-1.34375 q 0.66667,0 1.28125,0.26042 0.61458,0.25 1.0625,0.72916 0.47917,0.46875 0.71875,1.0625 0.23958,0.59375 0.23958,1.28125 0,1.375 -0.96875,2.33333 -0.95833,0.94791 -2.35416,0.94791 -1.40625,0 -2.34375,-0.93749 -0.93749,-0.9375 -0.93749,-2.34375 0,-1.39583 0.95833,-2.36458 0.95833,-0.96875 2.34374,-0.96875 z"
+                />
                 <path
-                                d="m 194.40111,314.79164 q -0.32291,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83333,-0.0937 -1.625,0 -2.5,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60417,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35417,-0.52083 0.19791,0 0.4375,0.0312 0.23958,0.0208 0.53124,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 17.36456,-10.11456 h 9.99998 v 0.89583 l -5.64582,14.65622 h -2.19791 l 5.31249,-13.78122 h -7.46874 z m 14.12498,0 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.5625,3.90624 -1.56249,1.38542 -4.40624,1.38542 -0.97916,0 -2,-0.16667 -1.01041,-0.16667 -2.09374,-0.5 v -2.11458 q 0.9375,0.51042 1.93749,0.76042 1,0.25 2.11458,0.25 1.80209,0 2.85417,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85417,-0.94792 -0.84374,0 -1.68749,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 21.91663,13.80206 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33334,1.6875 1.33334,4.4375 0,2.74999 -1.33334,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.87499,-3.3125 -0.86459,-1.20833 -2.38542,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38542,-1.19791 0.87499,-1.20833 0.87499,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98957 h -2.26041 l -3.39583,-4.58332 -3.39583,4.58332 h -2.26041 l 4.53124,-6.10415 -4.14583,-5.56249 h 2.26042 l 3.09374,4.15624 3.09375,-4.15624 z" />
+                  d="m 194.40111,314.79164 q -0.32291,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83333,-0.0937 -1.625,0 -2.5,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60417,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35417,-0.52083 0.19791,0 0.4375,0.0312 0.23958,0.0208 0.53124,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 17.36456,-10.11456 h 9.99998 v 0.89583 l -5.64582,14.65622 h -2.19791 l 5.31249,-13.78122 h -7.46874 z m 14.12498,0 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.5625,3.90624 -1.56249,1.38542 -4.40624,1.38542 -0.97916,0 -2,-0.16667 -1.01041,-0.16667 -2.09374,-0.5 v -2.11458 q 0.9375,0.51042 1.93749,0.76042 1,0.25 2.11458,0.25 1.80209,0 2.85417,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85417,-0.94792 -0.84374,0 -1.68749,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 21.91663,13.80206 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33334,1.6875 1.33334,4.4375 0,2.74999 -1.33334,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.87499,-3.3125 -0.86459,-1.20833 -2.38542,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38542,-1.19791 0.87499,-1.20833 0.87499,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98957 h -2.26041 l -3.39583,-4.58332 -3.39583,4.58332 h -2.26041 l 4.53124,-6.10415 -4.14583,-5.56249 h 2.26042 l 3.09374,4.15624 3.09375,-4.15624 z"
+                />
               </g>
               <path
                 d="m 187.79306,570.26801 h 8.26041 v 1.77083 h -6.33333 v 3.81249 q 0.45834,-0.15625 0.91667,-0.22916 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42709 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16667 -1.01041,-0.16666 -2.09375,-0.49999 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05209,-0.94792 1.05209,-2.57292 0,-1.62499 -1.05209,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.18749 -0.83333,0.1875 -1.70833,0.58334 z m 18.05206,1.38541 q -1.625,0 -2.44791,1.60417 -0.8125,1.59375 -0.8125,4.80207 0,3.19792 0.8125,4.80208 0.82291,1.59375 2.44791,1.59375 1.63541,0 2.44791,-1.59375 0.82292,-1.60416 0.82292,-4.80208 0,-3.20832 -0.82292,-4.80207 -0.8125,-1.60417 -2.44791,-1.60417 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -4,-2.0625 -1.37499,-2.07291 -1.37499,-5.99999 0,-3.93749 1.37499,-5.99999 1.38542,-2.07291 4,-2.07291 z m 17.43747,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04166 1.52083,-1.54166 0.92708,-0.51042 2.20833,-0.51042 2.125,0 3.44791,1.6875 1.33333,1.6875 1.33333,4.43749 0,2.75 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51041 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.31249 -0.86458,-1.20834 -2.38541,-1.20834 -1.52083,0 -2.39583,1.20834 -0.86458,1.19791 -0.86458,3.31249 0,2.11458 0.86458,3.32291 0.875,1.19792 2.39583,1.19792 1.52083,0 2.38541,-1.19792 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98958 h -2.26041 l -3.39583,-4.58333 -3.39583,4.58333 h -2.26041 l 4.53124,-6.10416 -4.14582,-5.56249 h 2.26041 l 3.09374,4.15624 3.09375,-4.15624 z"
-                            transform="rotate(-45)" aria-label="50 px" />
+                transform="rotate(-45)"
+                aria-label="50 px"
+              />
               <g aria-label="α=90°, r=50 px">
                 <path
-                                d="m 281.87513,91.958416 -0.45833,-2.406247 q -0.46875,-2.468746 -2.32291,-2.468746 -1.39583,0 -2.03125,1.145832 -0.80208,1.437498 -0.80208,3.333328 0,2.291663 0.78125,3.385411 0.79166,1.114582 2.05208,1.114582 1.39583,0 2.14583,-2.218747 z m 1.07292,-3.187495 1.03125,-3.052079 h 1.70833 l -2.13542,6.322907 0.41667,2.281246 q 0.0937,0.510416 0.45833,0.937499 0.42708,0.499999 0.76042,0.499999 h 0.91666 v 1.624997 h -1.14583 q -0.97916,0 -1.85416,-0.874998 -0.42709,-0.4375 -0.60417,-1.354165 -0.47916,1.156248 -1.45833,2.062497 -0.45833,0.427083 -1.94791,0.427083 -2.44792,0 -3.63541,-1.583331 -1.21875,-1.635414 -1.21875,-4.499993 0,-3.062495 1.32291,-4.499993 1.46875,-1.604164 3.53125,-1.604164 3.23958,0 3.85416,3.312495 z m 6.43749,-1.072915 h 13.35414 v 1.749997 h -13.35414 z m 0,4.249993 h 13.35414 v 1.770831 h -13.35414 z m 17.9583,5.114575 v -1.916663 q 0.79167,0.374999 1.60417,0.572915 0.8125,0.197917 1.59374,0.197917 2.08334,0 3.17708,-1.395831 1.10417,-1.406248 1.26042,-4.26041 -0.60417,0.895832 -1.53125,1.374997 -0.92708,0.479166 -2.05208,0.479166 -2.33333,0 -3.69791,-1.406247 -1.35417,-1.416665 -1.35417,-3.864578 0,-2.395829 1.41667,-3.843744 1.41666,-1.447914 3.77083,-1.447914 2.69791,0 4.11457,2.072913 1.42708,2.062497 1.42708,5.999991 0,3.677078 -1.74999,5.874991 -1.73958,2.187496 -4.6875,2.187496 -0.79166,0 -1.60416,-0.156249 -0.8125,-0.15625 -1.6875,-0.46875 z m 4.1875,-6.593739 q 1.41666,0 2.23958,-0.968749 0.83333,-0.968748 0.83333,-2.656246 0,-1.67708 -0.83333,-2.645829 -0.82292,-0.979165 -2.23958,-0.979165 -1.41667,0 -2.25,0.979165 -0.82292,0.968749 -0.82292,2.645829 0,1.687498 0.82292,2.656246 0.83333,0.968749 2.25,0.968749 z m 13.82289,-7.249989 q -1.625,0 -2.44791,1.604164 -0.8125,1.593748 -0.8125,4.802076 0,3.197912 0.8125,4.802076 0.82291,1.593747 2.44791,1.593747 1.63542,0 2.44791,-1.593747 0.82292,-1.604164 0.82292,-4.802076 0,-3.208328 -0.82292,-4.802076 -0.81249,-1.604164 -2.44791,-1.604164 z m 0,-1.666664 q 2.61458,0 3.98958,2.072913 1.38541,2.062497 1.38541,5.999991 0,3.927077 -1.38541,5.999991 -1.375,2.062496 -3.98958,2.062496 -2.61458,0 -3.99999,-2.062496 -1.375,-2.072914 -1.375,-5.999991 0,-3.937494 1.375,-5.999991 1.38541,-2.072913 3.99999,-2.072913 z m 12.12498,1.343748 q -0.83333,0 -1.40625,0.583332 -0.57291,0.572916 -0.57291,1.406248 0,0.822916 0.57291,1.395831 0.57292,0.562499 1.40625,0.562499 0.83333,0 1.40625,-0.562499 0.57292,-0.572915 0.57292,-1.395831 0,-0.822915 -0.58334,-1.406248 -0.57291,-0.583332 -1.39583,-0.583332 z m 0,-1.343748 q 0.66667,0 1.28125,0.260416 0.61458,0.25 1.0625,0.729166 0.47916,0.468749 0.71875,1.062498 0.23958,0.593749 0.23958,1.281248 0,1.374998 -0.96875,2.33333 -0.95833,0.947915 -2.35416,0.947915 -1.40625,0 -2.34375,-0.937499 -0.9375,-0.937498 -0.9375,-2.343746 0,-1.395831 0.95834,-2.364579 0.95833,-0.968749 2.34374,-0.968749 z" />
+                  d="m 281.87513,91.958416 -0.45833,-2.406247 q -0.46875,-2.468746 -2.32291,-2.468746 -1.39583,0 -2.03125,1.145832 -0.80208,1.437498 -0.80208,3.333328 0,2.291663 0.78125,3.385411 0.79166,1.114582 2.05208,1.114582 1.39583,0 2.14583,-2.218747 z m 1.07292,-3.187495 1.03125,-3.052079 h 1.70833 l -2.13542,6.322907 0.41667,2.281246 q 0.0937,0.510416 0.45833,0.937499 0.42708,0.499999 0.76042,0.499999 h 0.91666 v 1.624997 h -1.14583 q -0.97916,0 -1.85416,-0.874998 -0.42709,-0.4375 -0.60417,-1.354165 -0.47916,1.156248 -1.45833,2.062497 -0.45833,0.427083 -1.94791,0.427083 -2.44792,0 -3.63541,-1.583331 -1.21875,-1.635414 -1.21875,-4.499993 0,-3.062495 1.32291,-4.499993 1.46875,-1.604164 3.53125,-1.604164 3.23958,0 3.85416,3.312495 z m 6.43749,-1.072915 h 13.35414 v 1.749997 h -13.35414 z m 0,4.249993 h 13.35414 v 1.770831 h -13.35414 z m 17.9583,5.114575 v -1.916663 q 0.79167,0.374999 1.60417,0.572915 0.8125,0.197917 1.59374,0.197917 2.08334,0 3.17708,-1.395831 1.10417,-1.406248 1.26042,-4.26041 -0.60417,0.895832 -1.53125,1.374997 -0.92708,0.479166 -2.05208,0.479166 -2.33333,0 -3.69791,-1.406247 -1.35417,-1.416665 -1.35417,-3.864578 0,-2.395829 1.41667,-3.843744 1.41666,-1.447914 3.77083,-1.447914 2.69791,0 4.11457,2.072913 1.42708,2.062497 1.42708,5.999991 0,3.677078 -1.74999,5.874991 -1.73958,2.187496 -4.6875,2.187496 -0.79166,0 -1.60416,-0.156249 -0.8125,-0.15625 -1.6875,-0.46875 z m 4.1875,-6.593739 q 1.41666,0 2.23958,-0.968749 0.83333,-0.968748 0.83333,-2.656246 0,-1.67708 -0.83333,-2.645829 -0.82292,-0.979165 -2.23958,-0.979165 -1.41667,0 -2.25,0.979165 -0.82292,0.968749 -0.82292,2.645829 0,1.687498 0.82292,2.656246 0.83333,0.968749 2.25,0.968749 z m 13.82289,-7.249989 q -1.625,0 -2.44791,1.604164 -0.8125,1.593748 -0.8125,4.802076 0,3.197912 0.8125,4.802076 0.82291,1.593747 2.44791,1.593747 1.63542,0 2.44791,-1.593747 0.82292,-1.604164 0.82292,-4.802076 0,-3.208328 -0.82292,-4.802076 -0.81249,-1.604164 -2.44791,-1.604164 z m 0,-1.666664 q 2.61458,0 3.98958,2.072913 1.38541,2.062497 1.38541,5.999991 0,3.927077 -1.38541,5.999991 -1.375,2.062496 -3.98958,2.062496 -2.61458,0 -3.99999,-2.062496 -1.375,-2.072914 -1.375,-5.999991 0,-3.937494 1.375,-5.999991 1.38541,-2.072913 3.99999,-2.072913 z m 12.12498,1.343748 q -0.83333,0 -1.40625,0.583332 -0.57291,0.572916 -0.57291,1.406248 0,0.822916 0.57291,1.395831 0.57292,0.562499 1.40625,0.562499 0.83333,0 1.40625,-0.562499 0.57292,-0.572915 0.57292,-1.395831 0,-0.822915 -0.58334,-1.406248 -0.57291,-0.583332 -1.39583,-0.583332 z m 0,-1.343748 q 0.66667,0 1.28125,0.260416 0.61458,0.25 1.0625,0.729166 0.47916,0.468749 0.71875,1.062498 0.23958,0.593749 0.23958,1.281248 0,1.374998 -0.96875,2.33333 -0.95833,0.947915 -2.35416,0.947915 -1.40625,0 -2.34375,-0.937499 -0.9375,-0.937498 -0.9375,-2.343746 0,-1.395831 0.95834,-2.364579 0.95833,-0.968749 2.34374,-0.968749 z"
+                />
                 <path
-                                d="m 273.33869,114.17713 q -0.32292,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83334,-0.0937 -1.62499,0 -2.49999,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60416,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35416,-0.52083 0.19792,0 0.4375,0.0312 0.23959,0.0208 0.53125,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 H 275.5991 Z m 0,4.24999 h 13.35415 v 1.77083 H 275.5991 Z m 17.91664,-10.11456 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.56249,3.90624 -1.5625,1.38542 -4.40625,1.38542 -0.97916,0 -1.99999,-0.16667 -1.01042,-0.16666 -2.09375,-0.5 v -2.11458 q 0.9375,0.51042 1.9375,0.76042 0.99999,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85416,-0.94792 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 18.05205,1.38541 q -1.62499,0 -2.44791,1.60416 -0.8125,1.59375 -0.8125,4.80208 0,3.19791 0.8125,4.80208 0.82292,1.59374 2.44791,1.59374 1.63542,0 2.44792,-1.59374 0.82291,-1.60417 0.82291,-4.80208 0,-3.20833 -0.82291,-4.80208 -0.8125,-1.60416 -2.44792,-1.60416 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -3.99999,-2.0625 -1.375,-2.07291 -1.375,-5.99999 0,-3.93749 1.375,-5.99999 1.38541,-2.07291 3.99999,-2.07291 z m 17.43748,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60416,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33333,1.6875 1.33333,4.4375 0,2.74999 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91667,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.3125 -0.86458,-1.20833 -2.38541,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38541,-1.19791 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21875,5.67707 4.4375,5.98957 h -2.26042 l -3.39582,-4.58332 -3.39583,4.58332 h -2.26042 l 4.53125,-6.10415 -4.14583,-5.56249 h 2.26041 l 3.09375,4.15624 3.09374,-4.15624 z" />
+                  d="m 273.33869,114.17713 q -0.32292,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83334,-0.0937 -1.62499,0 -2.49999,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60416,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35416,-0.52083 0.19792,0 0.4375,0.0312 0.23959,0.0208 0.53125,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 H 275.5991 Z m 0,4.24999 h 13.35415 v 1.77083 H 275.5991 Z m 17.91664,-10.11456 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.56249,3.90624 -1.5625,1.38542 -4.40625,1.38542 -0.97916,0 -1.99999,-0.16667 -1.01042,-0.16666 -2.09375,-0.5 v -2.11458 q 0.9375,0.51042 1.9375,0.76042 0.99999,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85416,-0.94792 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 18.05205,1.38541 q -1.62499,0 -2.44791,1.60416 -0.8125,1.59375 -0.8125,4.80208 0,3.19791 0.8125,4.80208 0.82292,1.59374 2.44791,1.59374 1.63542,0 2.44792,-1.59374 0.82291,-1.60417 0.82291,-4.80208 0,-3.20833 -0.82291,-4.80208 -0.8125,-1.60416 -2.44792,-1.60416 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -3.99999,-2.0625 -1.375,-2.07291 -1.375,-5.99999 0,-3.93749 1.375,-5.99999 1.38541,-2.07291 3.99999,-2.07291 z m 17.43748,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60416,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33333,1.6875 1.33333,4.4375 0,2.74999 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91667,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.3125 -0.86458,-1.20833 -2.38541,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38541,-1.19791 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21875,5.67707 4.4375,5.98957 h -2.26042 l -3.39582,-4.58332 -3.39583,4.58332 h -2.26042 l 4.53125,-6.10415 -4.14583,-5.56249 h 2.26041 l 3.09375,4.15624 3.09374,-4.15624 z"
+                />
               </g>
               <path
-                            d="m 557.29687,216.24219 -5.30273,5.30273 5.05078,5.05078 -24.74805,24.74805 -5.05273,-5.05078 -5.30273,5.30273 10.35546,10.35547 35.35547,-35.35547 z" />
+                d="m 557.29687,216.24219 -5.30273,5.30273 5.05078,5.05078 -24.74805,24.74805 -5.05273,-5.05078 -5.30273,5.30273 10.35546,10.35547 35.35547,-35.35547 z"
+              />
             </g>
-                    <path style="fill:#808080;"
+            <path
-                        d="m 71.185431,207.42553 c -24.198406,24.1984 -24.198409,64.19342 1e-6,88.39183 24.198409,24.1984 64.188198,24.19318 88.386608,-0.005 L 274.47515,180.90903 c 2.66087,-2.66088 4.20734,-2.30988 6.60826,-1.31541 2.4009,0.99451 3.74779,1.84302 3.7478,5.60606 l -10e-6,389.80306 a 25.000064,25.000064 0 0 0 24.99756,24.99756 25.000064,25.000064 0 0 0 25.00277,-25.00277 V 185.19446 c -10e-6,-23.9138 -15.38944,-43.83349 -34.6124,-51.79591 -19.22297,-7.96242 -44.18796,-4.75275 -61.09758,12.15688 L 124.21844,260.45854 c -5.09092,5.09091 -12.58327,5.09091 -17.67419,0 -5.09091,-5.09092 -5.09613,-12.5885 -0.005,-17.67941 L 292.15457,57.163588 c 9.97246,-9.972464 25.38634,-9.972456 35.35881,1e-5 L 504.29182,233.94204 a 25.000064,25.000064 0 0 0 35.34837,0 25.000064,25.000064 0 0 0 0.005,-35.35361 L 362.86699,21.809987 c -29.07996,-29.07996 -76.98606,-29.0799534 -106.06602,2e-6 z" />
+              style="fill: #808080"
+              d="m 71.185431,207.42553 c -24.198406,24.1984 -24.198409,64.19342 1e-6,88.39183 24.198409,24.1984 64.188198,24.19318 88.386608,-0.005 L 274.47515,180.90903 c 2.66087,-2.66088 4.20734,-2.30988 6.60826,-1.31541 2.4009,0.99451 3.74779,1.84302 3.7478,5.60606 l -10e-6,389.80306 a 25.000064,25.000064 0 0 0 24.99756,24.99756 25.000064,25.000064 0 0 0 25.00277,-25.00277 V 185.19446 c -10e-6,-23.9138 -15.38944,-43.83349 -34.6124,-51.79591 -19.22297,-7.96242 -44.18796,-4.75275 -61.09758,12.15688 L 124.21844,260.45854 c -5.09092,5.09091 -12.58327,5.09091 -17.67419,0 -5.09091,-5.09092 -5.09613,-12.5885 -0.005,-17.67941 L 292.15457,57.163588 c 9.97246,-9.972464 25.38634,-9.972456 35.35881,1e-5 L 504.29182,233.94204 a 25.000064,25.000064 0 0 0 35.34837,0 25.000064,25.000064 0 0 0 0.005,-35.35361 L 362.86699,21.809987 c -29.07996,-29.07996 -76.98606,-29.0799534 -106.06602,2e-6 z"
+            />
           </svg>
-                <figcaption>Example icon depicting an arrow pointing up, which follows the design rules outlined above.
+          <figcaption>
-                    Two bends are given an angle-marker and values that describe one as a 90° angle with a 50 px bend
+            Example icon depicting an arrow pointing up, which follows the
-                    radius, and the other as a 135° angle with a a 75 px bend. At one end of the only line, the
+            design rules outlined above. Two bends are given an angle-marker and
-                    line-width is marked as 50 px.</figcaption>
+            values that describe one as a 90° angle with a 50 px bend radius,
+            and the other as a 135° angle with a a 75 px bend. At one end of the
+            only line, the line-width is marked as 50 px.
+          </figcaption>
         </figure>
       </main>
     </div>
-    <script src="../assets/script/styleguide.js" type="text/javascript"></script>
+    <script
+      src="../assets/script/styleguide.js"
+      type="text/javascript"
+    ></script>
   </body>
-
 </html>

styleguide/index.html

@@ -1,6 +1,5 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
   <head>
     <script>
       const setTheme = (theme) => {
@@ -13,44 +12,80 @@
         setTheme();
       });
     </script>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
+    <link rel="stylesheet" type="text/css" href="assets/style/styleguide.css" />
     <title>Color Guide</title>
   </head>
 
   <body>
     <header>
       <a href="/" id="backToWiki">
-            <img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img
+          src="assets/image/logo_eventname_glow.svg"
+          class="header-image dark-only"
+          alt="Logo of Easterhegg 2025. In the style of a neon sign:
          The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-         The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
+         The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
-            <img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        />
+        <img
+          src="assets/image/logo_eventname_glow_off.svg"
+          class="header-image light-only"
+          alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
          The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-         The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
+         The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
+        />
       </a>
     </header>
     <div>
       <nav>
-            <button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
+        <button aria-label="Open Navigation">
+          <i data-icon="menu-small"></i>
+        </button>
         <ul>
-                <li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
+          <li class="link-back">
-                <li class="active"><a href=""><i data-icon="home"></i>Overview</a></li>
+            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
-                <li><a href="colors"><i data-icon="info"></i>Colors</a></li>
+          </li>
-                <li><a href="typography"><i data-icon="info"></i>Typography</a></li>
+          <li class="active">
-                <li><a href="iconography"><i data-icon="info"></i>Iconography</a></li>
+            <a href=""><i data-icon="home"></i>Overview</a>
-                <li><a href="logo"><i data-icon="info"></i>Logo</a></li>
+          </li>
-                <li><a href="glow"><i data-icon="info"></i>Glow</a></li>
+          <li>
-                <li><a href="demopage"><i data-icon="info"></i>Demopage</a></li>
+            <a href="colors"><i data-icon="info"></i>Colors</a>
-                <li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
+          </li>
+          <li>
+            <a href="typography"><i data-icon="info"></i>Typography</a>
+          </li>
+          <li>
+            <a href="iconography"><i data-icon="info"></i>Iconography</a>
+          </li>
+          <li>
+            <a href="logo"><i data-icon="info"></i>Logo</a>
+          </li>
+          <li>
+            <a href="glow"><i data-icon="info"></i>Glow</a>
+          </li>
+          <li>
+            <a href="demopage"><i data-icon="info"></i>Demopage</a>
+          </li>
+          <li>
+            <a href="generator"><i data-icon="info"></i>Image Generator</a>
+          </li>
           <li id="themeToggleDark" class="themeToggle">
-                    <input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeDark"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeDark">
               <i data-icon="light"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
-                    <input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeLight"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeLight">
               <i data-icon="light"></i>
             </label>
@@ -64,15 +99,13 @@
           <i data-icon="warning"></i>
           <p>
             <strong>Work in progress</strong>
-                    This style guide is still under development.<br>
+            This style guide is still under development.<br />
-                    Not all resources may be available yet, explanations and examples may be missing and things may
+            Not all resources may be available yet, explanations and examples
-                    change without notice.
+            may be missing and things may change without notice.
           </p>
         </div>
-
       </main>
       <script src="assets/script/styleguide.js" type="text/javascript"></script>
     </div>
   </body>
-
 </html>

styleguide/logo/index.html

@@ -1,6 +1,5 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
   <head>
     <script>
       const setTheme = (theme) => {
@@ -13,44 +12,84 @@
         setTheme();
       });
     </script>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../assets/style/styleguide.css"
+    />
     <title>Logo</title>
   </head>
 
   <body>
     <header>
       <a href="/" id="backToWiki">
-            <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img
+          src="../assets/image/logo_eventname_glow.svg"
+          class="header-image dark-only"
+          alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
-            <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        />
+        <img
+          src="../assets/image/logo_eventname_glow_off.svg"
+          class="header-image light-only"
+          alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
+        />
       </a>
     </header>
     <div>
       <nav>
-            <button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
+        <button aria-label="Open Navigation">
+          <i data-icon="menu-small"></i>
+        </button>
         <ul>
-                <li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
+          <li class="link-back">
-                <li><a href="../"><i data-icon="home"></i>Overview</a></li>
+            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
-                <li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
+          </li>
-                <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
+          <li>
-                <li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
+            <a href="../"><i data-icon="home"></i>Overview</a>
-                <li class="active"><a href=""><i data-icon="info"></i>Logo</a></li>
+          </li>
-                <li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
+          <li>
-                <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
+            <a href="../colors"><i data-icon="info"></i>Colors</a>
-                <li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
+          </li>
+          <li>
+            <a href="../typography"><i data-icon="info"></i>Typography</a>
+          </li>
+          <li>
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+          </li>
+          <li class="active">
+            <a href=""><i data-icon="info"></i>Logo</a>
+          </li>
+          <li>
+            <a href="../glow"><i data-icon="info"></i>Glow</a>
+          </li>
+          <li>
+            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+          </li>
+          <li>
+            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+          </li>
           <li id="themeToggleDark" class="themeToggle">
-                    <input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeDark"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeDark">
               <i data-icon="light"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
-                    <input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeLight"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeLight">
               <i data-icon="light"></i>
             </label>
@@ -58,79 +97,129 @@
         </ul>
       </nav>
       <main>
-
         <div class="alert">
           <i data-icon="warning"></i>
           <p>
             <strong>Work in progress</strong>
-                    This style guide is still under development.<br>
+            This style guide is still under development.<br />
-                    Not all resources may be available yet, explanations and examples may be missing and things may
+            Not all resources may be available yet, explanations and examples
-                    change without notice.
+            may be missing and things may change without notice.
           </p>
         </div>
 
         <h1>Logo</h1>
-            <p>One of the primary design elements of any design is of course its logo. But because a single logo doesn't
+        <p>
-                fit each use-case, e.g. in terms of aspect ratio or detail, we created multiple variants. On top of
+          One of the primary design elements of any design is of course its
-                that, each variant also has its separate dark and light theme variants, in case the logo is used on a
+          logo. But because a single logo doesn't fit each use-case, e.g. in
-                light background. But in general, as with the entire design, dark mode is the preferred representaton.
+          terms of aspect ratio or detail, we created multiple variants. On top
-                All logo files (with and without transparency or glow and in both light and dark mode) can be found in
+          of that, each variant also has its separate dark and light theme
-                the design repository (not yet published).</p>
+          variants, in case the logo is used on a light background. But in
+          general, as with the entire design, dark mode is the preferred
+          representaton. All logo files (with and without transparency or glow
+          and in both light and dark mode) can be found in the design repository
+          (not yet published).
+        </p>
         <!-- TODO: Link to repository or other form of logo collection -->
 
         <h2>Full Logo</h2>
-            <p>The most present logo consists of the hare and egg, as well as the motto <i>Unhandled Eggception</i> and
+        <p>
-                the eventname <i>Easterhegg 2025</i>. It is used on this website and can be used as a banner, title
+          The most present logo consists of the hare and egg, as well as the
-                image or for posters and similar. The eventname on it is optional, variants without it can be
+          motto <i>Unhandled Eggception</i> and the eventname
-                found&mdash;as all other logo files&mdash;using the link above.</p>
+          <i>Easterhegg 2025</i>. It is used on this website and can be used as
+          a banner, title image or for posters and similar. The eventname on it
+          is optional, variants without it can be found&mdash;as all other logo
+          files&mdash;using the link above.
+        </p>
         <div class="layout-column">
-                <img src="../assets/image/logos_dark/logo_eventname.png" class="dark background"
+          <img
-                    alt="Full logo of Easterhegg 2025 in the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg with cracks. The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+            src="../assets/image/logos_dark/logo_eventname.png"
-                <img src="../assets/image/logos_light/logo_eventname.png" class="light background"
+            class="dark background"
-                    alt="The same logo as the previous one, but instead in the style of an unpowered neon sign, only glowing dimly." />
+            alt="Full logo of Easterhegg 2025 in the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg with cracks. The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
+          />
+          <img
+            src="../assets/image/logos_light/logo_eventname.png"
+            class="light background"
+            alt="The same logo as the previous one, but instead in the style of an unpowered neon sign, only glowing dimly."
+          />
         </div>
 
         <h2>EH22 Logo</h2>
-            <p>Especially useful for our matrix space, this logo variant featuring only the "EH22" lettering has a more
+        <p>
-                rectangular appearance and is therefore useful for profile-esque pictures, where the eventname might not
+          Especially useful for our matrix space, this logo variant featuring
-                always be visible, e.g. in a collapsed room-overview in the Element matrix client.</p>
+          only the "EH22" lettering has a more rectangular appearance and is
+          therefore useful for profile-esque pictures, where the eventname might
+          not always be visible, e.g. in a collapsed room-overview in the
+          Element matrix client.
+        </p>
         <div class="layout-column">
-                <img src="../assets/image/logos_dark/logo_eh22.png" class="dark background"
+          <img
-                    alt="EH22 logo of Easterhegg 2025 in the style of a neon sign: It features the text 'EH22' spanning two lines. The '22' spans across the same width as 'EH' by spacing the two digits slighty further apart from one another than the two letters, giving it a rectangular appearance. The entire text features the blue neon effect from previous logos." />
+            src="../assets/image/logos_dark/logo_eh22.png"
-                <img src="../assets/image/logos_light/logo_eh22.png" class="light background"
+            class="dark background"
-                    alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
+            alt="EH22 logo of Easterhegg 2025 in the style of a neon sign: It features the text 'EH22' spanning two lines. The '22' spans across the same width as 'EH' by spacing the two digits slighty further apart from one another than the two letters, giving it a rectangular appearance. The entire text features the blue neon effect from previous logos."
+          />
+          <img
+            src="../assets/image/logos_light/logo_eh22.png"
+            class="light background"
+            alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
+          />
         </div>
 
         <h2>Icon Logos</h2>
-            <p>The following logo variants are all intended for a similar profile-esque use-case as the EH22 logo above.
+        <p>
-                The main difference is, that they don't have an explicit mention of the eventname. Meaning they should
+          The following logo variants are all intended for a similar
-                preferably be used, if the eventname is always visible (e.g. via the display name on the <a
+          profile-esque use-case as the EH22 logo above. The main difference is,
-                    href="https://chaos.social/@easterhegg2025">Easterhegg 2025 mastodon account</a>) or the association
+          that they don't have an explicit mention of the eventname. Meaning
-                is clear e.g. because it's a channel icon inside the EH22 matrix space. But this is not a super strict
+          they should preferably be used, if the eventname is always visible
-                policy. They can of course also be used as simple design elements.</p>
+          (e.g. via the display name on the
+          <a href="https://chaos.social/@easterhegg2025"
+            >Easterhegg 2025 mastodon account</a
+          >) or the association is clear e.g. because it's a channel icon inside
+          the EH22 matrix space. But this is not a super strict policy. They can
+          of course also be used as simple design elements.
+        </p>
         <div class="layout-column">
-                <img src="../assets/image/logos_dark/logo_icons.png" class="dark background"
+          <img
-                    alt="Icon logo of Easterhegg 2025 in the style of a neon sign: It features the same hare and egg as before, horizontally next to one another, but the egg is a bit lower than the hare." />
+            src="../assets/image/logos_dark/logo_icons.png"
-                <img src="../assets/image/logos_light/logo_icons.png" class="light background"
+            class="dark background"
-                    alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
+            alt="Icon logo of Easterhegg 2025 in the style of a neon sign: It features the same hare and egg as before, horizontally next to one another, but the egg is a bit lower than the hare."
+          />
+          <img
+            src="../assets/image/logos_light/logo_icons.png"
+            class="light background"
+            alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
+          />
         </div>
 
         <div class="layout-column">
-                <img src="../assets/image/logos_dark/logo_egg.png" class="dark background"
+          <img
-                    alt="Egg-only logo of Easterhegg 2025 in the style of a neon sign: It only features the egg from before." />
+            src="../assets/image/logos_dark/logo_egg.png"
-                <img src="../assets/image/logos_light/logo_egg.png" class="light background"
+            class="dark background"
-                    alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
+            alt="Egg-only logo of Easterhegg 2025 in the style of a neon sign: It only features the egg from before."
+          />
+          <img
+            src="../assets/image/logos_light/logo_egg.png"
+            class="light background"
+            alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
+          />
         </div>
 
         <div class="layout-column">
-                <img src="../assets/image/logos_dark/logo_hare.png" class="dark background"
+          <img
-                    alt="Hare-only logo of Easterhegg 2025 in the style of a neon sign: It only features the hare from before." />
+            src="../assets/image/logos_dark/logo_hare.png"
-                <img src="../assets/image/logos_light/logo_hare.png" class="light background"
+            class="dark background"
-                    alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
+            alt="Hare-only logo of Easterhegg 2025 in the style of a neon sign: It only features the hare from before."
+          />
+          <img
+            src="../assets/image/logos_light/logo_hare.png"
+            class="light background"
+            alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
+          />
         </div>
       </main>
     </div>
-    <script src="../assets/script/styleguide.js" type="text/javascript"></script>
+    <script
+      src="../assets/script/styleguide.js"
+      type="text/javascript"
+    ></script>
   </body>
-
 </html>

styleguide/typography/index.html

@@ -1,6 +1,5 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
   <head>
     <script>
       const setTheme = (theme) => {
@@ -13,44 +12,84 @@
         setTheme();
       });
     </script>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../assets/style/styleguide.css"
+    />
     <title>Typography</title>
   </head>
 
   <body>
     <header>
       <a href="/" id="backToWiki">
-            <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img
+          src="../assets/image/logo_eventname_glow.svg"
+          class="header-image dark-only"
+          alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
-            <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        />
+        <img
+          src="../assets/image/logo_eventname_glow_off.svg"
+          class="header-image light-only"
+          alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
-     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
+        />
       </a>
     </header>
     <div>
       <nav>
-            <button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
+        <button aria-label="Open Navigation">
+          <i data-icon="menu-small"></i>
+        </button>
         <ul>
-                <li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
+          <li class="link-back">
-                <li><a href="../"><i data-icon="home"></i>Overview</a></li>
+            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
-                <li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
+          </li>
-                <li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
+          <li>
-                <li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
+            <a href="../"><i data-icon="home"></i>Overview</a>
-                <li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
+          </li>
-                <li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
+          <li>
-                <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
+            <a href="../colors"><i data-icon="info"></i>Colors</a>
-                <li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
+          </li>
+          <li class="active">
+            <a href=""><i data-icon="info"></i>Typography</a>
+          </li>
+          <li>
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+          </li>
+          <li>
+            <a href="../logo"><i data-icon="info"></i>Logo</a>
+          </li>
+          <li>
+            <a href="../glow"><i data-icon="info"></i>Glow</a>
+          </li>
+          <li>
+            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+          </li>
+          <li>
+            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+          </li>
           <li id="themeToggleDark" class="themeToggle">
-                    <input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeDark"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeDark">
               <i data-icon="light"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
-                    <input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
+            <input
+              id="themeLight"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
             <label for="themeLight">
               <i data-icon="light"></i>
             </label>
@@ -58,45 +97,64 @@
         </ul>
       </nav>
       <main>
-
         <div class="alert">
           <i data-icon="warning"></i>
           <p>
             <strong>Work in progress</strong>
-                    This style guide is still under development.<br>
+            This style guide is still under development.<br />
-                    Not all resources may be available yet, explanations and examples may be missing and things may
+            Not all resources may be available yet, explanations and examples
-                    change without notice.
+            may be missing and things may change without notice.
           </p>
         </div>
 
         <h1>Typography</h1>
-            <p>The design contains multiple typefaces, which are intended to be used for different types of text. Below
+        <p>
-                you'll find an explaination about which typeface should be used for which context, as well as a table
+          The design contains multiple typefaces, which are intended to be used
-                containing specific font-sizes together with previews. If you want to see the typography in action, head
+          for different types of text. Below you'll find an explaination about
-                to the <a href="../demopage/">demopage which includes examples of various text components</a>.</p>
+          which typeface should be used for which context, as well as a table
+          containing specific font-sizes together with previews. If you want to
+          see the typography in action, head to the
+          <a href="../demopage/"
+            >demopage which includes examples of various text components</a
+          >.
+        </p>
         <dl>
           <dt>Paragraphs/Wildcard:</dt>
-                <dd>In general, everything that doesn't fall under the following categories, should use the Athiti
+          <dd>
-                    typeface, unless your use-case calls for something else. This is just a guide and design
+            In general, everything that doesn't fall under the following
-                    recommendation after all.</dd>
+            categories, should use the Athiti typeface, unless your use-case
+            calls for something else. This is just a guide and design
+            recommendation after all.
+          </dd>
 
           <dt>Headings:</dt>
-                <dd>We believe that almost no one requires more than four levels of headings. Therefore we only define
+          <dd>
-                    font-sizes for this many. But you can of course define your own additional levels. But be it slides,
+            We believe that almost no one requires more than four levels of
-                    webpages or whatever else; headings should always use our custom made neon-sign font, Argon Glow. If
+            headings. Therefore we only define font-sizes for this many. But you
-                    you are curious about why we created a custom font, we explained the decision further below.</dd>
+            can of course define your own additional levels. But be it slides,
+            webpages or whatever else; headings should always use our custom
+            made neon-sign font, Argon Glow. If you are curious about why we
+            created a custom font, we explained the decision further below.
+          </dd>
 
           <dt>Subheadings:</dt>
-                <dd>This applies to secondary titles directly following a primary title, as is typical on title-slides
+          <dd>
-                    and similar. Use Athiti, but larger than the text size of the main content. See the table below for
+            This applies to secondary titles directly following a primary title,
-                    a size guide.</dd>
+            as is typical on title-slides and similar. Use Athiti, but larger
+            than the text size of the main content. See the table below for a
+            size guide.
+          </dd>
 
           <dt>Code/monospace:</dt>
-                <dd>For monospace content, we think, Departure Mono is a fitting choice, to further add to the 80s retro
+          <dd>
-                    vibe of the neon look, by leaning into a more digital, pixelated theme. Beware: it won't work nicely
+            For monospace content, we think, Departure Mono is a fitting choice,
-                    with all font sizes, because it tries to heavily rasterize. This makes it a subadequate choice for
+            to further add to the 80s retro vibe of the neon look, by leaning
-                    terminal emulators and editors. Use your monospace typeface of choice if Departure Mono doesn't work
+            into a more digital, pixelated theme. Beware: it won't work nicely
-                    for your use-case.</dd>
+            with all font sizes, because it tries to heavily rasterize. This
+            makes it a subadequate choice for terminal emulators and editors.
+            Use your monospace typeface of choice if Departure Mono doesn't work
+            for your use-case.
+          </dd>
         </dl>
 
         <h2>Font Table</h2>
@@ -163,26 +221,45 @@
         </div>
 
         <h2>Our custom font: Argon Glow</h2>
-            <p>As mentioned above, we created Argon Glow ourselves. While researching libre typefaces (OFL or similarly
+        <p>
-                licenced) with a neon-sign look, we found quite a few candidates. But each of them made some sort of
+          As mentioned above, we created Argon Glow ourselves. While researching
-                design choice we didn't like.</p>
+          libre typefaces (OFL or similarly licenced) with a neon-sign look, we
-            <p>Major issues were gaps and line lengths. Neon signs are made using bent tubes. Some shapes would require
+          found quite a few candidates. But each of them made some sort of
-                either multiple tubes or involve very tight bends and layering in the third dimension. Some typefaces
+          design choice we didn't like.
-                did try to imitate layering, but because typefaces are usually two-dimensional, this didn't really look
+        </p>
-                satisfactory.</p>
+        <p>
-            <p>When using multiple lines, some typefaces really likes the <i>more is better</i> approach, using
+          Major issues were gaps and line lengths. Neon signs are made using
-                unnecessary gaps that one wouldn't do when creating physical signs, simply because it would be a useless
+          bent tubes. Some shapes would require either multiple tubes or involve
-                amount of additional work.</p>
+          very tight bends and layering in the third dimension. Some typefaces
-            <p>Bending tubes is difficult, requiring a minimum radius to not damage the pipe or cause flattening. So all
+          did try to imitate layering, but because typefaces are usually
-                typefaces using corners on the inside of bends were a no-go. Some typefaces on the other hand liked
+          two-dimensional, this didn't really look satisfactory.
-                bends so much, they added extra bends to the end of lines, which did a full 180. Maybe to try and
+        </p>
-                imitate serifs? Either way, we didn't like that.</p>
+        <p>
-            <p>So in the end, and over the course of multiple months, we made our own custom typeface that meets all of
+          When using multiple lines, some typefaces really likes the
-                our desired properties and is freely available under the OFL version 1.1. We hope y'all like it. And who
+          <i>more is better</i> approach, using unnecessary gaps that one
-                knows, maybe someone will use it for completely unrelated projects than this Easterhegg.</p>
+          wouldn't do when creating physical signs, simply because it would be a
+          useless amount of additional work.
+        </p>
+        <p>
+          Bending tubes is difficult, requiring a minimum radius to not damage
+          the pipe or cause flattening. So all typefaces using corners on the
+          inside of bends were a no-go. Some typefaces on the other hand liked
+          bends so much, they added extra bends to the end of lines, which did a
+          full 180. Maybe to try and imitate serifs? Either way, we didn't like
+          that.
+        </p>
+        <p>
+          So in the end, and over the course of multiple months, we made our own
+          custom typeface that meets all of our desired properties and is freely
+          available under the OFL version 1.1. We hope y'all like it. And who
+          knows, maybe someone will use it for completely unrelated projects
+          than this Easterhegg.
+        </p>
       </main>
     </div>
-    <script src="../assets/script/styleguide.js" type="text/javascript"></script>
+    <script
+      src="../assets/script/styleguide.js"
+      type="text/javascript"
+    ></script>
   </body>
-
 </html>