styleguide: move scripts, add mobile navigation, style generator

styleguide/assets/script/generator.js

@@ -75,3 +75,16 @@ function downloadURI(_uri, _name) {
 }
 
 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);
+})()

styleguide/assets/script/styleguide.js

@@ -0,0 +1,3 @@
+document.querySelector('nav > button').addEventListener('click', (e) => {
+    document.querySelector('nav').classList.toggle('visible');
+})

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;

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"}

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;

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);
+  border: solid 0.1em var(--local-border);
-  padding: 0.5rem 1rem;
+  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: 0 1rem;
-  padding: 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);

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"}

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);
+            border: solid 0.1em var(--local-border);
-            padding: 0.5rem 1rem;
+            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: 0 1rem;
-      padding: 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);

styleguide/colors/index.html

@@ -10,16 +10,21 @@
 
 <body>
 <header>
-    <img src="../assets/image/logo_eventname_glow.svg" style="height: 200px; width: fit-content"/>
+    <img src="../assets/image/logo_eventname_glow.svg" class="header-image"
+         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."/>
 </header>
 <div>
     <nav>
+        <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><a href="../"><i data-icon="info"></i>Overview</a></li>
+            <li><a href="../"><i data-icon="home"></i>Overview</a></li>
-            <li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
+            <li class="active"><a href="../colors"><i data-icon="info"></i>Colors</a></li>
             <li><a href="../typography"><i data-icon="info"></i>Typography</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>
         </ul>
     </nav>
     <main>
@@ -230,9 +235,7 @@
             </section>
         </div>
     </main>
-    <script>
+    <script src="../assets/script/styleguide.js" type="text/javascript"></script>
-
-    </script>
 </div>
 </body>
 

styleguide/demopage/index.html

@@ -10,16 +10,21 @@
 
 <body>
 <header>
-    <img src="../assets/image/logo_eventname_glow.svg" style="height: 200px; width: fit-content"/>
+    <img src="../assets/image/logo_eventname_glow.svg" class="header-image"
+         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."/>
 </header>
 <div>
     <nav>
+        <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><a href="../"><i data-icon="info"></i>Overview</a></li>
+            <li><a href="../"><i data-icon="home"></i>Overview</a></li>
             <li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
             <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
-            <li><a href=""><i data-icon="info"></i>Demopage</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>
         </ul>
     </nav>
     <main>
