EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix img src path, add theme toggle button
All checks were successful
/ build (push) Successful in 10s
Details

Browse source
This commit is contained in:
kritzl 2025-02-17 00:32:34 +01:00
commit f3b5be3c50
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
10 changed files with 181 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

26
styleguide/assets/script/styleguide.js
View file

@ -1,3 +1,27 @@
document.querySelector('nav > button').addEventListener('click', (e) => {
document.querySelector('nav').classList.toggle('visible');
})
})
function applyTheme(theme){
const html = document.querySelector('html')
document.cookie = `theme=${theme}; expires=; SameSite=Strict; Secure`
html.classList.remove('dark', 'light')
html.classList.add(theme)
}
document.querySelectorAll('.toggleTheme').forEach(
element => element.addEventListener('click', (e) => {
const newTheme = element.dataset.theme;
applyTheme(newTheme);
}
)
);
const themeFromCookie = document.cookie
.split("; ")
.find((row) => row.startsWith("theme="))
?.split("=")[1];
if (themeFromCookie) {
applyTheme(themeFromCookie)
}

52
styleguide/assets/style/icons.scss Normal file
View file

@ -0,0 +1,52 @@
i[data-icon] {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
position: relative;
box-sizing: content-box;
&::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 {
mask-image: url('../icon/arrow_left.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');
}
}

103
styleguide/assets/style/styleguide.css
View file

