styleguide: move scripts, add mobile navigation, style generator

2025-02-14 23:06:36 +01:00 · 2025-02-14 23:06:36 +01:00 · fa75654b11
commit fa75654b11
parent 4ebc78ae1f
16 changed files with 390 additions and 112 deletions
--- a/styleguide/assets/script/generator.js
+++ b/styleguide/assets/script/generator.js
@ -0,0 +1,90 @@
+let can = document.createElement("canvas");
+let ctx = can.getContext('2d');
+let result;
+const downloadButton = document.querySelector('#download');
+
+function filterImage(svgDataUrl, width, height) {
+    const filteredImage = new Image();
+    const resultPreview = document.querySelector('#result_img')
+
+    can.width = width;
+    can.height = height;
+
+    filteredImage.onload = function () {
+        ctx.drawImage(filteredImage, 0, 0, width, height);
+        result = can.toDataURL();
+        downloadButton.disabled = false;
+        resultPreview.src = result;
+    };
+    filteredImage.src = svgDataUrl;
+}
+
+function loadImage(base64Image) {
+    const sourceImage = new Image();
+    const svg = document.querySelector('svg')
+    const svgImage = svg.querySelector('image')
+    const sourcePreview = document.querySelector('#source_img')
+    let svgDataUrl;
+
+    sourceImage.onload = function () {
+        let svgWidth = this.width;
+        let svgHeight = this.height;
+
+        if (this.height > 1000) {
+            svgHeight = 1000;
+            svgWidth = 1000 * this.width / this.height;
+        }
+
+        svg.setAttribute("height", svgHeight);
+        svg.setAttribute("width", svgWidth);
+
+        let svgString = (new XMLSerializer).serializeToString(svg);
+        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;
+
+    const reader = new FileReader();
+
+    reader.onload = (readerEvent) => {
+        loadImage(readerEvent.target.result);
+    };
+
+    reader.readAsDataURL(file);
+}
+
+document.querySelector('#file_input').addEventListener('change', handleFileSelect, false);
+
+function downloadURI(_uri, _name) {
+    let link = document.createElement("a");
+    link.download = 'distortedImageEH22.png';
+    link.href = result;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    delete link;
+}
+
+downloadButton.addEventListener('click', downloadURI);
+
+(async () => {
+    let exampleImageBlob = await fetch("../assets/image/example_cat.jpg")
+        .then(r => r.blob());
+
+    let dataUrl = await new Promise(resolve => {
+        let reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.readAsDataURL(exampleImageBlob);
+    });
+
+    loadImage(dataUrl);
+})()
--- a/styleguide/assets/script/merch.js
+++ b/styleguide/assets/script/merch.js
@ -0,0 +1,197 @@
+const sizes = [
+    "XXS", "XS", "S", "M", "L", "XL", "2XL", "3XL", "4XL", "5XL", "6XL"
+]
+
+function selectCell(e) {
+    const cell = e.target;
+    const value = parseFloat(cell.dataset.val);
+    const col = cell.dataset.col;
+    const dimension = cell.dataset.dim;
+
+    document.querySelectorAll('td.val:not(.empty)').forEach(match => {
+        match.dataset.diff = '';
+        match.classList.remove('highlighted')
+        match.classList.remove('currentDimension')
+        if (match.dataset.dim === dimension) {
+            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 === '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 => {
+        match.classList.remove('currentDimension');
+        if (match.innerHTML === dimension) {
+            match.classList.add('currentDimension');
+        }
+    });
+
+    cell.classList.add('highlighted')
+}
+
+function selectCellPlus(e) {
+    e.stopPropagation();
+    const cell = e.target;
+    const group = cell.parentElement.parentElement;
+    const col = cell.dataset.col;
+
+    if (cell.classList.contains('highlighted') && !cell.classList.contains('currentDimension')) {
+        selectCell(e);
+        return;
+    }
+
+    const values = {}
+    group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
+        values[match.dataset.dim] = parseFloat(match.dataset.val);
+    })
+
+    document.querySelectorAll('td.val:not(.empty)').forEach(match => {
+        match.dataset.diff = '';
+        match.classList.remove('highlighted')
+        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 === '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 => {
+        match.classList.remove('currentDimension');
+    });
+
+    group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
+        match.classList.add('highlighted')
+    })
+
+}
+
+function hoverCell(e) {
+    const cell = e.target;
+    const group = cell.parentElement.parentElement;
+    const col = cell.dataset.col;
+    const dim = cell.dataset.dim;
+
+    hoverOff()
+    document.querySelectorAll('table > thead > tr > th').forEach(match => {
+        if (match.dataset.col === col) match.classList.add('hover')
+    });
+    group.querySelectorAll('td.dimension').forEach(match => {
+        if (match.innerText === dim) match.classList.add('hover')
+    });
+    group.querySelectorAll('td:not(.dimension), th').forEach(match => {
+        match.classList.add('hover')
+    });
+}
+
+function hoverOff() {
+    document.querySelectorAll('table > thead > tr > th').forEach(match => {
+        match.classList.remove('hover')
+    });
+    document.querySelectorAll('td.dimension, td, th').forEach(match => {
+        match.classList.remove('hover')
+    });
+}
+
+const typeList = new Set()
+const fitList = new Set()
+
+document.querySelectorAll('tbody').forEach(tbody => {
+    if (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;
+        tbody.replaceChildren()
+        tbody.insertAdjacentHTML("afterbegin", source.innerHTML)
+        tbody.querySelector('tr th').innerHTML = name;
+        delete tbody.dataset.from;
+        tbody.dataset.type = source.dataset.type;
+        tbody.dataset.fit = source.dataset.fit;
+    }
+
+    typeList.add(tbody.dataset.type);
+    fitList.add(tbody.dataset.fit);
+});
+
+// build filter
+const filterTypeElement = document.querySelector('#filterType');
+typeList.forEach(type => {
+    filterTypeElement.insertAdjacentHTML('beforeend', `<label>
+                <input type="checkbox" value="${type}" checked>
+                ${type}
+            </label>`)
+})
+const filterFitElement = document.querySelector('#filterFit');
+fitList.forEach(fit => {
+    filterFitElement.insertAdjacentHTML('beforeend', `<label>
+                <input type="checkbox" value="${fit}" checked>
+                ${fit}
+            </label>`)
+})
+
+const filterType = new Set(typeList);
+const filterFit = new Set(fitList);
+
+function filter() {
+    document.querySelectorAll(`tbody`).forEach(match => {
+        match.classList.toggle('filtered', !filterType.has(match.dataset.type) || !filterFit.has(match.dataset.fit));
+    })
+}
+
+filterTypeElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+    checkbox.addEventListener('change', (e) => {
+        if (checkbox.checked) {
+            filterType.add(checkbox.value)
+        } else {
+            filterType.delete(checkbox.value)
+        }
+        filter();
+    });
+});
+
+filterFitElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+    checkbox.addEventListener('change', (e) => {
+        if (checkbox.checked) {
+            filterFit.add(checkbox.value)
+        } else {
+            filterFit.delete(checkbox.value)
+        }
+
+        filter();
+    });
+});
+
+document.querySelectorAll('td.val').forEach(cell => {
+    const rowTitle = cell.parentElement.querySelector('th');
+    cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
+    cell.addEventListener('pointerenter', hoverCell);
+    cell.addEventListener('pointerleave', hoverOff);
+});
+
+// initialize table
+document.querySelectorAll('td.val:not(.empty)').forEach(cell => {
+    cell.dataset.val = cell.innerText;
+    cell.dataset.diff = '';
+    cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML;
+
+    cell.addEventListener('click', selectCellPlus);
+});
+
+// disable select on click outside value cell
+document.addEventListener('click', e => {
+    document.querySelectorAll('td.val:not(.empty)').forEach(match => {
+        match.dataset.diff = '';
+        match.classList.remove('highlighted')
+        match.classList.remove('currentDimension')
+    });
+    document.querySelectorAll('td.dimension').forEach(match => {
+        match.classList.remove('currentDimension');
+    });
+});
--- a/styleguide/assets/script/styleguide.js
+++ b/styleguide/assets/script/styleguide.js
@ -0,0 +1,3 @@
+document.querySelector('nav > button').addEventListener('click', (e) => {
+    document.querySelector('nav').classList.toggle('visible');
+})
--- a/styleguide/assets/style/base.css
+++ b/styleguide/assets/style/base.css
@ -287,7 +287,7 @@ h6,
 .h6 {
  font-family: "Argon Glow", ui-sans, sans-serif;
  font-weight: 400;
-  margin: 0;
+  margin: 1rem 0;
 }

 h1,
