styleguide: update icons.scss, update navigation icons, add WIP icon grid

README.md

@@ -16,4 +16,4 @@ styleguide/  # design documentation as a webpage
 
 ## Fonts
 
-We created a font specifically with this event in mind called *Argon Glow*. It is [available on codeberg at argon/glow](https://codeberg.org/argon/glow) under the OFL 1.1.
+We created a font specifically with this event in mind called _Argon Glow_. It is [available on codeberg at argon/glow](https://codeberg.org/argon/glow) under the OFL 1.1.

styleguide/assets/script/generator.js

@@ -27,7 +27,7 @@ function loadImage(base64Image) {
   let svgDataUrl;
 
   sourceImage.onload = function () {
-    let svgViewBox = `0 0 ${Math.trunc(800 / this.height * this.width)} 800`;
+    let svgViewBox = `0 0 ${Math.trunc((800 / this.height) * this.width)} 800`;
     svg.setAttribute("height", this.height);
     svg.setAttribute("width", this.width);
     svg.setAttribute("viewBox", svgViewBox);

styleguide/assets/style/base.css

@@ -148,7 +148,8 @@
     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))
@@ -186,7 +187,8 @@
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
   --color-glow-primary: var(--color-argon-800);
   --color-glow-secondary: var(--color-krypton-800);
-  --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-950));
   --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
@@ -225,7 +227,8 @@
       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))
@@ -262,7 +265,8 @@
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
     --color-glow-primary: var(--color-argon-800);
     --color-glow-secondary: var(--color-krypton-800);
-    --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-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
@@ -273,7 +277,6 @@
   html:has(#themeLight:checked) .dark-only {
     display: none;
   }
-
   #themeToggleDark {
     display: none;
   }
@@ -301,7 +304,8 @@
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
     --color-glow-primary: var(--color-argon-800);
     --color-glow-secondary: var(--color-krypton-800);
-    --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-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
@@ -338,7 +342,8 @@
       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))
@@ -353,7 +358,6 @@
   html:has(#themeDark:checked) .dark-only {
     display: initial;
   }
-
   #themeToggleLight {
     display: none;
   }

styleguide/assets/style/base.scss

@@ -165,7 +165,8 @@ $mobile-navigation-height: 4rem;
     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))
@@ -207,7 +208,8 @@ $mobile-navigation-height: 4rem;
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
   --color-glow-primary: var(--color-argon-800);
   --color-glow-secondary: var(--color-krypton-800);
-  --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-950));

styleguide/assets/style/icons.css

@@ -0,0 +1,188 @@
+i[data-icon] {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: content-box;
+}
+i[data-icon]::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  mask-size: contain;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  background-color: currentColor;
+}
+i[data-icon=arrow_down]::before {
+  mask-image: url("../icon/arrow_down.svg");
+}
+i[data-icon=arrow_down_left]::before {
+  mask-image: url("../icon/arrow_down_left.svg");
+}
+i[data-icon=arrow_down_right]::before {
+  mask-image: url("../icon/arrow_down_right.svg");
+}
+i[data-icon=arrow_left]::before {
+  mask-image: url("../icon/arrow_left.svg");
+}
+i[data-icon=arrow_right]::before {
+  mask-image: url("../icon/arrow_right.svg");
+}
+i[data-icon=arrow_up]::before {
+  mask-image: url("../icon/arrow_up.svg");
+}
+i[data-icon=arrow_up_left]::before {
+  mask-image: url("../icon/arrow_up_left.svg");
+}
+i[data-icon=arrow_up_right]::before {
+  mask-image: url("../icon/arrow_up_right.svg");
+}
+i[data-icon=basket]::before {
+  mask-image: url("../icon/basket.svg");
+}
+i[data-icon=bed]::before {
+  mask-image: url("../icon/bed.svg");
+}
+i[data-icon=clock]::before {
+  mask-image: url("../icon/clock.svg");
+}
+i[data-icon=code]::before {
+  mask-image: url("../icon/code.svg");
+}
+i[data-icon=creature]::before {
+  mask-image: url("../icon/creature.svg");
+}
+i[data-icon=cross]::before {
+  mask-image: url("../icon/cross.svg");
+}
+i[data-icon=cross_small]::before {
+  mask-image: url("../icon/cross_small.svg");
+}
+i[data-icon=cup_1]::before {
+  mask-image: url("../icon/cup_1.svg");
+}
+i[data-icon=cup_2]::before {
+  mask-image: url("../icon/cup_2.svg");
+}
+i[data-icon=dect]::before {
+  mask-image: url("../icon/dect.svg");
+}
+i[data-icon=external]::before {
+  mask-image: url("../icon/external.svg");
+}
+i[data-icon=fairydust]::before {
+  mask-image: url("../icon/fairydust.svg");
+}
+i[data-icon=flag]::before {
+  mask-image: url("../icon/flag.svg");
+}
+i[data-icon=gluten]::before {
+  mask-image: url("../icon/gluten.svg");
+}
+i[data-icon=hackertours]::before {
+  mask-image: url("../icon/hackertours.svg");
+}
+i[data-icon=hare_head]::before {
+  mask-image: url("../icon/hare_head.svg");
+}
+i[data-icon=history]::before {
+  mask-image: url("../icon/history.svg");
+}
+i[data-icon=home]::before {
+  mask-image: url("../icon/home.svg");
+}
+i[data-icon=hygene]::before {
+  mask-image: url("../icon/hygene.svg");
+}
+i[data-icon=info]::before {
+  mask-image: url("../icon/info.svg");
+}
+i[data-icon=lightbulb]::before {
+  mask-image: url("../icon/lightbulb.svg");
+}
+i[data-icon=link]::before {
+  mask-image: url("../icon/link.svg");
+}
+i[data-icon=location]::before {
+  mask-image: url("../icon/location.svg");
+}
+i[data-icon=lock]::before {
+  mask-image: url("../icon/lock.svg");
+}
+i[data-icon=login]::before {
+  mask-image: url("../icon/login.svg");
+}
+i[data-icon=logout]::before {
+  mask-image: url("../icon/logout.svg");
+}
+i[data-icon=menu]::before {
+  mask-image: url("../icon/menu.svg");
+}
+i[data-icon=menu_small]::before {
+  mask-image: url("../icon/menu_small.svg");
+}
+i[data-icon=merch]::before {
+  mask-image: url("../icon/merch.svg");
+}
+i[data-icon=message]::before {
+  mask-image: url("../icon/message.svg");
+}
+i[data-icon=microphone]::before {
+  mask-image: url("../icon/microphone.svg");
+}
+i[data-icon=network]::before {
+  mask-image: url("../icon/network.svg");
+}
+i[data-icon=pen]::before {
+  mask-image: url("../icon/pen.svg");
+}
+i[data-icon=plate_and_cutlery]::before {
+  mask-image: url("../icon/plate_and_cutlery.svg");
+}
+i[data-icon=power]::before {
+  mask-image: url("../icon/power.svg");
+}
+i[data-icon=question]::before {
+  mask-image: url("../icon/question.svg");
+}
+i[data-icon=schedule]::before {
+  mask-image: url("../icon/schedule.svg");
+}
+i[data-icon=search]::before {
+  mask-image: url("../icon/search.svg");
+}
+i[data-icon=settings]::before {
+  mask-image: url("../icon/settings.svg");
+}
+i[data-icon=signup]::before {
+  mask-image: url("../icon/signup.svg");
+}
+i[data-icon=soldering_iron]::before {
+  mask-image: url("../icon/soldering_iron.svg");
+}
+i[data-icon=tick]::before {
+  mask-image: url("../icon/tick.svg");
+}
+i[data-icon=tick_small]::before {
+  mask-image: url("../icon/tick_small.svg");
+}
+i[data-icon=ticket]::before {
+  mask-image: url("../icon/ticket.svg");
+}
+i[data-icon=toast]::before {
+  mask-image: url("../icon/toast.svg");
+}
+i[data-icon=train]::before {
+  mask-image: url("../icon/train.svg");
+}
+i[data-icon=vegan]::before {
+  mask-image: url("../icon/vegan.svg");
+}
+i[data-icon=warning]::before {
+  mask-image: url("../icon/warning.svg");
+}
+
+/*# sourceMappingURL=icons.css.map */

styleguide/assets/style/icons.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["icons.scss"],"names":[],"mappings":"AA4DE;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE","file":"icons.css"}

styleguide/assets/style/icons.scss

@@ -1,55 +1,86 @@
-i[data-icon] {
+$icons: (
-  display: inline-block;
+  "arrow_down",
-  width: 1em;
+  "arrow_down_left",
-  height: 1em;
+  "arrow_down_right",
-  flex-shrink: 0;
+  "arrow_left",
-  position: relative;
+  "arrow_right",
-  box-sizing: content-box;
+  "arrow_up",
+  "arrow_up_left",
+  "arrow_up_right",
+  "basket",
+  "bed",
+  "clock",
+  "code",
+  "creature",
+  "cross",
+  "cross_small",
+  "cup_1",
+  "cup_2",
+  "dect",
+  "external",
+  "fairydust",
+  "flag",
+  "gluten",
+  "hackertours",
+  "hare_head",
+  "history",
+  "home",
+  "hygene",
+  "info",
+  "lightbulb",
+  "link",
+  "location",
+  "lock",
+  "login",
+  "logout",
+  "menu",
+  "menu_small",
+  "merch",
+  "message",
+  "microphone",
+  "network",
+  "pen",
+  "plate_and_cutlery",
+  "power",
+  "question",
+  "schedule",
+  "search",
+  "settings",
+  "signup",
+  "soldering_iron",
+  "tick",
+  "tick_small",
+  "ticket",
+  "toast",
+  "train",
+  "vegan",
+  "warning"
+);
 
-  &::before {
+i {
-    content: "";
+  &[data-icon] {
-    display: block;
+    display: inline-block;
-    width: 100%;
+    width: 1em;
-    height: 100%;
+    height: 1em;
-    mask-size: contain;
+    flex-shrink: 0;
-    mask-position: center;
+    position: relative;
-    mask-repeat: no-repeat;
+    box-sizing: content-box;
-    background-color: currentColor;
+
+    &::before {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 100%;
+      mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      background-color: currentColor;
+    }
   }
 
-  &[data-icon="arrow-left"]::before {
+  @each $icon in $icons {
-    mask-image: url("../icon/arrow_left.svg");
+    &[data-icon="#{$icon}"]::before {
-  }
+      mask-image: url("../icon/#{$icon}.svg");
-
+    }
-  &[data-icon="arrow-up"]::before {
-    mask-image: url("../icon/arrow_up.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");
-  }
-
-  &[data-icon="light"]::before {
-    mask-image: url("../icon/lightbulb.svg");
-  }
-
-  &[data-icon="warning"]::before {
-    mask-image: url("../icon/warning.svg");
   }
 }

styleguide/assets/style/merch.ccss.map

@@ -1,7 +0,0 @@
-{
-"version": 3,
-"mappings": "AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCE;AACF,WAAY;EACV,WAAW,EAAE,GAAG;EAChB,WAAW,EAAE,SAAS;EACtB,OAAO,EAAE,yTAAyT",
-"sources": ["merch.scss"],
-"names": [],
-"file": "merch.ccss"
-}

styleguide/assets/style/merch.css

@@ -148,7 +148,8 @@
     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))
@@ -186,7 +187,8 @@
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
   --color-glow-primary: var(--color-argon-800);
   --color-glow-secondary: var(--color-krypton-800);
-  --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-950));
   --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
