Recompile all scss

styleguide/assets/style/base.css

@@ -318,6 +318,7 @@
   html:has(#themeLight:checked) .dark-only {
     display: none;
   }
+
   #themeToggleDark {
     display: none;
   }
@@ -415,6 +416,7 @@
   html:has(#themeDark:checked) .dark-only {
     display: initial;
   }
+
   #themeToggleLight {
     display: none;
   }

styleguide/assets/style/merch.css

@@ -318,6 +318,7 @@
   html:has(#themeLight:checked) .dark-only {
     display: none;
   }
+
   #themeToggleDark {
     display: none;
   }
@@ -415,6 +416,7 @@
   html:has(#themeDark:checked) .dark-only {
     display: initial;
   }
+
   #themeToggleLight {
     display: none;
   }
@@ -718,181 +720,184 @@ i[data-icon]::before {
   mask-repeat: no-repeat;
   background-color: currentColor;
 }
-i[data-icon=arrow_down]::before {
+i[data-icon="arrow_down"]::before {
   mask-image: url("../icon/arrow_down.svg");
 }
-i[data-icon=arrow_down_left]::before {
+i[data-icon="arrow_down_left"]::before {
   mask-image: url("../icon/arrow_down_left.svg");
 }
-i[data-icon=arrow_down_right]::before {
+i[data-icon="arrow_down_right"]::before {
   mask-image: url("../icon/arrow_down_right.svg");
 }
-i[data-icon=arrow_left]::before {
+i[data-icon="arrow_left"]::before {
   mask-image: url("../icon/arrow_left.svg");
 }
-i[data-icon=arrow_right]::before {
+i[data-icon="arrow_right"]::before {
   mask-image: url("../icon/arrow_right.svg");
 }
-i[data-icon=arrow_up]::before {
+i[data-icon="arrow_up"]::before {
   mask-image: url("../icon/arrow_up.svg");
 }
-i[data-icon=arrow_up_left]::before {
+i[data-icon="arrow_up_left"]::before {
   mask-image: url("../icon/arrow_up_left.svg");
 }
-i[data-icon=arrow_up_right]::before {
+i[data-icon="arrow_up_right"]::before {
   mask-image: url("../icon/arrow_up_right.svg");
 }
-i[data-icon=basket]::before {
+i[data-icon="basket"]::before {
   mask-image: url("../icon/basket.svg");
 }
-i[data-icon=bed]::before {
+i[data-icon="bed"]::before {
   mask-image: url("../icon/bed.svg");
 }
-i[data-icon=clock]::before {
+i[data-icon="clock"]::before {
   mask-image: url("../icon/clock.svg");
 }
-i[data-icon=code]::before {
+i[data-icon="code"]::before {
   mask-image: url("../icon/code.svg");
 }
-i[data-icon=creature]::before {
+i[data-icon="creature"]::before {
   mask-image: url("../icon/creature.svg");
 }
-i[data-icon=cross]::before {
+i[data-icon="cross"]::before {
   mask-image: url("../icon/cross.svg");
 }
-i[data-icon=cross_small]::before {
+i[data-icon="cross_small"]::before {
   mask-image: url("../icon/cross_small.svg");
 }
-i[data-icon=cup_1]::before {
+i[data-icon="cup_1"]::before {
   mask-image: url("../icon/cup_1.svg");
 }
-i[data-icon=cup_2]::before {
+i[data-icon="cup_2"]::before {
   mask-image: url("../icon/cup_2.svg");
 }
-i[data-icon=dect]::before {
+i[data-icon="dect"]::before {
   mask-image: url("../icon/dect.svg");
 }
-i[data-icon=external]::before {
+i[data-icon="external"]::before {
   mask-image: url("../icon/external.svg");
 }
-i[data-icon=fairydust]::before {
+i[data-icon="fairydust"]::before {
   mask-image: url("../icon/fairydust.svg");
 }
-i[data-icon=flag]::before {
+i[data-icon="flag"]::before {
   mask-image: url("../icon/flag.svg");
 }
-i[data-icon=font]::before {
+i[data-icon="font"]::before {
   mask-image: url("../icon/font.svg");
 }
-i[data-icon=gluten]::before {
+i[data-icon="gluten"]::before {
   mask-image: url("../icon/gluten.svg");
 }
-i[data-icon=hackertours]::before {
+i[data-icon="hackertours"]::before {
   mask-image: url("../icon/hackertours.svg");
 }
-i[data-icon=hare_head]::before {
+i[data-icon="hare_head"]::before {
   mask-image: url("../icon/hare_head.svg");
 }
-i[data-icon=history]::before {
+i[data-icon="history"]::before {
   mask-image: url("../icon/history.svg");
 }
-i[data-icon=home]::before {
+i[data-icon="home"]::before {
   mask-image: url("../icon/home.svg");
 }
-i[data-icon=hygene]::before {
+i[data-icon="hygene"]::before {
   mask-image: url("../icon/hygene.svg");
 }
-i[data-icon=info]::before {
+i[data-icon="info"]::before {
   mask-image: url("../icon/info.svg");
 }
-i[data-icon=lightbulb]::before {
+i[data-icon="lightbulb"]::before {
   mask-image: url("../icon/lightbulb.svg");
 }
-i[data-icon=link]::before {
+i[data-icon="link"]::before {
   mask-image: url("../icon/link.svg");
 }
-i[data-icon=location]::before {
+i[data-icon="location"]::before {
   mask-image: url("../icon/location.svg");
 }
-i[data-icon=lock]::before {
+i[data-icon="lock"]::before {
   mask-image: url("../icon/lock.svg");
 }
-i[data-icon=login]::before {
+i[data-icon="login"]::before {
   mask-image: url("../icon/login.svg");
 }
-i[data-icon=logout]::before {
+i[data-icon="logout"]::before {
   mask-image: url("../icon/logout.svg");
 }
-i[data-icon=looping]::before {
+i[data-icon="looping"]::before {
   mask-image: url("../icon/looping.svg");
 }
-i[data-icon=menu]::before {
+i[data-icon="menu"]::before {
   mask-image: url("../icon/menu.svg");
 }
-i[data-icon=menu_small]::before {
+i[data-icon="menu_small"]::before {
   mask-image: url("../icon/menu_small.svg");
 }
-i[data-icon=merch]::before {
+i[data-icon="merch"]::before {
   mask-image: url("../icon/merch.svg");
 }
-i[data-icon=message]::before {
+i[data-icon="message"]::before {
   mask-image: url("../icon/message.svg");
 }
-i[data-icon=microphone]::before {
+i[data-icon="microphone"]::before {
   mask-image: url("../icon/microphone.svg");
 }
-i[data-icon=network]::before {
+i[data-icon="network"]::before {
   mask-image: url("../icon/network.svg");
 }
-i[data-icon=paperplane]::before {
+i[data-icon="paperplane"]::before {
   mask-image: url("../icon/paperplane.svg");
 }
-i[data-icon=pen]::before {
+i[data-icon="pen"]::before {
   mask-image: url("../icon/pen.svg");
 }
-i[data-icon=plate_and_cutlery]::before {
+i[data-icon="pin"]::before {
+  mask-image: url("../icon/pin.svg");
+}
+i[data-icon="plate_and_cutlery"]::before {
   mask-image: url("../icon/plate_and_cutlery.svg");
 }
-i[data-icon=power]::before {
+i[data-icon="power"]::before {
   mask-image: url("../icon/power.svg");
 }
-i[data-icon=question]::before {
+i[data-icon="question"]::before {
   mask-image: url("../icon/question.svg");
 }
-i[data-icon=schedule]::before {
+i[data-icon="schedule"]::before {
   mask-image: url("../icon/schedule.svg");
 }
-i[data-icon=search]::before {
+i[data-icon="search"]::before {
   mask-image: url("../icon/search.svg");
 }
-i[data-icon=settings]::before {
+i[data-icon="settings"]::before {
   mask-image: url("../icon/settings.svg");
 }
-i[data-icon=signup]::before {
+i[data-icon="signup"]::before {
   mask-image: url("../icon/signup.svg");
 }
-i[data-icon=soldering_iron]::before {
+i[data-icon="soldering_iron"]::before {
   mask-image: url("../icon/soldering_iron.svg");
 }
-i[data-icon=tick]::before {
+i[data-icon="tick"]::before {
   mask-image: url("../icon/tick.svg");
 }
-i[data-icon=tick_small]::before {
+i[data-icon="tick_small"]::before {
   mask-image: url("../icon/tick_small.svg");
 }
-i[data-icon=ticket]::before {
+i[data-icon="ticket"]::before {
   mask-image: url("../icon/ticket.svg");
 }
-i[data-icon=toast]::before {
+i[data-icon="toast"]::before {
   mask-image: url("../icon/toast.svg");
 }
-i[data-icon=train]::before {
+i[data-icon="train"]::before {
   mask-image: url("../icon/train.svg");
 }
-i[data-icon=vegan]::before {
+i[data-icon="vegan"]::before {
   mask-image: url("../icon/vegan.svg");
 }
-i[data-icon=warning]::before {
+i[data-icon="warning"]::before {
   mask-image: url("../icon/warning.svg");
 }
 
@@ -1250,7 +1255,7 @@ main > div.generator i {
   padding: 0.5rem;
   z-index: 10;
   position: absolute;
-  bottom: calc(var(--text-xl) * -1 - 2rem);
+  bottom: calc((var(--text-xl) * -1) - 2rem);
   border-radius: 0.3rem;
 }
 .icon-grid div i[data-icon] {
@@ -1499,14 +1504,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: rgb(96, 165, 249);
+  background-color: #60a5f9;
 }
-table td.val.highlighted[data-dim=B] {
+table td.val.highlighted[data-dim="B"] {
-  background-color: rgb(211, 129, 247);
+  background-color: #d381f7;
 }
-table td.val.highlighted[data-dim=C] {
+table td.val.highlighted[data-dim="C"] {
-  background-color: rgb(255, 121, 117);
+  background-color: #ff7975;
 }
 table td.val.currentDimension:not(.hover) {
   background-color: var(--color-shade-2);
@@ -1578,7 +1583,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;
@@ -1591,7 +1596,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";
@@ -1601,7 +1606,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

@@ -318,6 +318,7 @@
   html:has(#themeLight:checked) .dark-only {
     display: none;
   }
+
   #themeToggleDark {
     display: none;
   }
@@ -415,6 +416,7 @@
   html:has(#themeDark:checked) .dark-only {
     display: initial;
   }
+
   #themeToggleLight {
     display: none;
   }
@@ -718,181 +720,184 @@ i[data-icon]::before {
   mask-repeat: no-repeat;
   background-color: currentColor;
 }
-i[data-icon=arrow_down]::before {
+i[data-icon="arrow_down"]::before {
   mask-image: url("../icon/arrow_down.svg");
 }
-i[data-icon=arrow_down_left]::before {
+i[data-icon="arrow_down_left"]::before {
   mask-image: url("../icon/arrow_down_left.svg");
 }
-i[data-icon=arrow_down_right]::before {
+i[data-icon="arrow_down_right"]::before {
   mask-image: url("../icon/arrow_down_right.svg");
 }
-i[data-icon=arrow_left]::before {
+i[data-icon="arrow_left"]::before {
   mask-image: url("../icon/arrow_left.svg");
 }
-i[data-icon=arrow_right]::before {
+i[data-icon="arrow_right"]::before {
   mask-image: url("../icon/arrow_right.svg");
 }
-i[data-icon=arrow_up]::before {
+i[data-icon="arrow_up"]::before {
   mask-image: url("../icon/arrow_up.svg");
 }
-i[data-icon=arrow_up_left]::before {
+i[data-icon="arrow_up_left"]::before {
   mask-image: url("../icon/arrow_up_left.svg");
 }
-i[data-icon=arrow_up_right]::before {
+i[data-icon="arrow_up_right"]::before {
   mask-image: url("../icon/arrow_up_right.svg");
 }
-i[data-icon=basket]::before {
+i[data-icon="basket"]::before {
   mask-image: url("../icon/basket.svg");
 }
-i[data-icon=bed]::before {
+i[data-icon="bed"]::before {
   mask-image: url("../icon/bed.svg");
 }
-i[data-icon=clock]::before {
+i[data-icon="clock"]::before {
   mask-image: url("../icon/clock.svg");
 }
-i[data-icon=code]::before {
+i[data-icon="code"]::before {
   mask-image: url("../icon/code.svg");
 }
-i[data-icon=creature]::before {
+i[data-icon="creature"]::before {
   mask-image: url("../icon/creature.svg");
 }
-i[data-icon=cross]::before {
+i[data-icon="cross"]::before {
   mask-image: url("../icon/cross.svg");
 }
-i[data-icon=cross_small]::before {
+i[data-icon="cross_small"]::before {
   mask-image: url("../icon/cross_small.svg");
 }
-i[data-icon=cup_1]::before {
+i[data-icon="cup_1"]::before {
   mask-image: url("../icon/cup_1.svg");
 }
-i[data-icon=cup_2]::before {
+i[data-icon="cup_2"]::before {
   mask-image: url("../icon/cup_2.svg");
 }
-i[data-icon=dect]::before {
+i[data-icon="dect"]::before {
   mask-image: url("../icon/dect.svg");
 }
-i[data-icon=external]::before {
+i[data-icon="external"]::before {
   mask-image: url("../icon/external.svg");
 }
-i[data-icon=fairydust]::before {
+i[data-icon="fairydust"]::before {
   mask-image: url("../icon/fairydust.svg");
 }
-i[data-icon=flag]::before {
+i[data-icon="flag"]::before {
   mask-image: url("../icon/flag.svg");
 }
-i[data-icon=font]::before {
+i[data-icon="font"]::before {
   mask-image: url("../icon/font.svg");
 }
-i[data-icon=gluten]::before {
+i[data-icon="gluten"]::before {
   mask-image: url("../icon/gluten.svg");
 }
-i[data-icon=hackertours]::before {
+i[data-icon="hackertours"]::before {
   mask-image: url("../icon/hackertours.svg");
 }
-i[data-icon=hare_head]::before {
+i[data-icon="hare_head"]::before {
   mask-image: url("../icon/hare_head.svg");
 }
-i[data-icon=history]::before {
+i[data-icon="history"]::before {
   mask-image: url("../icon/history.svg");
 }
-i[data-icon=home]::before {
+i[data-icon="home"]::before {
   mask-image: url("../icon/home.svg");
 }
-i[data-icon=hygene]::before {
+i[data-icon="hygene"]::before {
   mask-image: url("../icon/hygene.svg");
 }
-i[data-icon=info]::before {
+i[data-icon="info"]::before {
   mask-image: url("../icon/info.svg");
 }
-i[data-icon=lightbulb]::before {
+i[data-icon="lightbulb"]::before {
   mask-image: url("../icon/lightbulb.svg");
 }
-i[data-icon=link]::before {
+i[data-icon="link"]::before {
   mask-image: url("../icon/link.svg");
 }
-i[data-icon=location]::before {
+i[data-icon="location"]::before {
   mask-image: url("../icon/location.svg");
 }
-i[data-icon=lock]::before {
+i[data-icon="lock"]::before {
   mask-image: url("../icon/lock.svg");
 }
-i[data-icon=login]::before {
+i[data-icon="login"]::before {
   mask-image: url("../icon/login.svg");
 }
-i[data-icon=logout]::before {
+i[data-icon="logout"]::before {
   mask-image: url("../icon/logout.svg");
 }
-i[data-icon=looping]::before {
+i[data-icon="looping"]::before {
   mask-image: url("../icon/looping.svg");
 }
-i[data-icon=menu]::before {
+i[data-icon="menu"]::before {
   mask-image: url("../icon/menu.svg");
 }
-i[data-icon=menu_small]::before {
+i[data-icon="menu_small"]::before {
   mask-image: url("../icon/menu_small.svg");
 }
-i[data-icon=merch]::before {
+i[data-icon="merch"]::before {
   mask-image: url("../icon/merch.svg");
 }
-i[data-icon=message]::before {
+i[data-icon="message"]::before {
   mask-image: url("../icon/message.svg");
 }
-i[data-icon=microphone]::before {
+i[data-icon="microphone"]::before {
   mask-image: url("../icon/microphone.svg");
 }
-i[data-icon=network]::before {
+i[data-icon="network"]::before {
   mask-image: url("../icon/network.svg");
 }
-i[data-icon=paperplane]::before {
+i[data-icon="paperplane"]::before {
   mask-image: url("../icon/paperplane.svg");
 }
-i[data-icon=pen]::before {
+i[data-icon="pen"]::before {
   mask-image: url("../icon/pen.svg");
 }
-i[data-icon=plate_and_cutlery]::before {
+i[data-icon="pin"]::before {
+  mask-image: url("../icon/pin.svg");
+}
+i[data-icon="plate_and_cutlery"]::before {
   mask-image: url("../icon/plate_and_cutlery.svg");
 }
-i[data-icon=power]::before {
+i[data-icon="power"]::before {
   mask-image: url("../icon/power.svg");
 }
-i[data-icon=question]::before {
+i[data-icon="question"]::before {
   mask-image: url("../icon/question.svg");
 }
-i[data-icon=schedule]::before {
+i[data-icon="schedule"]::before {
   mask-image: url("../icon/schedule.svg");
 }
-i[data-icon=search]::before {
+i[data-icon="search"]::before {
   mask-image: url("../icon/search.svg");
 }
-i[data-icon=settings]::before {
+i[data-icon="settings"]::before {
   mask-image: url("../icon/settings.svg");
 }
-i[data-icon=signup]::before {
+i[data-icon="signup"]::before {
   mask-image: url("../icon/signup.svg");
 }
-i[data-icon=soldering_iron]::before {
+i[data-icon="soldering_iron"]::before {
   mask-image: url("../icon/soldering_iron.svg");
 }
-i[data-icon=tick]::before {
+i[data-icon="tick"]::before {
   mask-image: url("../icon/tick.svg");
 }
-i[data-icon=tick_small]::before {
+i[data-icon="tick_small"]::before {
   mask-image: url("../icon/tick_small.svg");
 }
-i[data-icon=ticket]::before {
+i[data-icon="ticket"]::before {
   mask-image: url("../icon/ticket.svg");
 }
-i[data-icon=toast]::before {
+i[data-icon="toast"]::before {
   mask-image: url("../icon/toast.svg");
 }
-i[data-icon=train]::before {
+i[data-icon="train"]::before {
   mask-image: url("../icon/train.svg");
 }
-i[data-icon=vegan]::before {
+i[data-icon="vegan"]::before {
   mask-image: url("../icon/vegan.svg");
 }
-i[data-icon=warning]::before {
+i[data-icon="warning"]::before {
   mask-image: url("../icon/warning.svg");
 }
 
@@ -1250,7 +1255,7 @@ main > div.generator i {
   padding: 0.5rem;
   z-index: 10;
   position: absolute;
-  bottom: calc(var(--text-xl) * -1 - 2rem);
+  bottom: calc((var(--text-xl) * -1) - 2rem);
   border-radius: 0.3rem;
 }
 .icon-grid div i[data-icon] {