@ -364,9 +364,14 @@ table tr th {
 }
 table thead {
  position: sticky;
-  top: 0;
+  top: 4rem;
  z-index: 10;
 }
+@media (min-width: 48rem) {
+  table thead {
+    top: 0;
+  }
+}
 table thead tr > th {
  outline-width: 0.1em;
  outline-style: solid;
--- a/styleguide/assets/style/base.css.map
+++ b/styleguide/assets/style/base.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"base.css"}
+{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KApXuB;EAqXvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"base.css"}
--- a/styleguide/assets/style/base.scss
+++ b/styleguide/assets/style/base.scss
@ -4,6 +4,9 @@ $breakpoint-lg: 64rem;
 $breakpoint-xl: 80rem;
 $breakpoint-2xl: 96rem;

+$breakpoint-mobile: $breakpoint-md;
+$mobile-navigation-height: 4rem;
+
 :root {
  --color-neutral-50: #F2F0F5;
  --color-neutral-100: #D1C6E0;
@ -292,7 +295,7 @@ h6,
 {
  font-family: "Argon Glow", ui-sans, sans-serif;
  font-weight: 400;
-  margin: 0;
+  margin: 1rem 0;
 }


@ -374,9 +377,13 @@ table {

  thead {
    position: sticky;
-    top: 0;
+    top: $mobile-navigation-height;
    z-index: 10;

+    @media (min-width: $breakpoint-mobile) {
+      top: 0;
+    }
+
    tr > th {
      outline-width: 0.1em;
      outline-style: solid;
--- a/styleguide/assets/style/styleguide.css
+++ b/styleguide/assets/style/styleguide.css
@ -287,7 +287,7 @@ h6,
 .h6 {
  font-family: "Argon Glow", ui-sans, sans-serif;
  font-weight: 400;
-  margin: 0;
+  margin: 1rem 0;
 }

 h1,
@ -364,9 +364,14 @@ table tr th {
 }
 table thead {
  position: sticky;
-  top: 0;
+  top: 4rem;
  z-index: 10;
 }
+@media (min-width: 48rem) {
+  table thead {
+    top: 0;
+  }
+}
 table thead tr > th {
  outline-width: 0.1em;
  outline-style: solid;
@ -442,48 +447,117 @@ body header {
  height: fit-content;
  flex-grow: 0;
 }
+@media (max-width: 48rem) {
+  body header {
+    margin-top: 4rem;
+  }
+}
+body header .header-image {
+  height: 200px;
+  width: fit-content;
+  max-width: 100%;
+  object-fit: contain;
+}
 body > div {
  display: flex;
  gap: 1rem;
  flex-grow: 1;
+  flex-direction: column;
+}
+@media (min-width: 48rem) {
+  body > div {
+    flex-direction: row;
+  }
 }
 body > div nav {
-  width: 20rem;
-  height: fit-content;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
+  padding: 0 1rem;
+  background-color: var(--color-background);
+  z-index: 20;
+  overflow: hidden;
+  width: 100%;
+  height: 4rem;
+  transition: height 200ms;
+}
+@media (min-width: 48rem) {
+  body > div nav {
+    max-width: 15rem;
+    width: fit-content;
+    top: 1rem;
+    height: fit-content;
+    overflow: visible;
+  }
+  body > div nav button {
+    display: none;
+  }
+}
+@media (max-width: 48rem) {
+  body > div nav {
+    position: fixed;
+  }
+  body > div nav:not(.visible) ul {
+    display: none;
+  }
+  body > div nav.visible {
+    height: 100vh;
+  }
+}
+body > div nav button {
+  background-color: transparent;
+  border: none;
+  color: var(--color-foreground);
+  font-size: 2rem;
+  cursor: pointer;
+  transition: filter 400ms ease-in;
+  padding: 1rem 0;
+  width: 2rem;
+  height: 2rem;
+  box-sizing: content-box;
+}
+body > div nav button:hover {
+  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));
+  transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
 }
 body > div nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
 body > div nav ul li {
  border-radius: 0.5rem;
  background-color: var(--color-shade-1);
  transition: background-color 150ms;
  --local-primary: var(--color-primary);
+  --local-border: var(--color-shade-1);
 }
 body > div nav ul li.link-back {
  --local-primary: var(--color-secondary);
+  --local-border: var(--color-shade-4);
+  background-color: var(--color-background);
+}
+body > div nav ul li.active {
  background-color: var(--color-shade-2);
+  --local-border: var(--color-shade-4);
 }
 body > div nav ul li > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
-  outline: solid 0.1em var(--color-shade-1);
-  padding: 0.5rem 1rem;
+  border: solid 0.1em var(--local-border);
+  padding: 0.4rem 1rem;
  color: var(--color-foreground);
  text-decoration: none;
  font-size: 1.2em;
  box-sizing: border-box;
-  transition-property: filter, outline-color;
+  transition-property: filter, border-color;
  transition-duration: 400ms;
  transition-timing-function: ease-in;
 }
@ -500,10 +574,10 @@ 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:focus-within a {
-  outline: solid 0.1em var(--color-white);
+  border: solid 0.1em var(--color-white);
  background-color: transparent;
  filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
-  transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms, outline-color 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
+  transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms, border-color 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
 }
 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: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 {
  color: var(--color-white);
@ -511,12 +585,12 @@ body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body >
 body > div main {
  max-width: min(var(--container-4xl), 100vw);
  width: 100%;
-  border-left: dashed 0.25rem var(--color-foreground);
-  padding: 1rem;
+  padding: 0 1rem;
 }
-@media (min-width: 40rem) {
+@media (min-width: 48rem) {
  body > div main {
    padding-left: 2rem;
+    border-left: dashed 0.25rem var(--color-shade-4);
  }
 }

@ -541,9 +615,24 @@ i[data-icon]::before {
 i[data-icon][data-icon=arrow-left]::before {
  mask-image: url("../icon/arrow_left.svg");
 }
+i[data-icon][data-icon=arrow-top]::before {
+  mask-image: url("../icon/arrow_top.svg");
+}
+i[data-icon][data-icon=arrow-right]::before {
+  mask-image: url("../icon/arrow_right.svg");
+}
+i[data-icon][data-icon=arrow-down]::before {
+  mask-image: url("../icon/arrow_down.svg");
+}
 i[data-icon][data-icon=info]::before {
  mask-image: url("../icon/info.svg");
 }
+i[data-icon][data-icon=home]::before {
+  mask-image: url("../icon/home.svg");
+}
+i[data-icon][data-icon=menu-small]::before {
+  mask-image: url("../icon/menu_small.svg");
+}

 a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
  color: var(--color-accent-1);
@ -597,6 +686,23 @@ pre,
  }
 }

+main.generator > div {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  align-items: center;
+}
+main.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));
+}
+main.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));
+}
+
 .swatch-grid {
  background-color: var(--color-background);
  color: var(--color-foreground);
--- a/styleguide/assets/style/styleguide.css.map
+++ b/styleguide/assets/style/styleguide.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["base.scss","styleguide.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC/bJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAQZ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AAOF;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}
+{"version":3,"sourceRoot":"","sources":["base.scss","styleguide.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KApXuB;EAqXvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACtcJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YDfqB;;;ACkBvB;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QD/CqB;ECgDrB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EACA;IACE;;;AAIJ;EAzBF;IA0BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAQZ;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAOF;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAOJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}
--- a/styleguide/assets/style/styleguide.scss
+++ b/styleguide/assets/style/styleguide.scss
@ -18,53 +18,125 @@ body {
    width: 100%;
    height: fit-content;
    flex-grow: 0;
+
+    @media (max-width: $breakpoint-mobile) {
+      margin-top: $mobile-navigation-height;
+    }
+
+    .header-image {
+      height: 200px;
+      width: fit-content;
+      max-width: 100%;
+      object-fit: contain;
+    }
  }

  > div {
    display: flex;
    gap: 1rem;
    flex-grow: 1;
+    flex-direction: column;
+
+    @media (min-width: $breakpoint-mobile) {
+      flex-direction: row;
+    }

    nav {
-      width: 20rem;
-      height: fit-content;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: sticky;
      top: 0;
+      padding: 0 1rem;
+      background-color: var(--color-background);
+      z-index: 20;
+      overflow: hidden;
+      width: 100%;
+      height: $mobile-navigation-height;
+      transition: height 200ms;
+
+      @media (min-width: $breakpoint-mobile) {
+        max-width: 15rem;
+        width: fit-content;
+        top: 1rem;
+        height: fit-content;
+        overflow: visible;
+        button {
+          display: none;
+        }
+      }
+
+      @media (max-width: $breakpoint-mobile) {
+        position: fixed;
+
+        &:not(.visible) {
+          ul {
+            display: none;
+          }
+        }
+
+        &.visible {
+          height: 100vh;
+        }
+      }
+
+      button {
+        background-color: transparent;
+        border: none;
+        color: var(--color-foreground);
+        font-size: 2rem;
+        cursor: pointer;
+        transition: filter 400ms ease-in;
+        padding: 1rem 0;
+        width: 2rem;
+        height: 2rem;
+        box-sizing: content-box;
+
+        &:hover {
+          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));
+          transition: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
+        }
+      }

      ul {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        list-style-type: none;
+        padding: 0;
+        margin: 0;

        li {
          border-radius: 0.5rem;
          background-color: var(--color-shade-1);
          transition: background-color 150ms;
          --local-primary: var(--color-primary);
+          --local-border: var(--color-shade-1);

          &.link-back {
            --local-primary: var(--color-secondary);
-            background-color: var(--color-shade-2);
+            --local-border: var(--color-shade-4);
+            background-color: var(--color-background);
          }

+          &.active {
+            background-color: var(--color-shade-2);
+            --local-border: var(--color-shade-4);
+          }

          > a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border-radius: 0.5rem;
-            outline: solid 0.1em var(--color-shade-1);
-            padding: 0.5rem 1rem;
+            border: solid 0.1em var(--local-border);
+            padding: 0.4rem 1rem;
            color: var(--color-foreground);
            text-decoration: none;
            font-size: 1.2em;
            box-sizing: border-box;

-            transition-property: filter, outline-color;
+            transition-property: filter, border-color;
            transition-duration: 400ms;
            transition-timing-function: ease-in;

@ -84,11 +156,11 @@ body {
            background-color: transparent;

            a {
-              outline: solid 0.1em var(--color-white);
+              border: solid 0.1em var(--color-white);
              background-color: transparent;
              filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
              transition: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
-              outline-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
+              border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;

              &:visited, &:focus, &:active, &:hover {
                color: var(--color-white);
@ -102,11 +174,11 @@ body {
    main {
      max-width: min(var(--container-4xl), 100vw);
      width: 100%;
-      border-left: dashed 0.25rem var(--color-foreground);
-      padding: 1rem;
+      padding: 0 1rem;

-      @media (min-width: $breakpoint-sm) {
+      @media (min-width: $breakpoint-mobile) {
        padding-left: 2rem;
+        border-left: dashed 0.25rem var(--color-shade-4);
      }
    }
  }
@ -135,9 +207,29 @@ i[data-icon] {
    mask-image: url('../icon/arrow_left.svg');
  }

+  &[data-icon='arrow-top']::before {
+    mask-image: url('../icon/arrow_top.svg');
+  }
+
+  &[data-icon='arrow-right']::before {
+    mask-image: url('../icon/arrow_right.svg');
+  }
+
+  &[data-icon='arrow-down']::before {
+    mask-image: url('../icon/arrow_down.svg');
+  }
+
  &[data-icon='info']::before {
    mask-image: url('../icon/info.svg');
  }
+
+  &[data-icon='home']::before {
+    mask-image: url('../icon/home.svg');
+  }
+
+  &[data-icon='menu-small']::before {
+    mask-image: url('../icon/menu_small.svg');
+  }
 }


@ -181,7 +273,7 @@ pre,
    width: 100%;
  }

-  @media (max-width: $breakpoint-md) {
+  @media (max-width: $breakpoint-mobile) {
    flex-wrap: wrap;

    & > * {
@ -208,6 +300,28 @@ pre,
  }
 }

+
+main.generator {
+  > div {
+    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));
+  }
+
+  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));
+  }
+}
+
 .swatch-grid {
  background-color: var(--color-background);
  color: var(--color-foreground);