@@ -225,7 +227,8 @@
       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))
@@ -262,7 +265,8 @@
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
     --color-glow-primary: var(--color-argon-800);
     --color-glow-secondary: var(--color-krypton-800);
-    --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-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
@@ -273,7 +277,6 @@
   html:has(#themeLight:checked) .dark-only {
     display: none;
   }
-
   #themeToggleDark {
     display: none;
   }
@@ -301,7 +304,8 @@
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
     --color-glow-primary: var(--color-argon-800);
     --color-glow-secondary: var(--color-krypton-800);
-    --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-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
@@ -338,7 +342,8 @@
       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))
@@ -353,7 +358,6 @@
   html:has(#themeDark:checked) .dark-only {
     display: initial;
   }
-
   #themeToggleLight {
     display: none;
   }
@@ -657,31 +661,172 @@ i[data-icon]::before {
   mask-repeat: no-repeat;
   background-color: currentColor;
 }
-i[data-icon][data-icon="arrow-left"]::before {
+i[data-icon=arrow_down]::before {
-  mask-image: url("../icon/arrow_left.svg");
-}
-i[data-icon][data-icon="arrow-up"]::before {
-  mask-image: url("../icon/arrow_up.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 {
+i[data-icon=arrow_down_left]::before {
-  mask-image: url("../icon/info.svg");
+  mask-image: url("../icon/arrow_down_left.svg");
 }
-i[data-icon][data-icon="home"]::before {
+i[data-icon=arrow_down_right]::before {
+  mask-image: url("../icon/arrow_down_right.svg");
+}
+i[data-icon=arrow_left]::before {
+  mask-image: url("../icon/arrow_left.svg");
+}
+i[data-icon=arrow_right]::before {
+  mask-image: url("../icon/arrow_right.svg");
+}
+i[data-icon=arrow_up]::before {
+  mask-image: url("../icon/arrow_up.svg");
+}
+i[data-icon=arrow_up_left]::before {
+  mask-image: url("../icon/arrow_up_left.svg");
+}
+i[data-icon=arrow_up_right]::before {
+  mask-image: url("../icon/arrow_up_right.svg");
+}
+i[data-icon=basket]::before {
+  mask-image: url("../icon/basket.svg");
+}
+i[data-icon=bed]::before {
+  mask-image: url("../icon/bed.svg");
+}
+i[data-icon=clock]::before {
+  mask-image: url("../icon/clock.svg");
+}
+i[data-icon=code]::before {
+  mask-image: url("../icon/code.svg");
+}
+i[data-icon=creature]::before {
+  mask-image: url("../icon/creature.svg");
+}
+i[data-icon=cross]::before {
+  mask-image: url("../icon/cross.svg");
+}
+i[data-icon=cross_small]::before {
+  mask-image: url("../icon/cross_small.svg");
+}
+i[data-icon=cup_1]::before {
+  mask-image: url("../icon/cup_1.svg");
+}
+i[data-icon=cup_2]::before {
+  mask-image: url("../icon/cup_2.svg");
+}
+i[data-icon=dect]::before {
+  mask-image: url("../icon/dect.svg");
+}
+i[data-icon=external]::before {
+  mask-image: url("../icon/external.svg");
+}
+i[data-icon=fairydust]::before {
+  mask-image: url("../icon/fairydust.svg");
+}
+i[data-icon=flag]::before {
+  mask-image: url("../icon/flag.svg");
+}
+i[data-icon=gluten]::before {
+  mask-image: url("../icon/gluten.svg");
+}
+i[data-icon=hackertours]::before {
+  mask-image: url("../icon/hackertours.svg");
+}
+i[data-icon=hare_head]::before {
+  mask-image: url("../icon/hare_head.svg");
+}
+i[data-icon=history]::before {
+  mask-image: url("../icon/history.svg");
+}
+i[data-icon=home]::before {
   mask-image: url("../icon/home.svg");
 }
-i[data-icon][data-icon="menu-small"]::before {
+i[data-icon=hygene]::before {
-  mask-image: url("../icon/menu_small.svg");
+  mask-image: url("../icon/hygene.svg");
 }
-i[data-icon][data-icon="light"]::before {
+i[data-icon=info]::before {
+  mask-image: url("../icon/info.svg");
+}
+i[data-icon=lightbulb]::before {
   mask-image: url("../icon/lightbulb.svg");
 }
-i[data-icon][data-icon="warning"]::before {
+i[data-icon=link]::before {
+  mask-image: url("../icon/link.svg");
+}
+i[data-icon=location]::before {
+  mask-image: url("../icon/location.svg");
+}
+i[data-icon=lock]::before {
+  mask-image: url("../icon/lock.svg");
+}
+i[data-icon=login]::before {
+  mask-image: url("../icon/login.svg");
+}
+i[data-icon=logout]::before {
+  mask-image: url("../icon/logout.svg");
+}
+i[data-icon=menu]::before {
+  mask-image: url("../icon/menu.svg");
+}
+i[data-icon=menu_small]::before {
+  mask-image: url("../icon/menu_small.svg");
+}
+i[data-icon=merch]::before {
+  mask-image: url("../icon/merch.svg");
+}
+i[data-icon=message]::before {
+  mask-image: url("../icon/message.svg");
+}
+i[data-icon=microphone]::before {
+  mask-image: url("../icon/microphone.svg");
+}
+i[data-icon=network]::before {
+  mask-image: url("../icon/network.svg");
+}
+i[data-icon=pen]::before {
+  mask-image: url("../icon/pen.svg");
+}
+i[data-icon=plate_and_cutlery]::before {
+  mask-image: url("../icon/plate_and_cutlery.svg");
+}
+i[data-icon=power]::before {
+  mask-image: url("../icon/power.svg");
+}
+i[data-icon=question]::before {
+  mask-image: url("../icon/question.svg");
+}
+i[data-icon=schedule]::before {
+  mask-image: url("../icon/schedule.svg");
+}
+i[data-icon=search]::before {
+  mask-image: url("../icon/search.svg");
+}
+i[data-icon=settings]::before {
+  mask-image: url("../icon/settings.svg");
+}
+i[data-icon=signup]::before {
+  mask-image: url("../icon/signup.svg");
+}
+i[data-icon=soldering_iron]::before {
+  mask-image: url("../icon/soldering_iron.svg");
+}
+i[data-icon=tick]::before {
+  mask-image: url("../icon/tick.svg");
+}
+i[data-icon=tick_small]::before {
+  mask-image: url("../icon/tick_small.svg");
+}
+i[data-icon=ticket]::before {
+  mask-image: url("../icon/ticket.svg");
+}
+i[data-icon=toast]::before {
+  mask-image: url("../icon/toast.svg");
+}
+i[data-icon=train]::before {
+  mask-image: url("../icon/train.svg");
+}
+i[data-icon=vegan]::before {
+  mask-image: url("../icon/vegan.svg");
+}
+i[data-icon=warning]::before {
   mask-image: url("../icon/warning.svg");
 }
 
@@ -1005,6 +1150,45 @@ main > div.generator i {
   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));
 }
 
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--text-5xl), 1fr));
+  align-items: center;
+  justify-items: center;
+  gap: 2rem;
+}
+.icon-grid div {
+  width: var(--text-5xl);
+  height: var(--text-5xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+  cursor: pointer;
+}
+.icon-grid div:hover, .icon-grid div:focus {
+  background-color: var(--color-shade-2);
+}
+.icon-grid div:hover i[data-icon]::after, .icon-grid div:focus i[data-icon]::after {
+  content: attr(data-icon);
+  font-size: var(--text-xl);
+  background-color: var(--color-shade-2);
+  padding: 0.5rem;
+  z-index: 10;
+  position: absolute;
+  bottom: calc(var(--text-xl) * -1 - 2rem);
+  border-radius: 0.3rem;
+}
+.icon-grid div i[data-icon] {
+  font-size: var(--text-5xl);
+  position: relative;
+}
+.icon-grid div i[data-icon].icon-small {
+  font-size: var(--text-3xl);
+}
+
 .swatch-grid {
   background-color: var(--color-background);
   color: var(--color-foreground);
@@ -1242,14 +1426,14 @@ 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: #60a5f9;
+  background-color: rgb(96, 165, 249);
 }
-table td.val.highlighted[data-dim="B"] {
+table td.val.highlighted[data-dim=B] {
-  background-color: #d381f7;
+  background-color: rgb(211, 129, 247);
 }
-table td.val.highlighted[data-dim="C"] {
+table td.val.highlighted[data-dim=C] {
-  background-color: #ff7975;
+  background-color: rgb(255, 121, 117);
 }
 table td.val.currentDimension:not(.hover) {
   background-color: var(--color-shade-2);
@@ -1321,7 +1505,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;
@@ -1334,7 +1518,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";
@@ -1344,7 +1528,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/styleguide.css

@@ -148,7 +148,8 @@
     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))
@@ -186,7 +187,8 @@
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
   --color-glow-primary: var(--color-argon-800);
   --color-glow-secondary: var(--color-krypton-800);
-  --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-950));
   --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
@@ -225,7 +227,8 @@
       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))
