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

styleguide: move scripts, add mobile navigation, style generator
All checks were successful
/ build (push) Successful in 9s
Details

Browse source
This commit is contained in:
kritzl 2025-02-14 23:06:36 +01:00
commit fa75654b11
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
16 changed files with 390 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

13
styleguide/generator/generator.js → styleguide/assets/script/generator.js
View file

@ -75,3 +75,16 @@ function downloadURI(_uri, _name) {
}
downloadButton.addEventListener('click', downloadURI);
(async () => {
let exampleImageBlob = await fetch("../assets/image/example_cat.jpg")
.then(r => r.blob());
let dataUrl = await new Promise(resolve => {
let reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.readAsDataURL(exampleImageBlob);
});
loadImage(dataUrl);
})()

0
styleguide/merch/merch.js → styleguide/assets/script/merch.js
View file

3
styleguide/assets/script/styleguide.js Normal file
View file

@ -0,0 +1,3 @@
document.querySelector('nav > button').addEventListener('click', (e) => {
document.querySelector('nav').classList.toggle('visible');
})

9
styleguide/assets/style/base.css
View file

@ -287,7 +287,7 @@ h6,
.h6 {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
margin: 0;
margin: 1rem 0;
}
h1,
@ -364,9 +364,14 @@ table tr th {
}
table thead {
position: sticky;
top: 0;
top: 4rem;
z-index: 10;
}
@media (min-width: 48rem) {
table thead {
top: 0;
}
}
table thead tr > th {
outline-width: 0.1em;
outline-style: solid;

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

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AAMA;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;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;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;EAaE;EACA;EACA;;;AAIF;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;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;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","file":"base.css"}
{"version":3,"sourceRoot":"","sources":["base.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;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;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;EAaE;EACA;EACA;;;AAIF;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;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KApXuB;EAqXvB;;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","file":"base.css"}

11
styleguide/assets/style/base.scss
View file

@ -4,6 +4,9 @@ $breakpoint-lg: 64rem;
$breakpoint-xl: 80rem;
$breakpoint-2xl: 96rem;
$breakpoint-mobile: $breakpoint-md;
$mobile-navigation-height: 4rem;
:root {
--color-neutral-50: #F2F0F5;
--color-neutral-100: #D1C6E0;
@ -292,7 +295,7 @@ h6,
{
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
margin: 0;
margin: 1rem 0;
}
@ -374,9 +377,13 @@ table {
thead {
position: sticky;
top: 0;
top: $mobile-navigation-height;
z-index: 10;
@media (min-width: $breakpoint-mobile) {
top: 0;
}
tr > th {
outline-width: 0.1em;
outline-style: solid;

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

@ -287,7 +287,7 @@ h6,
.h6 {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
margin: 0;
margin: 1rem 0;
}
h1,
@ -364,9 +364,14 @@ table tr th {
}
table thead {
position: sticky;
top: 0;
top: 4rem;
z-index: 10;
}
@media (min-width: 48rem) {
table thead {
top: 0;
}
}
table thead tr > th {
outline-width: 0.1em;
outline-style: solid;
@ -442,48 +447,117 @@ body header {
height: fit-content;
flex-grow: 0;
}
@media (max-width: 48rem) {
body header {
margin-top: 4rem;
}
}
body header .header-image {
height: 200px;
width: fit-content;
max-width: 100%;
object-fit: contain;
}
body > div {
display: flex;
gap: 1rem;
flex-grow: 1;
flex-direction: column;
}
@media (min-width: 48rem) {
body > div {
flex-direction: row;
}
}
body > div nav {
width: 20rem;
height: fit-content;
display: flex;
flex-direction: column;
flex-shrink: 0;
position: sticky;
top: 0;
padding: 0 1rem;
background-color: var(--color-background);
z-index: 20;
overflow: hidden;
width: 100%;
height: 4rem;
transition: height 200ms;
}
@media (min-width: 48rem) {
body > div nav {
max-width: 15rem;
width: fit-content;
top: 1rem;
height: fit-content;
overflow: visible;
}
body > div nav button {
display: none;
}
}
@media (max-width: 48rem) {
body > div nav {
position: fixed;
}
body > div nav:not(.visible) ul {
display: none;
}
body > div nav.visible {
height: 100vh;
}
}
body > div nav button {
background-color: transparent;
border: none;
color: var(--color-foreground);
font-size: 2rem;
cursor: pointer;
transition: filter 400ms ease-in;
padding: 1rem 0;
width: 2rem;
height: 2rem;
box-sizing: content-box;
}
body > div nav button:hover {
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));
transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
}
body > div nav ul {
display: flex;
flex-direction: column;
gap: 0.75rem;
list-style-type: none;
padding: 0;
margin: 0;
}
body > div nav ul li {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
--local-primary: var(--color-primary);
--local-border: var(--color-shade-1);
}
body > div nav ul li.link-back {
--local-primary: var(--color-secondary);
--local-border: var(--color-shade-4);
background-color: var(--color-background);
}
body > div nav ul li.active {
background-color: var(--color-shade-2);
--local-border: var(--color-shade-4);
}
body > div nav ul li > a {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
outline: solid 0.1em var(--color-shade-1);
padding: 0.5rem 1rem;
border: solid 0.1em var(--local-border);
padding: 0.4rem 1rem;
color: var(--color-foreground);
text-decoration: none;
font-size: 1.2em;
box-sizing: border-box;
transition-property: filter, outline-color;
transition-property: filter, border-color;
transition-duration: 400ms;
transition-timing-function: ease-in;
}
@ -500,10 +574,10 @@ body > div nav ul li:hover, body > div nav ul li:focus-within {
background-color: transparent;
}
body > div nav ul li:hover a, body > div nav ul li:focus-within a {
outline: solid 0.1em var(--color-white);
border: solid 0.1em var(--color-white);
background-color: transparent;
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms, outline-color 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms, border-color 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
}
body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body > div nav ul li:hover a:active, body > div nav ul li:hover a:hover, body > div nav ul li:focus-within a:visited, body > div nav ul li:focus-within a:focus, body > div nav ul li:focus-within a:active, body > div nav ul li:focus-within a:hover {
color: var(--color-white);
@ -511,12 +585,12 @@ body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body >
body > div main {
max-width: min(var(--container-4xl), 100vw);
width: 100%;
border-left: dashed 0.25rem var(--color-foreground);
padding: 1rem;
padding: 0 1rem;
}
@media (min-width: 40rem) {
@media (min-width: 48rem) {
body > div main {
padding-left: 2rem;
border-left: dashed 0.25rem var(--color-shade-4);
}
}
@ -541,9 +615,24 @@ i[data-icon]::before {
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);
@ -597,6 +686,23 @@ pre,
}
}
main.generator > div {
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
}
main.generator img {
width: 400px;
height: 300px;
object-fit: contain;
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));
}
main.generator i {
font-size: 3em;
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));
}
.swatch-grid {
background-color: var(--color-background);
color: var(--color-foreground);

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

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["base.scss","styleguide.scss"],"names":[],"mappings":"AAMA;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;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;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;EAaE;EACA;EACA;;;AAIF;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;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;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;;;AC/bJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAQZ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AAOF;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;;;;AAKN;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","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;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;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;EAaE;EACA;EACA;;;AAIF;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;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KApXuB;EAqXvB;;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;;;ACtcJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YDfqB;;;ACkBvB;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QD/CqB;ECgDrB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EACA;IACE;;;AAIJ;EAzBF;IA0BI;;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;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAQZ;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAMR;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;;;AAOF;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"}

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

@ -18,53 +18,125 @@ body {
width: 100%;
height: fit-content;
flex-grow: 0;
@media (max-width: $breakpoint-mobile) {
margin-top: $mobile-navigation-height;
}
.header-image {
height: 200px;
width: fit-content;
max-width: 100%;
object-fit: contain;
}
}
> div {
display: flex;
gap: 1rem;
flex-grow: 1;
flex-direction: column;
@media (min-width: $breakpoint-mobile) {
flex-direction: row;
}
nav {
width: 20rem;
height: fit-content;
display: flex;
flex-direction: column;
flex-shrink: 0;
position: sticky;
top: 0;
padding: 0 1rem;
background-color: var(--color-background);
z-index: 20;
overflow: hidden;
width: 100%;
height: $mobile-navigation-height;
transition: height 200ms;
@media (min-width: $breakpoint-mobile) {
max-width: 15rem;
width: fit-content;
top: 1rem;
height: fit-content;
overflow: visible;
button {
display: none;
}
}
@media (max-width: $breakpoint-mobile) {
position: fixed;
&:not(.visible) {
ul {
display: none;
}
}
&.visible {
height: 100vh;
}
}
button {
background-color: transparent;
border: none;
color: var(--color-foreground);
font-size: 2rem;
cursor: pointer;
transition: filter 400ms ease-in;
padding: 1rem 0;
width: 2rem;
height: 2rem;
box-sizing: content-box;
&:hover {
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));
transition: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
}
}
ul {
display: flex;
flex-direction: column;
gap: 0.75rem;
list-style-type: none;
padding: 0;
margin: 0;
li {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
--local-primary: var(--color-primary);
--local-border: var(--color-shade-1);
&.link-back {
--local-primary: var(--color-secondary);
background-color: var(--color-shade-2);
--local-border: var(--color-shade-4);
background-color: var(--color-background);
}
&.active {
background-color: var(--color-shade-2);
--local-border: var(--color-shade-4);
}
> a {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
outline: solid 0.1em var(--color-shade-1);
padding: 0.5rem 1rem;
border: solid 0.1em var(--local-border);
padding: 0.4rem 1rem;
color: var(--color-foreground);
text-decoration: none;
font-size: 1.2em;
box-sizing: border-box;
transition-property: filter, outline-color;
transition-property: filter, border-color;
transition-duration: 400ms;
transition-timing-function: ease-in;
@ -84,11 +156,11 @@ body {
background-color: transparent;
a {
outline: solid 0.1em var(--color-white);
border: solid 0.1em var(--color-white);
background-color: transparent;
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
transition: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
outline-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
&:visited, &:focus, &:active, &:hover {
color: var(--color-white);
@ -102,11 +174,11 @@ body {
main {
max-width: min(var(--container-4xl), 100vw);
width: 100%;
border-left: dashed 0.25rem var(--color-foreground);
padding: 1rem;
padding: 0 1rem;
@media (min-width: $breakpoint-sm) {
@media (min-width: $breakpoint-mobile) {
padding-left: 2rem;
border-left: dashed 0.25rem var(--color-shade-4);
}
}
}
@ -135,9 +207,29 @@ i[data-icon] {
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');
}
}
@ -181,7 +273,7 @@ pre,
width: 100%;
}
@media (max-width: $breakpoint-md) {
@media (max-width: $breakpoint-mobile) {
flex-wrap: wrap;
& > * {
@ -208,6 +300,28 @@ pre,
}
}
main.generator {
> div {
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
}
img {
width: 400px;
height: 300px;
object-fit: contain;
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));
}
i {
font-size: 3em;
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));
}
}
.swatch-grid {
background-color: var(--color-background);
color: var(--color-foreground);

15
styleguide/colors/index.html
View file

@ -10,16 +10,21 @@
<body>
<header>
<img src="../assets/image/logo_eventname_glow.svg" style="height: 200px; width: fit-content"/>
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
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."/>
</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="info"></i>Overview</a></li>
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
<li class="active"><a href="../colors"><i data-icon="info"></i>Colors</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="../generator"><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main>
@ -230,9 +235,7 @@
</section>
</div>
</main>
<script>
</script>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
</div>
</body>

15
styleguide/demopage/index.html
View file

@ -10,16 +10,21 @@
<body>
<header>
<img src="../assets/image/logo_eventname_glow.svg" style="height: 200px; width: fit-content"/>
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
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."/>
</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="info"></i>Overview</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><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>
</ul>
</nav>
<main>
@ -193,9 +198,7 @@ int *positives(int *numbers, int *size) {
</section>
</main>
</div>
<script>
</script>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
</body>
</html>

40
styleguide/generator/index.html
View file

@ -3,24 +3,40 @@
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
<title>Document</title>
</head>
<body style="height: 100vh;">
<div style="display: flex; flex-direction: column; gap: 1em; align-items: center">
<header>
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
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."/>
</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><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>
</ul>
</nav>
<main class="generator">
<div>
<div>
<input id="file_input" type="file" name="image" accept="image/*">
</div>
<img id="source_img" src=""
style="width: 400px; height: 300px; border: solid 4px darkblue; background-color: darkblue; object-fit: contain;" />
<img id="result_img" src=""
style="width: 400px; height: 300px; border: solid 4px darkgreen; background-color: darkgreen; object-fit: contain;" />
<img id="source_img" src=""/>
<i data-icon="arrow-down"></i>
<img id="result_img" src=""/>
<div style="display: none;">
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
@ -70,9 +86,11 @@
</button>
</div>
</main>
</div>
<script src="generator.js" type="text/javascript"></script>
<script src="../assets/script/generator.js" type="text/javascript"></script>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
</body>
</html>

13
styleguide/index.html
View file

@ -10,25 +10,28 @@
<body>
<header>
<img src="assets/image/logo_eventname_glow.svg" style="height: 200px; width: fit-content"/>
<img src="assets/image/logo_eventname_glow.svg" class="header-image"
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."/>
</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="info"></i>Overview</a></li>
<li class="active"><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><a href="demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main>
<h1>Styleguide Easterhegg 2025</h1>
</main>
<script>
</script>
<script src="assets/script/styleguide.js" type="text/javascript"></script>
</div>
</body>
</html>

2
styleguide/merch/de/index.html
View file

@ -1206,7 +1206,7 @@
</table>
</main>
<script type="text/javascript" src="../merch.js"></script>
<script type="text/javascript" src="../../assets/script/merch.js"></script>
</body>
</html>

2
styleguide/merch/en/index.html
View file

@ -1205,7 +1205,7 @@
</table>
</main>
<script type="text/javascript" src="../merch.js"></script>
<script type="text/javascript" src="../../assets/script/merch.js"></script>
</body>
</html>

15
styleguide/typography/index.html
View file

@ -10,16 +10,21 @@
<body>
<header>
<img src="../assets/image/logo_eventname_glow.svg" style="height: 200px; width: fit-content"/>
<img src="../assets/image/logo_eventname_glow.svg" class="header-image"
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."/>
</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="info"></i>Overview</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=""><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="../generator"><i data-icon="info"></i>Image Generator</a></li>
</ul>
</nav>
<main>
@ -88,9 +93,7 @@
</div>
</main>
</div>
<script>
</script>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
</body>
</html>