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

fix horizontal scroll, header links back to wiki
All checks were successful
/ build (push) Successful in 10s
Details

Browse source
This commit is contained in:
kritzl 2025-02-17 00:42:41 +01:00
commit 8baaa1b176
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
8 changed files with 92 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -541,7 +541,7 @@ i[data-icon][data-icon=light]::before {
body { body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
width: 100vw; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@ -564,6 +564,12 @@ body header .header-image {
max-width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
} }
body header #backToWiki > img {
transition: transform 200ms;
}
body header #backToWiki:hover > img {
transform: scale(1.05);
}
body > div { body > div {
display: flex; display: flex;
gap: 1rem; gap: 1rem;

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

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAiEF;EA7DE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAuCJ;EAlCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAYJ;AAAA;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;AAAA;EACE;;AAGF;AAAA;EACE;;;AAiBJ;EA1EE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAoDJ;EACE;IA/EA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;;EAGA;IACE;;EAGF;IACE;;;AA4DJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;EACA;EACA;;;AAIA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KAnZuB;EAoZvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACteJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AC9CJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QFhDqB;EEiDrB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAIE;;AAIJ;EAEE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAMR;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAQN;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAOJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"} {"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAiEF;EA7DE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAuCJ;EAlCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAYJ;AAAA;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;AAAA;EACE;;AAGF;AAAA;EACE;;;AAiBJ;EA1EE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAoDJ;EACE;IA/EA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;;EAGA;IACE;;EAGF;IACE;;;AA4DJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;EACA;EACA;;;AAIA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KAnZuB;EAoZvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACteJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AC9CJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QFxDqB;EEyDrB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAIE;;AAIJ;EAEE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAMR;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAQN;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAOJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}

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

@ -8,7 +8,7 @@
body { body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
width: 100vw; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@ -30,6 +30,14 @@ body {
max-width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
} }
#backToWiki > img {
transition: transform 200ms;
}
#backToWiki:hover > img {
transform: scale(1.05);
}
} }
> div { > div {

16
styleguide/colors/index.html
View file

@ -10,12 +10,14 @@
<body> <body>
<header> <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: <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 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." /> 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 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." /> The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
</a>
</header> </header>
<div> <div>
<nav> <nav>
@ -27,8 +29,10 @@
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li> <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li> <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</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="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
<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> 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> </ul>
</nav> </nav>
<main> <main>

20
styleguide/demopage/index.html
View file

@ -10,12 +10,14 @@
<body> <body>
<header> <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: <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 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." /> 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 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." /> The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
</a>
</header> </header>
<div> <div>
<nav> <nav>
@ -27,8 +29,10 @@
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li> <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 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><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="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
<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> 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> </ul>
</nav> </nav>
<main> <main>
@ -132,7 +136,7 @@
<figure> <figure>
<img src="../assets/image/example_cat.jpg" alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind <img src="../assets/image/example_cat.jpg" alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
of leopard-print fabric and looking at something behind the camera. The background is dark and of leopard-print fabric and looking at something behind the camera. The background is dark and
plain." /> plain."/>
<figcaption>Example image without any distortion applied.</figcaption> <figcaption>Example image without any distortion applied.</figcaption>
</figure> </figure>
<p> <p>
@ -148,7 +152,7 @@
<img class="glitch" src="../assets/image/example_cat.jpg" alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to <img class="glitch" src="../assets/image/example_cat.jpg" alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
bright edges, which get surrounded by pink and blue to their left and right hand side. The second bright edges, which get surrounded by pink and blue to their left and right hand side. The second
one distorts the image by offsetting parts of the image horizontally by seemingly random yet one distorts the image by offsetting parts of the image horizontally by seemingly random yet
somewhat osscilating amounts." /> somewhat osscilating amounts."/>
<figcaption>Example image with visual glitches applied.</figcaption> <figcaption>Example image with visual glitches applied.</figcaption>
</figure> </figure>
</section> </section>

62
styleguide/generator/index.html
View file

@ -10,12 +10,14 @@
<body style="height: 100vh;"> <body style="height: 100vh;">
<header> <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: <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 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." /> 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 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." /> The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
</a>
</header> </header>
<div> <div>
<nav> <nav>
@ -27,8 +29,10 @@
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li> <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li> <li><a href="../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="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="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
<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> 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> </ul>
</nav> </nav>
<main class="generator"> <main class="generator">
@ -38,51 +42,51 @@
<input id="file_input" type="file" name="image" accept="image/*"> <input id="file_input" type="file" name="image" accept="image/*">
</div> </div>
<img id="source_img" src="" /> <img id="source_img" src=""/>
<i data-icon="arrow-down"></i> <i data-icon="arrow-down"></i>
<img id="result_img" src="" /> <img id="result_img" src=""/>
<div style="display: none;"> <div style="display: none;">
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg"> <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox" <filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
primitiveUnits="objectBoundingBox"> primitiveUnits="objectBoundingBox">
<feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" /> <feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw"/>
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" /> <feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa"/>
<feComponentTransfer in="ltoa" result="ltoa_inverse"> <feComponentTransfer in="ltoa" result="ltoa_inverse">
<feFuncA type="table" tableValues="0 1" /> <feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer> </feComponentTransfer>
<feConvolveMatrix in="ltoa_inverse" result="pink_edges" <feConvolveMatrix in="ltoa_inverse" result="pink_edges"
kernelMatrix="-4 0 4 0 0 0 -4 0 4" /> kernelMatrix="-4 0 4 0 0 0 -4 0 4"/>
<feComponentTransfer in="pink_edges" result="pink"> <feComponentTransfer in="pink_edges" result="pink">
<feFuncR type="table" tableValues="0.7765 0" /> <feFuncR type="table" tableValues="0.7765 0"/>
<feFuncG type="table" tableValues="0.1451 0" /> <feFuncG type="table" tableValues="0.1451 0"/>
<feFuncB type="table" tableValues="0.4902 0" /> <feFuncB type="table" tableValues="0.4902 0"/>
</feComponentTransfer> </feComponentTransfer>
<feOffset in="pink" result="pink_shift" dx="-0.002" /> <feOffset in="pink" result="pink_shift" dx="-0.002"/>
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges" <feConvolveMatrix in="ltoa_inverse" result="cyan_edges"
kernelMatrix="4 0 -4 0 0 0 4 0 -4" /> kernelMatrix="4 0 -4 0 0 0 4 0 -4"/>
<feComponentTransfer in="cyan_edges" result="cyan"> <feComponentTransfer in="cyan_edges" result="cyan">
<feFuncR type="table" tableValues="0.2941 0" /> <feFuncR type="table" tableValues="0.2941 0"/>
<feFuncG type="table" tableValues="0.6784 0" /> <feFuncG type="table" tableValues="0.6784 0"/>
<feFuncB type="table" tableValues="0.8471 0" /> <feFuncB type="table" tableValues="0.8471 0"/>
</feComponentTransfer> </feComponentTransfer>
<feOffset in="cyan" result="cyan_shift" dx="0.002" /> <feOffset in="cyan" result="cyan_shift" dx="0.002"/>
<feMerge result="pink_cyan_shift"> <feMerge result="pink_cyan_shift">
<feMergeNode in="SourceGraphic" /> <feMergeNode in="SourceGraphic"/>
<feMergeNode in="pink_shift" /> <feMergeNode in="pink_shift"/>
<feMergeNode in="cyan_shift" /> <feMergeNode in="cyan_shift"/>
</feMerge> </feMerge>
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" /> <feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise"/>
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" /> <feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02"/>
<feOffset in="distorted_raw" result="distorted" /> <feOffset in="distorted_raw" result="distorted"/>
</filter> </filter>
<g filter="url(#filter0)"> <g filter="url(#filter0)">
<image href="" width="100%" height="100%" /> <image href="" width="100%" height="100%"/>
</g> </g>
</svg> </svg>
</div> </div>

16
styleguide/index.html
View file

@ -10,12 +10,14 @@
<body> <body>
<header> <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: <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 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." /> 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 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." /> The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
</a>
</header> </header>
<div> <div>
<nav> <nav>
@ -27,8 +29,10 @@
<li><a href="typography"><i data-icon="info"></i>Typography</a></li> <li><a href="typography"><i data-icon="info"></i>Typography</a></li>
<li><a href="demopage"><i data-icon="info"></i>Demopage</a></li> <li><a href="demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="generator"><i data-icon="info"></i>Image Generator</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="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
<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> 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> </ul>
</nav> </nav>
<main> <main>

16
styleguide/typography/index.html
View file

@ -10,12 +10,14 @@
<body> <body>
<header> <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: <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 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." /> 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 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." /> The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
</a>
</header> </header>
<div> <div>
<nav> <nav>
@ -27,8 +29,10 @@
<li class="active"><a href=""><i data-icon="info"></i>Typography</a></li> <li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li> <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</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="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
<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> 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> </ul>
</nav> </nav>
<main> <main>