@@ -262,7 +265,8 @@
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
     --color-glow-primary: var(--color-argon-800);
     --color-glow-secondary: var(--color-krypton-800);
-    --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-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
@@ -273,7 +277,6 @@
   html:has(#themeLight:checked) .dark-only {
     display: none;
   }
-
   #themeToggleDark {
     display: none;
   }
@@ -301,7 +304,8 @@
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
     --color-glow-primary: var(--color-argon-800);
     --color-glow-secondary: var(--color-krypton-800);
-    --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-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
@@ -338,7 +342,8 @@
       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))
@@ -353,7 +358,6 @@
   html:has(#themeDark:checked) .dark-only {
     display: initial;
   }
-
   #themeToggleLight {
     display: none;
   }
@@ -657,31 +661,172 @@ i[data-icon]::before {
   mask-repeat: no-repeat;
   background-color: currentColor;
 }
-i[data-icon][data-icon="arrow-left"]::before {
+i[data-icon=arrow_down]::before {
-  mask-image: url("../icon/arrow_left.svg");
-}
-i[data-icon][data-icon="arrow-up"]::before {
-  mask-image: url("../icon/arrow_up.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 {
+i[data-icon=arrow_down_left]::before {
-  mask-image: url("../icon/info.svg");
+  mask-image: url("../icon/arrow_down_left.svg");
 }
-i[data-icon][data-icon="home"]::before {
+i[data-icon=arrow_down_right]::before {
+  mask-image: url("../icon/arrow_down_right.svg");
+}
+i[data-icon=arrow_left]::before {
+  mask-image: url("../icon/arrow_left.svg");
+}
+i[data-icon=arrow_right]::before {
+  mask-image: url("../icon/arrow_right.svg");
+}
+i[data-icon=arrow_up]::before {
+  mask-image: url("../icon/arrow_up.svg");
+}
+i[data-icon=arrow_up_left]::before {
+  mask-image: url("../icon/arrow_up_left.svg");
+}
+i[data-icon=arrow_up_right]::before {
+  mask-image: url("../icon/arrow_up_right.svg");
+}
+i[data-icon=basket]::before {
+  mask-image: url("../icon/basket.svg");
+}
+i[data-icon=bed]::before {
+  mask-image: url("../icon/bed.svg");
+}
+i[data-icon=clock]::before {
+  mask-image: url("../icon/clock.svg");
+}
+i[data-icon=code]::before {
+  mask-image: url("../icon/code.svg");
+}
+i[data-icon=creature]::before {
+  mask-image: url("../icon/creature.svg");
+}
+i[data-icon=cross]::before {
+  mask-image: url("../icon/cross.svg");
+}
+i[data-icon=cross_small]::before {
+  mask-image: url("../icon/cross_small.svg");
+}
+i[data-icon=cup_1]::before {
+  mask-image: url("../icon/cup_1.svg");
+}
+i[data-icon=cup_2]::before {
+  mask-image: url("../icon/cup_2.svg");
+}
+i[data-icon=dect]::before {
+  mask-image: url("../icon/dect.svg");
+}
+i[data-icon=external]::before {
+  mask-image: url("../icon/external.svg");
+}
+i[data-icon=fairydust]::before {
+  mask-image: url("../icon/fairydust.svg");
+}
+i[data-icon=flag]::before {
+  mask-image: url("../icon/flag.svg");
+}
+i[data-icon=gluten]::before {
+  mask-image: url("../icon/gluten.svg");
+}
+i[data-icon=hackertours]::before {
+  mask-image: url("../icon/hackertours.svg");
+}
+i[data-icon=hare_head]::before {
+  mask-image: url("../icon/hare_head.svg");
+}
+i[data-icon=history]::before {
+  mask-image: url("../icon/history.svg");
+}
+i[data-icon=home]::before {
   mask-image: url("../icon/home.svg");
 }
-i[data-icon][data-icon="menu-small"]::before {
+i[data-icon=hygene]::before {
-  mask-image: url("../icon/menu_small.svg");
+  mask-image: url("../icon/hygene.svg");
 }
-i[data-icon][data-icon="light"]::before {
+i[data-icon=info]::before {
+  mask-image: url("../icon/info.svg");
+}
+i[data-icon=lightbulb]::before {
   mask-image: url("../icon/lightbulb.svg");
 }
-i[data-icon][data-icon="warning"]::before {
+i[data-icon=link]::before {
+  mask-image: url("../icon/link.svg");
+}
+i[data-icon=location]::before {
+  mask-image: url("../icon/location.svg");
+}
+i[data-icon=lock]::before {
+  mask-image: url("../icon/lock.svg");
+}
+i[data-icon=login]::before {
+  mask-image: url("../icon/login.svg");
+}
+i[data-icon=logout]::before {
+  mask-image: url("../icon/logout.svg");
+}
+i[data-icon=menu]::before {
+  mask-image: url("../icon/menu.svg");
+}
+i[data-icon=menu_small]::before {
+  mask-image: url("../icon/menu_small.svg");
+}
+i[data-icon=merch]::before {
+  mask-image: url("../icon/merch.svg");
+}
+i[data-icon=message]::before {
+  mask-image: url("../icon/message.svg");
+}
+i[data-icon=microphone]::before {
+  mask-image: url("../icon/microphone.svg");
+}
+i[data-icon=network]::before {
+  mask-image: url("../icon/network.svg");
+}
+i[data-icon=pen]::before {
+  mask-image: url("../icon/pen.svg");
+}
+i[data-icon=plate_and_cutlery]::before {
+  mask-image: url("../icon/plate_and_cutlery.svg");
+}
+i[data-icon=power]::before {
+  mask-image: url("../icon/power.svg");
+}
+i[data-icon=question]::before {
+  mask-image: url("../icon/question.svg");
+}
+i[data-icon=schedule]::before {
+  mask-image: url("../icon/schedule.svg");
+}
+i[data-icon=search]::before {
+  mask-image: url("../icon/search.svg");
+}
+i[data-icon=settings]::before {
+  mask-image: url("../icon/settings.svg");
+}
+i[data-icon=signup]::before {
+  mask-image: url("../icon/signup.svg");
+}
+i[data-icon=soldering_iron]::before {
+  mask-image: url("../icon/soldering_iron.svg");
+}
+i[data-icon=tick]::before {
+  mask-image: url("../icon/tick.svg");
+}
+i[data-icon=tick_small]::before {
+  mask-image: url("../icon/tick_small.svg");
+}
+i[data-icon=ticket]::before {
+  mask-image: url("../icon/ticket.svg");
+}
+i[data-icon=toast]::before {
+  mask-image: url("../icon/toast.svg");
+}
+i[data-icon=train]::before {
+  mask-image: url("../icon/train.svg");
+}
+i[data-icon=vegan]::before {
+  mask-image: url("../icon/vegan.svg");
+}
+i[data-icon=warning]::before {
   mask-image: url("../icon/warning.svg");
 }
 
@@ -1005,6 +1150,45 @@ main > div.generator i {
   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));
 }
 
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--text-5xl), 1fr));
+  align-items: center;
+  justify-items: center;
+  gap: 2rem;
+}
+.icon-grid div {
+  width: var(--text-5xl);
+  height: var(--text-5xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+  cursor: pointer;
+}
+.icon-grid div:hover, .icon-grid div:focus {
+  background-color: var(--color-shade-2);
+}
+.icon-grid div:hover i[data-icon]::after, .icon-grid div:focus i[data-icon]::after {
+  content: attr(data-icon);
+  font-size: var(--text-xl);
+  background-color: var(--color-shade-2);
+  padding: 0.5rem;
+  z-index: 10;
+  position: absolute;
+  bottom: calc(var(--text-xl) * -1 - 2rem);
+  border-radius: 0.3rem;
+}
+.icon-grid div i[data-icon] {
+  font-size: var(--text-5xl);
+  position: relative;
+}
+.icon-grid div i[data-icon].icon-small {
+  font-size: var(--text-3xl);
+}
+
 .swatch-grid {
   background-color: var(--color-background);
   color: var(--color-foreground);

styleguide/assets/style/styleguide.scss

@@ -374,6 +374,51 @@ main > div.generator {
   }
 }
 
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--text-5xl), 1fr));
+  align-items: center;
+  justify-items: center;
+  gap: 2rem;
+
+  div {
+    width: var(--text-5xl);
+    height: var(--text-5xl);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    padding: 0.5rem;
+    border-radius: 0.3rem;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-shade-2);
+
+      i[data-icon]::after {
+        content: attr(data-icon);
+        font-size: var(--text-xl);
+        background-color: var(--color-shade-2);
+        padding: 0.5rem;
+        z-index: 10;
+        position: absolute;
+        bottom: calc((var(--text-xl) * -1) - 2rem);
+        border-radius: 0.3rem;
+      }
+    }
+
+    i[data-icon] {
+      font-size: var(--text-5xl);
+      position: relative;
+
+      &.icon-small {
+        font-size: var(--text-3xl);
+      }
+    }
+  }
+}
+
 .swatch-grid {
   background-color: var(--color-background);
   color: var(--color-foreground);

styleguide/colors/index.html

@@ -45,11 +45,11 @@
     <div>
       <nav>
         <button aria-label="Open Navigation">
-          <i data-icon="menu-small"></i>
+          <i data-icon="menu_small"></i>
         </button>
         <ul>
           <li class="link-back">
-            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
+            <a href="/"><i data-icon="arrow_left"></i>Back to Wiki</a>
           </li>
           <li>
             <a href="../"><i data-icon="home"></i>Overview</a>
@@ -61,19 +61,23 @@
             <a href="../typography"><i data-icon="info"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+            <a href="../iconography"
+              ><i data-icon="hare_head"></i>Iconography</a
+            >
           </li>
           <li>
-            <a href="../logo"><i data-icon="info"></i>Logo</a>
+            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
           </li>
           <li>
-            <a href="../glow"><i data-icon="info"></i>Glow</a>
+            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
           </li>
           <li>
-            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
           </li>
           <li>
-            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+            <a href="../generator"
+              ><i data-icon="settings"></i>Image Generator</a
+            >
           </li>
           <li id="themeToggleDark" class="themeToggle">
             <input
@@ -82,7 +86,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeDark">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
@@ -92,7 +96,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeLight">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
         </ul>

styleguide/demopage/index.html

@@ -45,11 +45,11 @@
     <div>
       <nav>
         <button aria-label="Open Navigation">
-          <i data-icon="menu-small"></i>
+          <i data-icon="menu_small"></i>
         </button>
         <ul>
           <li class="link-back">
-            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
+            <a href="/"><i data-icon="arrow_left"></i>Back to Wiki</a>
           </li>
           <li>
             <a href="../"><i data-icon="home"></i>Overview</a>
@@ -61,19 +61,23 @@
             <a href="../typography"><i data-icon="info"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+            <a href="../iconography"
+              ><i data-icon="hare_head"></i>Iconography</a
+            >
           </li>
           <li>
-            <a href="../logo"><i data-icon="info"></i>Logo</a>
+            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
           </li>
           <li>
-            <a href="../glow"><i data-icon="info"></i>Glow</a>
+            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
           </li>
           <li class="active">
-            <a href=""><i data-icon="info"></i>Demopage</a>
+            <a href=""><i data-icon="code"></i>Demopage</a>
           </li>
           <li>
-            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+            <a href="../generator"
+              ><i data-icon="settings"></i>Image Generator</a
+            >
           </li>
           <li id="themeToggleDark" class="themeToggle">
             <input
@@ -82,7 +86,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeDark">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
@@ -92,7 +96,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeLight">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
         </ul>

styleguide/generator/index.html

@@ -45,11 +45,11 @@
     <div>
       <nav>
         <button aria-label="Open Navigation">
-          <i data-icon="menu-small"></i>
+          <i data-icon="menu_small"></i>
         </button>
         <ul>
           <li class="link-back">
-            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
+            <a href="/"><i data-icon="arrow_left"></i>Back to Wiki</a>
           </li>
           <li>
             <a href="../"><i data-icon="home"></i>Overview</a>
@@ -61,19 +61,21 @@
             <a href="../typography"><i data-icon="info"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+            <a href="../iconography"
+              ><i data-icon="hare_head"></i>Iconography</a
+            >
           </li>
           <li>
-            <a href="../logo"><i data-icon="info"></i>Logo</a>
+            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
           </li>
           <li>
-            <a href="../glow"><i data-icon="info"></i>Glow</a>
+            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
           </li>
           <li>
-            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
           </li>
           <li class="active">
-            <a href=""><i data-icon="info"></i>Image Generator</a>
+            <a href=""><i data-icon="settings"></i>Image Generator</a>
           </li>
           <li id="themeToggleDark" class="themeToggle">
             <input
@@ -82,7 +84,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeDark">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
@@ -92,7 +94,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeLight">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
         </ul>
@@ -113,7 +115,7 @@
           </div>
 
           <img id="source_img" src="" />
-          <i data-icon="arrow-down"></i>
+          <i data-icon="arrow_down"></i>
           <img id="result_img" src="" />
 
           <div style="display: none">

styleguide/glow/index.html

@@ -45,11 +45,11 @@
     <div>
       <nav>
         <button aria-label="Open Navigation">
-          <i data-icon="menu-small"></i>
+          <i data-icon="menu_small"></i>
         </button>
         <ul>
           <li class="link-back">
-            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
+            <a href="/"><i data-icon="arrow_left"></i>Back to Wiki</a>
           </li>
           <li>
             <a href="../"><i data-icon="home"></i>Overview</a>
@@ -61,19 +61,23 @@
             <a href="../typography"><i data-icon="info"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+            <a href="../iconography"
+              ><i data-icon="hare_head"></i>Iconography</a
+            >
           </li>
           <li>
-            <a href="../logo"><i data-icon="info"></i>Logo</a>
+            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
           </li>
           <li class="active">
-            <a href=""><i data-icon="info"></i>Glow</a>
+            <a href=""><i data-icon="lightbulb"></i>Glow</a>
           </li>
           <li>
-            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
           </li>
           <li>
-            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+            <a href="../generator"
+              ><i data-icon="settings"></i>Image Generator</a
+            >
           </li>
           <li id="themeToggleDark" class="themeToggle">
             <input
@@ -82,7 +86,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeDark">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
@@ -92,7 +96,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeLight">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
         </ul>

styleguide/iconography/index.html

@@ -45,11 +45,11 @@
     <div>
       <nav>
         <button aria-label="Open Navigation">
-          <i data-icon="menu-small"></i>
+          <i data-icon="menu_small"></i>
         </button>
         <ul>
           <li class="link-back">
-            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
+            <a href="/"><i data-icon="arrow_left"></i>Back to Wiki</a>
           </li>
           <li>
             <a href="../"><i data-icon="home"></i>Overview</a>
@@ -61,19 +61,21 @@
             <a href="../typography"><i data-icon="info"></i>Typography</a>
           </li>
           <li class="active">
-            <a href=""><i data-icon="info"></i>Iconography</a>
+            <a href=""><i data-icon="hare_head"></i>Iconography</a>
           </li>
           <li>
-            <a href="../logo"><i data-icon="info"></i>Logo</a>
+            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
           </li>
           <li>
-            <a href="../glow"><i data-icon="info"></i>Glow</a>
+            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
           </li>
           <li>
-            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
           </li>
           <li>
-            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+            <a href="../generator"
+              ><i data-icon="settings"></i>Image Generator</a
+            >
           </li>
           <li id="themeToggleDark" class="themeToggle">
             <input
@@ -82,7 +84,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeDark">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
@@ -92,7 +94,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeLight">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
         </ul>

styleguide/iconography/list/index.html

@@ -0,0 +1,168 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <script>
+      const setTheme = (theme) => {
+        theme ??= localStorage.theme || "system";
+        document.getElementById("themeLight").checked = theme === "light";
+        document.getElementById("themeDark").checked = theme === "dark";
+        localStorage.theme = theme;
+      };
+      document.addEventListener("DOMContentLoaded", function () {
+        setTheme();
+      });
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="shortcut icon" href="../../assets/image/favicon.png" />
+    <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:
+     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."
+        />
+        <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."
+        />
+      </a>
+    </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 class="active">
+            <a href="../"><i data-icon="hare_head"></i>Iconography</a>
+          </li>
+          <li>
+            <a href="../../logo"><i data-icon="fairydust"></i>Logo</a>
+          </li>
+          <li>
+            <a href="../../glow"><i data-icon="lightbulb"></i>Glow</a>
+          </li>
+          <li>
+            <a href="../../demopage"><i data-icon="code"></i>Demopage</a>
+          </li>
+          <li>
+            <a href="../../generator"
+              ><i data-icon="settings"></i>Image Generator</a
+            >
+          </li>
+          <li id="themeToggleDark" class="themeToggle">
+            <input
+              id="themeDark"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
+            <label for="themeDark">
+              <i data-icon="lightbulb"></i>
+            </label>
+          </li>
+          <li id="themeToggleLight" class="themeToggle">
+            <input
+              id="themeLight"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
+            <label for="themeLight">
+              <i data-icon="lightbulb"></i>
+            </label>
+          </li>
+        </ul>
+      </nav>
+      <main>
+        <div class="icon-grid">
+          <div role="button"><i data-icon="arrow_down"></i></div>
+          <div><i data-icon="arrow_down_left"></i></div>
+          <div><i data-icon="arrow_left"></i></div>
+          <div><i data-icon="arrow_up_left"></i></div>
+          <div><i data-icon="arrow_up"></i></div>
+          <div><i data-icon="arrow_up_right"></i></div>
+          <div><i data-icon="arrow_right"></i></div>
+          <div><i data-icon="arrow_down_right"></i></div>
+          <div><i data-icon="basket"></i></div>
+          <div><i data-icon="bed"></i></div>
+          <div><i data-icon="clock"></i></div>
+          <div><i data-icon="code"></i></div>
+          <div><i data-icon="creature"></i></div>
+          <div><i data-icon="cross"></i></div>
+          <div><i data-icon="cross_small" class="icon-small"></i></div>
+          <div><i data-icon="cup_1"></i></div>
+          <div><i data-icon="cup_2"></i></div>
+          <div><i data-icon="dect"></i></div>
+          <div><i data-icon="external"></i></div>
+          <div><i data-icon="fairydust"></i></div>
+          <div><i data-icon="flag"></i></div>
+          <div><i data-icon="gluten"></i></div>
+          <div><i data-icon="hackertours"></i></div>
+          <div><i data-icon="hare_head"></i></div>
+          <div><i data-icon="history"></i></div>
+          <div><i data-icon="home"></i></div>
+          <div><i data-icon="hygene"></i></div>
+          <div><i data-icon="info"></i></div>
+          <div><i data-icon="lightbulb"></i></div>
+          <div><i data-icon="link"></i></div>
+          <div><i data-icon="location"></i></div>
+          <div><i data-icon="lock"></i></div>
+          <div><i data-icon="login"></i></div>
+          <div><i data-icon="logout"></i></div>
+          <div><i data-icon="menu"></i></div>
+          <div><i data-icon="menu_small" class="icon-small"></i></div>
+          <div><i data-icon="merch"></i></div>
+          <div><i data-icon="message"></i></div>
+          <div><i data-icon="microphone"></i></div>
+          <div><i data-icon="network"></i></div>
+          <div><i data-icon="pen"></i></div>
+          <div><i data-icon="plate_and_cutlery"></i></div>
+          <div><i data-icon="power"></i></div>
+          <div><i data-icon="question"></i></div>
+          <div><i data-icon="schedule"></i></div>
+          <div><i data-icon="search"></i></div>
+          <div><i data-icon="settings"></i></div>
+          <div><i data-icon="signup"></i></div>
+          <div><i data-icon="soldering_iron"></i></div>
+          <div><i data-icon="tick"></i></div>
+          <div><i data-icon="tick_small" class="icon-small"></i></div>
+          <div><i data-icon="ticket"></i></div>
+          <div><i data-icon="toast"></i></div>
+          <div><i data-icon="train"></i></div>
+          <div><i data-icon="vegan"></i></div>
+          <div><i data-icon="warning"></i></div>
+        </div>
+      </main>
+    </div>
+    <script
+      src="../../assets/script/styleguide.js"
+      type="text/javascript"
+    ></script>
+  </body>
+</html>

styleguide/index.html

@@ -41,11 +41,11 @@
     <div>
       <nav>
         <button aria-label="Open Navigation">
-          <i data-icon="menu-small"></i>
+          <i data-icon="menu_small"></i>
         </button>
         <ul>
           <li class="link-back">
-            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
+            <a href="/"><i data-icon="arrow_left"></i>Back to Wiki</a>
           </li>
           <li class="active">
             <a href=""><i data-icon="home"></i>Overview</a>
@@ -57,19 +57,19 @@
             <a href="typography"><i data-icon="info"></i>Typography</a>
           </li>
           <li>
-            <a href="iconography"><i data-icon="info"></i>Iconography</a>
+            <a href="iconography"><i data-icon="hare_head"></i>Iconography</a>
           </li>
           <li>
-            <a href="logo"><i data-icon="info"></i>Logo</a>
+            <a href="logo"><i data-icon="fairydust"></i>Logo</a>
           </li>
           <li>
-            <a href="glow"><i data-icon="info"></i>Glow</a>
+            <a href="glow"><i data-icon="lightbulb"></i>Glow</a>
           </li>
           <li>
-            <a href="demopage"><i data-icon="info"></i>Demopage</a>
+            <a href="demopage"><i data-icon="code"></i>Demopage</a>
           </li>
           <li>
-            <a href="generator"><i data-icon="info"></i>Image Generator</a>
+            <a href="generator"><i data-icon="settings"></i>Image Generator</a>
           </li>
           <li id="themeToggleDark" class="themeToggle">
             <input
@@ -78,7 +78,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeDark">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
@@ -88,7 +88,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeLight">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
         </ul>

styleguide/logo/index.html

@@ -45,11 +45,11 @@
     <div>
       <nav>
         <button aria-label="Open Navigation">
-          <i data-icon="menu-small"></i>
+          <i data-icon="menu_small"></i>
         </button>
         <ul>
           <li class="link-back">
-            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
+            <a href="/"><i data-icon="arrow_left"></i>Back to Wiki</a>
           </li>
           <li>
             <a href="../"><i data-icon="home"></i>Overview</a>
@@ -61,19 +61,23 @@
             <a href="../typography"><i data-icon="info"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+            <a href="../iconography"
+              ><i data-icon="hare_head"></i>Iconography</a
+            >
           </li>
           <li class="active">
-            <a href=""><i data-icon="info"></i>Logo</a>
+            <a href=""><i data-icon="fairydust"></i>Logo</a>
           </li>
           <li>
-            <a href="../glow"><i data-icon="info"></i>Glow</a>
+            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
           </li>
           <li>
-            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
           </li>
           <li>
-            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+            <a href="../generator"
+              ><i data-icon="settings"></i>Image Generator</a
+            >
           </li>
           <li id="themeToggleDark" class="themeToggle">
             <input
@@ -82,7 +86,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeDark">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
@@ -92,7 +96,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeLight">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
         </ul>

styleguide/typography/index.html

@@ -45,11 +45,11 @@
     <div>
       <nav>
         <button aria-label="Open Navigation">
-          <i data-icon="menu-small"></i>
+          <i data-icon="menu_small"></i>
         </button>
         <ul>
           <li class="link-back">
-            <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
+            <a href="/"><i data-icon="arrow_left"></i>Back to Wiki</a>
           </li>
           <li>
             <a href="../"><i data-icon="home"></i>Overview</a>
@@ -61,19 +61,23 @@
             <a href=""><i data-icon="info"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+            <a href="../iconography"
+              ><i data-icon="hare_head"></i>Iconography</a
+            >
           </li>
           <li>
-            <a href="../logo"><i data-icon="info"></i>Logo</a>
+            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
           </li>
           <li>
-            <a href="../glow"><i data-icon="info"></i>Glow</a>
+            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
           </li>
           <li>
-            <a href="../demopage"><i data-icon="info"></i>Demopage</a>
+            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
           </li>
           <li>
-            <a href="../generator"><i data-icon="info"></i>Image Generator</a>
+            <a href="../generator"
+              ><i data-icon="settings"></i>Image Generator</a
+            >
           </li>
           <li id="themeToggleDark" class="themeToggle">
             <input
@@ -82,7 +86,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeDark">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
           <li id="themeToggleLight" class="themeToggle">
@@ -92,7 +96,7 @@
               aria-label="Switch between dark and light mode"
             />
             <label for="themeLight">
-              <i data-icon="light"></i>
+              <i data-icon="lightbulb"></i>
             </label>
           </li>
         </ul>