@@ -193,9 +198,7 @@ int *positives(int *numbers, int *size) {
         </section>
     </main>
 </div>
-<script>
+<script src="../assets/script/styleguide.js" type="text/javascript"></script>
-
-</script>
 </body>
 
 </html>

styleguide/generator/index.html

@@ -2,77 +2,95 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8">
-  <meta name="viewport"
+    <meta name="viewport" content="width=device-width,initial-scale=1">
-    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
-  <title>Document</title>
 </head>
 
 <body style="height: 100vh;">
+<header>
+    <img src="../assets/image/logo_eventname_glow.svg" class="header-image"
+         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."/>
+</header>
+<div>
+    <nav>
+        <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><a href="../"><i data-icon="home"></i>Overview</a></li>
+            <li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
+            <li><a href="../typography"><i data-icon="info"></i>Typography</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>
+        </ul>
+    </nav>
+    <main class="generator">
+        <div>
 
-  <div style="display: flex; flex-direction: column; gap: 1em; align-items: center">
+            <div>
+                <input id="file_input" type="file" name="image" accept="image/*">
+            </div>
 
-    <div>
+            <img id="source_img" src=""/>
-      <input id="file_input" type="file" name="image" accept="image/*">
+            <i data-icon="arrow-down"></i>
-    </div>
+            <img id="result_img" src=""/>
 
-    <img id="source_img" src=""
+            <div style="display: none;">
-      style="width: 400px; height: 300px; border: solid 4px darkblue; background-color: darkblue; object-fit: contain;" />
+                <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
-    <img id="result_img" src=""
+                    <filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
-      style="width: 400px; height: 300px; border: solid 4px darkgreen; background-color: darkgreen; object-fit: contain;" />
+                            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>
 
-    <div style="display: none;">
+                        <feConvolveMatrix in="ltoa_inverse" result="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4"/>
-      <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
+                        <feComponentTransfer in="pink_edges" result="pink">
-        <filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
+                            <feFuncR type="table" tableValues="0.7765 0"/>
-          primitiveUnits="objectBoundingBox">
+                            <feFuncG type="table" tableValues="0.1451 0"/>
-          <feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" />
+                            <feFuncB type="table" tableValues="0.4902 0"/>
-          <feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
+                        </feComponentTransfer>
-          <feComponentTransfer in="ltoa" result="ltoa_inverse">
+                        <feOffset in="pink" result="pink_shift" dx="-0.002"/>
-            <feFuncA type="table" tableValues="0 1" />
-          </feComponentTransfer>
 
-          <feConvolveMatrix in="ltoa_inverse" result="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
+                        <feConvolveMatrix in="ltoa_inverse" result="cyan_edges" kernelMatrix="4 0 -4 0 0 0 4 0 -4"/>
-          <feComponentTransfer in="pink_edges" result="pink">
+                        <feComponentTransfer in="cyan_edges" result="cyan">
-            <feFuncR type="table" tableValues="0.7765 0" />
+                            <feFuncR type="table" tableValues="0.2941 0"/>
-            <feFuncG type="table" tableValues="0.1451 0" />
+                            <feFuncG type="table" tableValues="0.6784 0"/>
-            <feFuncB type="table" tableValues="0.4902 0" />
+                            <feFuncB type="table" tableValues="0.8471 0"/>
-          </feComponentTransfer>
+                        </feComponentTransfer>
-          <feOffset in="pink" result="pink_shift" dx="-0.002" />
+                        <feOffset in="cyan" result="cyan_shift" dx="0.002"/>
 
-          <feConvolveMatrix in="ltoa_inverse" result="cyan_edges" kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
+                        <feMerge result="pink_cyan_shift">
-          <feComponentTransfer in="cyan_edges" result="cyan">
+                            <feMergeNode in="SourceGraphic"/>
-            <feFuncR type="table" tableValues="0.2941 0" />
+                            <feMergeNode in="pink_shift"/>
-            <feFuncG type="table" tableValues="0.6784 0" />
+                            <feMergeNode in="cyan_shift"/>
-            <feFuncB type="table" tableValues="0.8471 0" />
+                        </feMerge>
-          </feComponentTransfer>
-          <feOffset in="cyan" result="cyan_shift" dx="0.002" />
 
-          <feMerge result="pink_cyan_shift">
+                        <feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise"/>
-            <feMergeNode in="SourceGraphic" />
+                        <feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02"/>
-            <feMergeNode in="pink_shift" />
+                        <feOffset in="distorted_raw" result="distorted"/>
-            <feMergeNode in="cyan_shift" />
+                    </filter>
-          </feMerge>
 
-          <feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" />
+                    <g filter="url(#filter0)">
-          <feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" />
+                        <image href="" width="100%" height="100%"/>
-          <feOffset in="distorted_raw" result="distorted" />
+                    </g>
-        </filter>
+                </svg>
+            </div>
 
-        <g filter="url(#filter0)">
+            <button id="download" disabled>
-          <image href="" width="100%" height="100%" />
+                Download Result
-        </g>
+            </button>
-      </svg>
-    </div>
 
-    <button id="download" disabled>
+        </div>
-      Download Result
+    </main>
-    </button>
+</div>
 
-  </div>
+<script src="../assets/script/generator.js" type="text/javascript"></script>
-
+<script src="../assets/script/styleguide.js" type="text/javascript"></script>
-
-  <script src="generator.js" type="text/javascript"></script>
 </body>
 
 </html>

styleguide/index.html

@@ -10,25 +10,28 @@
 
 <body>
 <header>
-    <img src="assets/image/logo_eventname_glow.svg" style="height: 200px; width: fit-content"/>
+    <img src="assets/image/logo_eventname_glow.svg" class="header-image"
+         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."/>
 </header>
 <div>
     <nav>
+        <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><a href=""><i data-icon="info"></i>Overview</a></li>
+            <li class="active"><a href=""><i data-icon="home"></i>Overview</a></li>
             <li><a href="colors"><i data-icon="info"></i>Colors</a></li>
             <li><a href="typography"><i data-icon="info"></i>Typography</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>
         </ul>
     </nav>
     <main>
         <h1>Styleguide Easterhegg 2025</h1>
 
     </main>
-    <script>
+    <script src="assets/script/styleguide.js" type="text/javascript"></script>
-
-    </script>
 </div>
 </body>
 </html>

styleguide/merch/de/index.html

@@ -1206,7 +1206,7 @@
         </table>
     </main>
 
-    <script type="text/javascript" src="../merch.js"></script>
+    <script type="text/javascript" src="../../assets/script/merch.js"></script>
 </body>
 
 </html>

styleguide/merch/en/index.html

@@ -1205,7 +1205,7 @@
         </table>
     </main>
 
-    <script type="text/javascript" src="../merch.js"></script>
+    <script type="text/javascript" src="../../assets/script/merch.js"></script>
 </body>
 
 </html>

styleguide/typography/index.html

@@ -10,16 +10,21 @@
 
 <body>
 <header>
-    <img src="../assets/image/logo_eventname_glow.svg" style="height: 200px; width: fit-content"/>
+    <img src="../assets/image/logo_eventname_glow.svg" class="header-image"
+         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."/>
 </header>
 <div>
     <nav>
+        <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><a href="../"><i data-icon="info"></i>Overview</a></li>
+            <li><a href="../"><i data-icon="home"></i>Overview</a></li>
             <li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
-            <li><a href=""><i data-icon="info"></i>Typography</a></li>
+            <li class="active"><a href=""><i data-icon="info"></i>Typography</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>
         </ul>
     </nav>
     <main>
@@ -88,9 +93,7 @@
         </div>
     </main>
 </div>
-<script>
+<script src="../assets/script/styleguide.js" type="text/javascript"></script>
-
-</script>
 </body>
 
 </html>