@ -491,6 +491,49 @@ img.glitch {
filter: url("glitch.svg#glitch");
}
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][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 {
mask-image: url("../icon/arrow_down.svg");
}
i[data-icon][data-icon=info]::before {
mask-image: url("../icon/info.svg");
}
i[data-icon][data-icon=home]::before {
mask-image: url("../icon/home.svg");
}
i[data-icon][data-icon=menu-small]::before {
mask-image: url("../icon/menu_small.svg");
}
i[data-icon][data-icon=light]::before {
mask-image: url("../icon/lightbulb.svg");
}
* {
box-sizing: border-box;
}
@ -625,12 +668,6 @@ body > div nav ul li > a {
body > div nav ul li > a:visited, body > div nav ul li > a:focus, body > div nav ul li > a:active, body > div nav ul li > a:hover {
color: var(--color-foreground);
}
body > div nav ul li > a i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
body > div nav ul li:hover, body > div nav ul li:focus-within {
background-color: transparent;
}
@ -650,6 +687,20 @@ body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-b
body > div nav ul li:hover.link-back a:visited, body > div nav ul li:hover.link-back a:focus, body > div nav ul li:hover.link-back a:active, body > div nav ul li:hover.link-back a:hover, body > div nav ul li:focus-within.link-back a:visited, body > div nav ul li:focus-within.link-back a:focus, body > div nav ul li:focus-within.link-back a:active, body > div nav ul li:focus-within.link-back a:hover {
color: var(--color-glow-secondary);
}
body > div nav ul li:not(.toggleTheme) i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
body > div nav ul li.toggleTheme {
font-size: 1.4em;
width: fit-content;
}
body > div nav ul li.toggleTheme a {
justify-content: center;
padding: 0.25em;
}
body > div main {
max-width: min(var(--container-4xl), 100vw);
width: 100%;
@ -662,46 +713,6 @@ body > div main {
}
}
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][data-icon='arrow-left']::before {
mask-image: url("../icon/arrow_left.svg");
}
i[data-icon][data-icon='arrow-top']::before {
mask-image: url("../icon/arrow_top.svg");
}
i[data-icon][data-icon='arrow-right']::before {
mask-image: url("../icon/arrow_right.svg");
}
i[data-icon][data-icon='arrow-down']::before {
mask-image: url("../icon/arrow_down.svg");
}
i[data-icon][data-icon='info']::before {
mask-image: url("../icon/info.svg");
}
i[data-icon][data-icon='home']::before {
mask-image: url("../icon/home.svg");
}
i[data-icon][data-icon='menu-small']::before {
mask-image: url("../icon/menu_small.svg");
}
a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
color: var(--color-accent-1);
text-decoration: underline;

8
styleguide/assets/style/styleguide.css.map
View file

File diff suppressed because one or more lines are too long

92
styleguide/assets/style/styleguide.scss
View file

@ -1,4 +1,5 @@
@import "base";
@import "icons";
* {
box-sizing: border-box;
@ -31,7 +32,7 @@ body {
}
}
>div {
> div {
display: flex;
gap: 1rem;
flex-grow: 1;
@ -127,7 +128,7 @@ body {
}
}
>a {
> a {
display: flex;
align-items: center;
gap: 0.5rem;
@ -149,13 +150,6 @@ body {
&:hover {
color: var(--color-foreground);
}
i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
}
&:hover,
@ -189,6 +183,25 @@ body {
}
}
}
li:not(.toggleTheme) {
i[data-icon] {
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-right: solid 0.1em currentColor;
}
}
li.toggleTheme {
font-size: 1.4em;
width: fit-content;
a {
justify-content: center;
padding: 0.25em;
}
}
}
}
@ -205,55 +218,6 @@ body {
}
}
i[data-icon] {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
position: relative;
box-sizing: content-box;
&::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 {
mask-image: url('../icon/arrow_left.svg');
}
&[data-icon='arrow-top']::before {
mask-image: url('../icon/arrow_top.svg');
}
&[data-icon='arrow-right']::before {
mask-image: url('../icon/arrow_right.svg');
}
&[data-icon='arrow-down']::before {
mask-image: url('../icon/arrow_down.svg');
}
&[data-icon='info']::before {
mask-image: url('../icon/info.svg');
}
&[data-icon='home']::before {
mask-image: url('../icon/home.svg');
}
&[data-icon='menu-small']::before {
mask-image: url('../icon/menu_small.svg');
}
}
a {
&.a-regular,
@ -290,14 +254,14 @@ pre,
display: flex;
width: 100%;
&>* {
& > * {
width: 100%;
}
@media (max-width: $breakpoint-mobile) {
flex-wrap: wrap;
&>* {
& > * {
width: 100%;
}
}
@ -307,7 +271,7 @@ pre,
display: flex;
align-items: center;
&>* {
& > * {
width: 100%;
}
@ -315,7 +279,7 @@ pre,
flex-wrap: wrap;
justify-content: center;
&>* {
& > * {
width: 100%;
}
}
@ -323,7 +287,7 @@ pre,
main.generator {
>div {
> div {
display: flex;
flex-direction: column;
gap: 1em;
@ -354,7 +318,7 @@ main.generator {
gap: 1rem;
margin-top: 2rem;
&>span {
& > span {
width: 100%;
font-size: var(--text-xl);
}

6
styleguide/colors/index.html
View file

@ -10,10 +10,10 @@
<body>
<header>
<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:
<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:
<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." />
</header>
@ -27,6 +27,8 @@
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i data-icon="light" class="glow"></i></a></li>
</ul>
</nav>
<main>

6
styleguide/demopage/index.html
View file

@ -10,10 +10,10 @@
<body>
<header>
<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:
<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:
<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." />
</header>
@ -27,6 +27,8 @@
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
<li class="active"><a href=""><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i data-icon="light" class="glow"></i></a></li>
</ul>
</nav>
<main>

6
styleguide/generator/index.html
View file

@ -10,10 +10,10 @@
<body style="height: 100vh;">
<header>
<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:
<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:
<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." />
</header>
@ -27,6 +27,8 @@
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i data-icon="light" class="glow"></i></a></li>
</ul>
</nav>
<main class="generator">

2
styleguide/index.html
View file

@ -27,6 +27,8 @@
<li><a href="typography"><i data-icon="info"></i>Typography</a></li>
<li><a href="demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i data-icon="light" class="glow"></i></a></li>
</ul>
</nav>
<main>

6
styleguide/typography/index.html
View file

@ -10,10 +10,10 @@
<body>
<header>
<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:
<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:
<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." />
</header>
@ -27,6 +27,8 @@
<li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i data-icon="light" class="glow"></i></a></li>
</ul>
</nav>
<main>