styleguide: update icons.scss, update navigation icons, add WIP icon grid
All checks were successful
/ build (push) Successful in 11s
All checks were successful
/ build (push) Successful in 11s
This commit is contained in:
parent
c4c3396c76
commit
da8c820122
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
23 changed files with 1028 additions and 222 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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));
|
||||
|
|
|
|||
188
styleguide/assets/style/icons.css
Normal file
188
styleguide/assets/style/icons.css
Normal file
|
|
@ -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 */
|
||||
1
styleguide/assets/style/icons.css.map
Normal file
1
styleguide/assets/style/icons.css.map
Normal file
|
|
@ -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"}
|
||||
|
|
@ -1,4 +1,64 @@
|
|||
i[data-icon] {
|
||||
$icons: (
|
||||
"arrow_down",
|
||||
"arrow_down_left",
|
||||
"arrow_down_right",
|
||||
"arrow_left",
|
||||
"arrow_right",
|
||||
"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"
|
||||
);
|
||||
|
||||
i {
|
||||
&[data-icon] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
|
@ -16,40 +76,11 @@ i[data-icon] {
|
|||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
&[data-icon="arrow-left"]::before {
|
||||
mask-image: url("../icon/arrow_left.svg");
|
||||
}
|
||||
|
||||
&[data-icon="arrow-up"]::before {
|
||||
mask-image: url("../icon/arrow_up.svg");
|
||||
@each $icon in $icons {
|
||||
&[data-icon="#{$icon}"]::before {
|
||||
mask-image: url("../icon/#{$icon}.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");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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 {
|
||||
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 {
|
||||
i[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=arrow_down_left]::before {
|
||||
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 {
|
||||
mask-image: url("../icon/menu_small.svg");
|
||||
i[data-icon=hygene]::before {
|
||||
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"] {
|
||||
background-color: #60a5f9;
|
||||
table td.val.highlighted[data-dim=A] {
|
||||
background-color: rgb(96, 165, 249);
|
||||
}
|
||||
table td.val.highlighted[data-dim="B"] {
|
||||
background-color: #d381f7;
|
||||
table td.val.highlighted[data-dim=B] {
|
||||
background-color: rgb(211, 129, 247);
|
||||
}
|
||||
table td.val.highlighted[data-dim="C"] {
|
||||
background-color: #ff7975;
|
||||
table td.val.highlighted[data-dim=C] {
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
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 {
|
||||
i[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=arrow_down_left]::before {
|
||||
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 {
|
||||
mask-image: url("../icon/menu_small.svg");
|
||||
i[data-icon=hygene]::before {
|
||||
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);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
168
styleguide/iconography/list/index.html
Normal file
168
styleguide/iconography/list/index.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue