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

Run prettier
All checks were successful
/ build (push) Successful in 12s
Details

Browse source
This commit is contained in:
kritzl 2025-03-03 16:46:05 +01:00
commit 155d47222e
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
20 changed files with 5172 additions and 4003 deletions
Download patch file Download diff file Expand all files Collapse all files

122
styleguide/assets/script/generator.js
View file

@ -1,90 +1,92 @@
let can = document.createElement("canvas"); let can = document.createElement("canvas");
let ctx = can.getContext('2d'); let ctx = can.getContext("2d");
let result; let result;
const downloadButton = document.querySelector('#download'); const downloadButton = document.querySelector("#download");
function filterImage(svgDataUrl, width, height) { function filterImage(svgDataUrl, width, height) {
const filteredImage = new Image(); const filteredImage = new Image();
const resultPreview = document.querySelector('#result_img') const resultPreview = document.querySelector("#result_img");
can.width = width; can.width = width;
can.height = height; can.height = height;
filteredImage.onload = function () { filteredImage.onload = function () {
ctx.drawImage(filteredImage, 0, 0, width, height); ctx.drawImage(filteredImage, 0, 0, width, height);
result = can.toDataURL(); result = can.toDataURL();
downloadButton.disabled = false; downloadButton.disabled = false;
resultPreview.src = result; resultPreview.src = result;
}; };
filteredImage.src = svgDataUrl; filteredImage.src = svgDataUrl;
} }
function loadImage(base64Image) { function loadImage(base64Image) {
const sourceImage = new Image(); const sourceImage = new Image();
const svg = document.querySelector('svg') const svg = document.querySelector("svg");
const svgImage = svg.querySelector('image') const svgImage = svg.querySelector("image");
const sourcePreview = document.querySelector('#source_img') const sourcePreview = document.querySelector("#source_img");
let svgDataUrl; let svgDataUrl;
sourceImage.onload = function () { sourceImage.onload = function () {
let svgWidth = this.width; let svgWidth = this.width;
let svgHeight = this.height; let svgHeight = this.height;
if (this.height > 1000) { if (this.height > 1000) {
svgHeight = 1000; svgHeight = 1000;
svgWidth = 1000 * this.width / this.height; svgWidth = (1000 * this.width) / this.height;
} }
svg.setAttribute("height", svgHeight); svg.setAttribute("height", svgHeight);
svg.setAttribute("width", svgWidth); svg.setAttribute("width", svgWidth);
let svgString = (new XMLSerializer).serializeToString(svg); let svgString = new XMLSerializer().serializeToString(svg);
svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString); svgDataUrl = "data:image/svg+xml," + encodeURIComponent(svgString);
filterImage(svgDataUrl, this.width, this.height); filterImage(svgDataUrl, this.width, this.height);
}; };
sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image; sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
} }
function handleFileSelect(e) { function handleFileSelect(e) {
const files = e.target.files; const files = e.target.files;
if (!files || !files.length) return; if (!files || !files.length) return;
const file = files[0]; const file = files[0];
if (!file.type.match('image.*')) return; if (!file.type.match("image.*")) return;
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (readerEvent) => { reader.onload = (readerEvent) => {
loadImage(readerEvent.target.result); loadImage(readerEvent.target.result);
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
document.querySelector('#file_input').addEventListener('change', handleFileSelect, false); document
.querySelector("#file_input")
.addEventListener("change", handleFileSelect, false);
function downloadURI(_uri, _name) { function downloadURI(_uri, _name) {
let link = document.createElement("a"); let link = document.createElement("a");
link.download = 'distortedImageEH22.png'; link.download = "distortedImageEH22.png";
link.href = result; link.href = result;
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
delete link; delete link;
} }
downloadButton.addEventListener('click', downloadURI); downloadButton.addEventListener("click", downloadURI);
(async () => { (async () => {
let exampleImageBlob = await fetch("../assets/image/example_cat.jpg") let exampleImageBlob = await fetch("../assets/image/example_cat.jpg").then(
.then(r => r.blob()); (r) => r.blob(),
);
let dataUrl = await new Promise(resolve => { let dataUrl = await new Promise((resolve) => {
let reader = new FileReader(); let reader = new FileReader();
reader.onload = () => resolve(reader.result); reader.onload = () => resolve(reader.result);
reader.readAsDataURL(exampleImageBlob); reader.readAsDataURL(exampleImageBlob);
}); });
loadImage(dataUrl); loadImage(dataUrl);
})() })();

328
styleguide/assets/script/merch.js
View file

@ -1,197 +1,229 @@
const sizes = [ const sizes = [
"XXS", "XS", "S", "M", "L", "XL", "2XL", "3XL", "4XL", "5XL", "6XL" "XXS",
] "XS",
"S",
"M",
"L",
"XL",
"2XL",
"3XL",
"4XL",
"5XL",
"6XL",
];
function selectCell(e) { function selectCell(e) {
const cell = e.target; const cell = e.target;
const value = parseFloat(cell.dataset.val); const value = parseFloat(cell.dataset.val);
const col = cell.dataset.col; const col = cell.dataset.col;
const dimension = cell.dataset.dim; const dimension = cell.dataset.dim;
document.querySelectorAll('td.val:not(.empty)').forEach(match => { document.querySelectorAll("td.val:not(.empty)").forEach((match) => {
match.dataset.diff = ''; match.dataset.diff = "";
match.classList.remove('highlighted') match.classList.remove("highlighted");
match.classList.remove('currentDimension') match.classList.remove("currentDimension");
if (match.dataset.dim === dimension) { if (match.dataset.dim === dimension) {
match.classList.add('currentDimension') match.classList.add("currentDimension");
const diff = parseFloat(match.dataset.val) - value; const diff = parseFloat(match.dataset.val) - value;
match.dataset.diff = diff > 0 ? `+${diff}` : diff; match.dataset.diff = diff > 0 ? `+${diff}` : diff;
if (match.dataset.dim === 'A') match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})` if (match.dataset.dim === "A")
if (match.dataset.dim === 'B') match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})` match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`;
if (match.dataset.dim === 'C') match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})` if (match.dataset.dim === "B")
} match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`;
}); if (match.dataset.dim === "C")
document.querySelectorAll('td.dimension').forEach(match => { match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`;
match.classList.remove('currentDimension'); }
if (match.innerHTML === dimension) { });
match.classList.add('currentDimension'); document.querySelectorAll("td.dimension").forEach((match) => {
} match.classList.remove("currentDimension");
}); if (match.innerHTML === dimension) {
match.classList.add("currentDimension");
}
});
cell.classList.add('highlighted') cell.classList.add("highlighted");
} }
function selectCellPlus(e) { function selectCellPlus(e) {
e.stopPropagation(); e.stopPropagation();
const cell = e.target; const cell = e.target;
const group = cell.parentElement.parentElement; const group = cell.parentElement.parentElement;
const col = cell.dataset.col; const col = cell.dataset.col;
if (cell.classList.contains('highlighted') && !cell.classList.contains('currentDimension')) { if (
selectCell(e); cell.classList.contains("highlighted") &&
return; !cell.classList.contains("currentDimension")
) {
selectCell(e);
return;
}
const values = {};
group.querySelectorAll(`td[data-col='${col}']`).forEach((match) => {
values[match.dataset.dim] = parseFloat(match.dataset.val);
});
document.querySelectorAll("td.val:not(.empty)").forEach((match) => {
match.dataset.diff = "";
match.classList.remove("highlighted");
match.classList.remove("currentDimension");
if (match.dataset.dim in values) {
const diff = parseFloat(match.dataset.val) - values[match.dataset.dim];
match.dataset.diff = diff > 0 ? `+${diff}` : diff;
if (match.dataset.dim === "A")
match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`;
if (match.dataset.dim === "B")
match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`;
if (match.dataset.dim === "C")
match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`;
} }
});
document.querySelectorAll("td.dimension").forEach((match) => {
match.classList.remove("currentDimension");
});
const values = {} group.querySelectorAll(`td[data-col='${col}']`).forEach((match) => {
group.querySelectorAll(`td[data-col='${col}']`).forEach(match => { match.classList.add("highlighted");
values[match.dataset.dim] = parseFloat(match.dataset.val); });
})
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
match.dataset.diff = '';
match.classList.remove('highlighted')
match.classList.remove('currentDimension')
if (match.dataset.dim in values) {
const diff = parseFloat(match.dataset.val) - values[match.dataset.dim];
match.dataset.diff = diff > 0 ? `+${diff}` : diff;
if (match.dataset.dim === 'A') match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`
if (match.dataset.dim === 'B') match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`
if (match.dataset.dim === 'C') match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`
}
});
document.querySelectorAll('td.dimension').forEach(match => {
match.classList.remove('currentDimension');
});
group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
match.classList.add('highlighted')
})
} }
function hoverCell(e) { function hoverCell(e) {
const cell = e.target; const cell = e.target;
const group = cell.parentElement.parentElement; const group = cell.parentElement.parentElement;
const col = cell.dataset.col; const col = cell.dataset.col;
const dim = cell.dataset.dim; const dim = cell.dataset.dim;
hoverOff() hoverOff();
document.querySelectorAll('table > thead > tr > th').forEach(match => { document.querySelectorAll("table > thead > tr > th").forEach((match) => {
if (match.dataset.col === col) match.classList.add('hover') if (match.dataset.col === col) match.classList.add("hover");
}); });
group.querySelectorAll('td.dimension').forEach(match => { group.querySelectorAll("td.dimension").forEach((match) => {
if (match.innerText === dim) match.classList.add('hover') if (match.innerText === dim) match.classList.add("hover");
}); });
group.querySelectorAll('td:not(.dimension), th').forEach(match => { group.querySelectorAll("td:not(.dimension), th").forEach((match) => {
match.classList.add('hover') match.classList.add("hover");
}); });
} }
function hoverOff() { function hoverOff() {
document.querySelectorAll('table > thead > tr > th').forEach(match => { document.querySelectorAll("table > thead > tr > th").forEach((match) => {
match.classList.remove('hover') match.classList.remove("hover");
}); });
document.querySelectorAll('td.dimension, td, th').forEach(match => { document.querySelectorAll("td.dimension, td, th").forEach((match) => {
match.classList.remove('hover') match.classList.remove("hover");
}); });
} }
const typeList = new Set() const typeList = new Set();
const fitList = new Set() const fitList = new Set();
document.querySelectorAll('tbody').forEach(tbody => { document.querySelectorAll("tbody").forEach((tbody) => {
if (tbody.dataset.from) { if (tbody.dataset.from) {
const source = document.querySelector(`tbody#${tbody.dataset.from}`) const source = document.querySelector(`tbody#${tbody.dataset.from}`);
if (!source) { if (!source) {
console.log(`tbody with ID '${tbody.dataset.from}' not found.`); console.log(`tbody with ID '${tbody.dataset.from}' not found.`);
return; return;
}
const name = tbody.querySelector('tr th').innerHTML;
tbody.replaceChildren()
tbody.insertAdjacentHTML("afterbegin", source.innerHTML)
tbody.querySelector('tr th').innerHTML = name;
delete tbody.dataset.from;
tbody.dataset.type = source.dataset.type;
tbody.dataset.fit = source.dataset.fit;
} }
typeList.add(tbody.dataset.type); const name = tbody.querySelector("tr th").innerHTML;
fitList.add(tbody.dataset.fit); tbody.replaceChildren();
tbody.insertAdjacentHTML("afterbegin", source.innerHTML);
tbody.querySelector("tr th").innerHTML = name;
delete tbody.dataset.from;
tbody.dataset.type = source.dataset.type;
tbody.dataset.fit = source.dataset.fit;
}
typeList.add(tbody.dataset.type);
fitList.add(tbody.dataset.fit);
}); });
// build filter // build filter
const filterTypeElement = document.querySelector('#filterType'); const filterTypeElement = document.querySelector("#filterType");
typeList.forEach(type => { typeList.forEach((type) => {
filterTypeElement.insertAdjacentHTML('beforeend', `<label> filterTypeElement.insertAdjacentHTML(
"beforeend",
`<label>
<input type="checkbox" value="${type}" checked> <input type="checkbox" value="${type}" checked>
${type} ${type}
</label>`) </label>`,
}) );
const filterFitElement = document.querySelector('#filterFit'); });
fitList.forEach(fit => { const filterFitElement = document.querySelector("#filterFit");
filterFitElement.insertAdjacentHTML('beforeend', `<label> fitList.forEach((fit) => {
filterFitElement.insertAdjacentHTML(
"beforeend",
`<label>
<input type="checkbox" value="${fit}" checked> <input type="checkbox" value="${fit}" checked>
${fit} ${fit}
</label>`) </label>`,
}) );
});
const filterType = new Set(typeList); const filterType = new Set(typeList);
const filterFit = new Set(fitList); const filterFit = new Set(fitList);
function filter() { function filter() {
document.querySelectorAll(`tbody`).forEach(match => { document.querySelectorAll(`tbody`).forEach((match) => {
match.classList.toggle('filtered', !filterType.has(match.dataset.type) || !filterFit.has(match.dataset.fit)); match.classList.toggle(
}) "filtered",
!filterType.has(match.dataset.type) || !filterFit.has(match.dataset.fit),
);
});
} }
filterTypeElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { filterTypeElement
checkbox.addEventListener('change', (e) => { .querySelectorAll('input[type="checkbox"]')
if (checkbox.checked) { .forEach((checkbox) => {
filterType.add(checkbox.value) checkbox.addEventListener("change", (e) => {
} else { if (checkbox.checked) {
filterType.delete(checkbox.value) filterType.add(checkbox.value);
} } else {
filter(); filterType.delete(checkbox.value);
}
filter();
}); });
}); });
filterFitElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { filterFitElement
checkbox.addEventListener('change', (e) => { .querySelectorAll('input[type="checkbox"]')
if (checkbox.checked) { .forEach((checkbox) => {
filterFit.add(checkbox.value) checkbox.addEventListener("change", (e) => {
} else { if (checkbox.checked) {
filterFit.delete(checkbox.value) filterFit.add(checkbox.value);
} } else {
filterFit.delete(checkbox.value);
}
filter(); filter();
}); });
}); });
document.querySelectorAll('td.val').forEach(cell => { document.querySelectorAll("td.val").forEach((cell) => {
const rowTitle = cell.parentElement.querySelector('th'); const rowTitle = cell.parentElement.querySelector("th");
cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1]; cell.dataset.col =
cell.addEventListener('pointerenter', hoverCell); sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
cell.addEventListener('pointerleave', hoverOff); cell.addEventListener("pointerenter", hoverCell);
cell.addEventListener("pointerleave", hoverOff);
}); });
// initialize table // initialize table
document.querySelectorAll('td.val:not(.empty)').forEach(cell => { document.querySelectorAll("td.val:not(.empty)").forEach((cell) => {
cell.dataset.val = cell.innerText; cell.dataset.val = cell.innerText;
cell.dataset.diff = ''; cell.dataset.diff = "";
cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML; cell.dataset.dim = cell.parentElement.querySelector("td.dimension").innerHTML;
cell.addEventListener('click', selectCellPlus); cell.addEventListener("click", selectCellPlus);
}); });
// disable select on click outside value cell // disable select on click outside value cell
document.addEventListener('click', e => { document.addEventListener("click", (e) => {
document.querySelectorAll('td.val:not(.empty)').forEach(match => { document.querySelectorAll("td.val:not(.empty)").forEach((match) => {
match.dataset.diff = ''; match.dataset.diff = "";
match.classList.remove('highlighted') match.classList.remove("highlighted");
match.classList.remove('currentDimension') match.classList.remove("currentDimension");
}); });
document.querySelectorAll('td.dimension').forEach(match => { document.querySelectorAll("td.dimension").forEach((match) => {
match.classList.remove('currentDimension'); match.classList.remove("currentDimension");
}); });
}); });

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

@ -1,19 +1,18 @@
document.querySelector('nav > button')?.addEventListener('click', (e) => { document.querySelector("nav > button")?.addEventListener("click", (e) => {
document.querySelector('nav').classList.toggle('visible'); document.querySelector("nav").classList.toggle("visible");
}) });
document.querySelectorAll('.toggleTheme')?.forEach( document.querySelectorAll(".toggleTheme")?.forEach((element) =>
element => element.addEventListener('click', (e) => { element.addEventListener("click", (e) => {
const newTheme = element.dataset.theme; const newTheme = element.dataset.theme;
applyTheme(newTheme); applyTheme(newTheme);
} }),
)
); );
document.querySelector('#themeDark').addEventListener('change', (e) => { document.querySelector("#themeDark").addEventListener("change", (e) => {
setTheme(e.target.checked ? 'dark' : 'system'); setTheme(e.target.checked ? "dark" : "system");
}) });
document.querySelector('#themeLight').addEventListener('change', (e) => { document.querySelector("#themeLight").addEventListener("change", (e) => {
setTheme(e.target.checked ? 'light' : 'system'); setTheme(e.target.checked ? "light" : "system");
}) });

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

@ -129,14 +129,23 @@
--color-accent-1: var(--color-dark-accent-1); --color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2); --color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3); --color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: 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)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.125em var(--color-primary))
drop-shadow(0 0 0.25em var(--color-primary));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
drop-shadow(0 0 0.125em var(--color-secondary))
drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; filter 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)) drop-shadow(0 0 0.125em var(--color-primary)); border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
drop-shadow(0 0 0.125em var(--color-primary));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
} }
.dark .light-only { .dark .light-only {
display: none; display: none;
@ -163,8 +172,9 @@
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; 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-400)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
} }
@ -190,14 +200,23 @@
--color-accent-1: var(--color-dark-accent-1); --color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2); --color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3); --color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: 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)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.125em var(--color-primary))
drop-shadow(0 0 0.25em var(--color-primary));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
drop-shadow(0 0 0.125em var(--color-secondary))
drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; filter 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)) drop-shadow(0 0 0.125em var(--color-primary)); border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
drop-shadow(0 0 0.125em var(--color-primary));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
} }
html .light-only { html .light-only {
display: none; display: none;
@ -223,8 +242,9 @@
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; 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-400)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
} }
@ -257,8 +277,9 @@
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; 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-400)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
} }
@ -282,14 +303,23 @@
--color-accent-1: var(--color-dark-accent-1); --color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2); --color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3); --color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: 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)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.125em var(--color-primary))
drop-shadow(0 0 0.25em var(--color-primary));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
drop-shadow(0 0 0.125em var(--color-secondary))
drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; filter 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)) drop-shadow(0 0 0.125em var(--color-primary)); border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
drop-shadow(0 0 0.125em var(--color-primary));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
} }
html:has(#themeDark:checked) .light-only { html:has(#themeDark:checked) .light-only {
display: none; display: none;
@ -385,12 +415,18 @@ body {
font-family: "Athiti", ui-sans, sans-serif; font-family: "Athiti", ui-sans, sans-serif;
} }
h1, .h1, h1,
h2, .h2, .h1,
h3, .h3, h2,
h4, .h4, .h2,
h5, .h5, h3,
h6, .h6 { .h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: "Argon Glow", ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
margin: 1rem 0; margin: 1rem 0;
@ -496,7 +532,9 @@ a {
color: var(--color-accent-1); color: var(--color-accent-1);
text-decoration: underline; text-decoration: underline;
} }
a:hover, a:active, a:focus { a:hover,
a:active,
a:focus {
color: var(--color-accent-3); color: var(--color-accent-3);
text-decoration: none; text-decoration: none;
} }
@ -504,7 +542,9 @@ a:visited {
color: var(--color-accent-2); color: var(--color-accent-2);
text-decoration: underline; text-decoration: underline;
} }
a:visited:hover, a:visited:active, a:visited:focus { a:visited:hover,
a:visited:active,
a:visited:focus {
color: var(--color-accent-3); color: var(--color-accent-3);
text-decoration: none; text-decoration: none;
} }

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

@ -145,16 +145,24 @@ $mobile-navigation-height: 4rem;
--color-accent-2: var(--color-dark-accent-2); --color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3); --color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: 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)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.125em var(--color-primary))
drop-shadow(0 0 0.25em var(--color-primary));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
drop-shadow(0 0 0.125em var(--color-secondary))
drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; 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)) drop-shadow(0 0 0.125em var(--color-primary));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary));
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
drop-shadow(0 0 0.125em var(--color-primary));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
.light-only { .light-only {
display: none; display: none;
@ -184,13 +192,13 @@ $mobile-navigation-height: 4rem;
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; 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-400)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
.light-only { .light-only {
display: initial; display: initial;
} }
@ -237,91 +245,91 @@ $mobile-navigation-height: 4rem;
// fonts // fonts
@font-face { @font-face {
font-family: 'Athiti'; font-family: "Athiti";
font-weight: 700; font-weight: 700;
src: url('../font/athiti/Athiti-Bold.woff2') format('woff2'); src: url("../font/athiti/Athiti-Bold.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Athiti'; font-family: "Athiti";
font-weight: 600; font-weight: 600;
src: url('../font/athiti/Athiti-SemiBold.woff2') format('woff2'); src: url("../font/athiti/Athiti-SemiBold.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Athiti'; font-family: "Athiti";
font-weight: 500; font-weight: 500;
src: url('../font/athiti/Athiti-Medium.woff2') format('woff2'); src: url("../font/athiti/Athiti-Medium.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Athiti'; font-family: "Athiti";
font-weight: 400; font-weight: 400;
src: url('../font/athiti/Athiti-Regular.woff2') format('woff2'); src: url("../font/athiti/Athiti-Regular.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Athiti'; font-family: "Athiti";
font-weight: 300; font-weight: 300;
src: url('../font/athiti/Athiti-Light.woff2') format('woff2'); src: url("../font/athiti/Athiti-Light.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Athiti'; font-family: "Athiti";
font-weight: 200; font-weight: 200;
src: url('../font/athiti/Athiti-ExtraLight.woff2') format('woff2'); src: url("../font/athiti/Athiti-ExtraLight.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Departure Mono'; font-family: "Departure Mono";
src: url('../font/departuremono/DepartureMono-Regular.woff2') format('woff2'); src: url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Argon Glow'; font-family: "Argon Glow";
font-weight: 100; font-weight: 100;
src: url('../font/argonglow/ArgonGlow-Thin.woff2') format('woff2'); src: url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Argon Glow'; font-family: "Argon Glow";
font-weight: 200; font-weight: 200;
src: url('../font/argonglow/ArgonGlow-ExtraLight.woff2') format('woff2'); src: url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Argon Glow'; font-family: "Argon Glow";
font-weight: 300; font-weight: 300;
src: url('../font/argonglow/ArgonGlow-Light.woff2') format('woff2'); src: url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Argon Glow'; font-family: "Argon Glow";
font-weight: 400; font-weight: 400;
src: url('../font/argonglow/ArgonGlow-Regular.woff2') format('woff2'); src: url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Argon Glow'; font-family: "Argon Glow";
font-weight: 500; font-weight: 500;
src: url('../font/argonglow/ArgonGlow-Medium.woff2') format('woff2'); src: url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Argon Glow'; font-family: "Argon Glow";
font-weight: 600; font-weight: 600;
src: url('../font/argonglow/ArgonGlow-SemiBold.woff2') format('woff2'); src: url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Argon Glow'; font-family: "Argon Glow";
font-weight: 700; font-weight: 700;
src: url('../font/argonglow/ArgonGlow-Bold.woff2') format('woff2'); src: url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Argon Glow'; font-family: "Argon Glow";
src: url('../font/argonglow/ArgonGlow-VariableVF.woff2') format('woff2'); src: url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
font-weight: 100 900; font-weight: 100 900;
} }
@ -334,22 +342,26 @@ $mobile-navigation-height: 4rem;
body { body {
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-foreground); color: var(--color-foreground);
font-family: 'Athiti', ui-sans, sans-serif; font-family: "Athiti", ui-sans, sans-serif;
} }
h1, .h1, h1,
h2, .h2, .h1,
h3, .h3, h2,
h4, .h4, .h2,
h5, .h5, h3,
h6, .h6, .h3,
{ h4,
font-family: 'Argon Glow', ui-sans, sans-serif; .h4,
h5,
.h5,
h6,
.h6 {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
margin: 1rem 0; margin: 1rem 0;
} }
h1, h1,
.h1 { .h1 {
font-size: var(--text-5xl); font-size: var(--text-5xl);
@ -387,7 +399,7 @@ h6,
} }
pre { pre {
font-family: 'Departure Mono', ui-monospace, monospace; font-family: "Departure Mono", ui-monospace, monospace;
font-size: 0.8em; font-size: 0.8em;
display: block; display: block;
padding: 1rem; padding: 1rem;
@ -404,7 +416,7 @@ pre {
code, code,
.code { .code {
font-family: 'Departure Mono', ui-monospace, monospace; font-family: "Departure Mono", ui-monospace, monospace;
font-size: 0.8em; font-size: 0.8em;
background-color: var(--color-shade-2); background-color: var(--color-shade-2);
border-radius: 0.2em; border-radius: 0.2em;
@ -415,7 +427,6 @@ table {
width: fit-content; width: fit-content;
border-collapse: collapse; border-collapse: collapse;
th, th,
td { td {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
@ -493,7 +504,7 @@ figure {
object-position: center; object-position: center;
&.glitch { &.glitch {
filter: url('glitch.svg#glitch'); filter: url("glitch.svg#glitch");
} }
} }
} }
@ -506,6 +517,6 @@ img {
margin: 0 auto; margin: 0 auto;
&.glitch { &.glitch {
filter: url('glitch.svg#glitch'); filter: url("glitch.svg#glitch");
} }
} }

41
styleguide/assets/style/icons.scss
View file

@ -1,4 +1,3 @@
i[data-icon] { i[data-icon] {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
@ -8,7 +7,7 @@ i[data-icon] {
box-sizing: content-box; box-sizing: content-box;
&::before { &::before {
content: ''; content: "";
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -18,39 +17,39 @@ i[data-icon] {
background-color: currentColor; background-color: currentColor;
} }
&[data-icon='arrow-left']::before { &[data-icon="arrow-left"]::before {
mask-image: url('../icon/arrow_left.svg'); mask-image: url("../icon/arrow_left.svg");
} }
&[data-icon='arrow-up']::before { &[data-icon="arrow-up"]::before {
mask-image: url('../icon/arrow_up.svg'); mask-image: url("../icon/arrow_up.svg");
} }
&[data-icon='arrow-right']::before { &[data-icon="arrow-right"]::before {
mask-image: url('../icon/arrow_right.svg'); mask-image: url("../icon/arrow_right.svg");
} }
&[data-icon='arrow-down']::before { &[data-icon="arrow-down"]::before {
mask-image: url('../icon/arrow_down.svg'); mask-image: url("../icon/arrow_down.svg");
} }
&[data-icon='info']::before { &[data-icon="info"]::before {
mask-image: url('../icon/info.svg'); mask-image: url("../icon/info.svg");
} }
&[data-icon='home']::before { &[data-icon="home"]::before {
mask-image: url('../icon/home.svg'); mask-image: url("../icon/home.svg");
} }
&[data-icon='menu-small']::before { &[data-icon="menu-small"]::before {
mask-image: url('../icon/menu_small.svg'); mask-image: url("../icon/menu_small.svg");
} }
&[data-icon='light']::before { &[data-icon="light"]::before {
mask-image: url('../icon/lightbulb.svg'); mask-image: url("../icon/lightbulb.svg");
} }
&[data-icon='warning']::before { &[data-icon="warning"]::before {
mask-image: url('../icon/warning.svg'); mask-image: url("../icon/warning.svg");
} }
} }

12
styleguide/assets/style/merch.css
View file

@ -86,13 +86,13 @@ table td.val:not(.empty).hover {
table td.val:not(.empty):hover { table td.val:not(.empty):hover {
background-color: var(--color-shade-3); background-color: var(--color-shade-3);
} }
table td.val.highlighted[data-dim=A] { table td.val.highlighted[data-dim="A"] {
background-color: rgb(96, 165, 249); background-color: rgb(96, 165, 249);
} }
table td.val.highlighted[data-dim=B] { table td.val.highlighted[data-dim="B"] {
background-color: rgb(211, 129, 247); background-color: rgb(211, 129, 247);
} }
table td.val.highlighted[data-dim=C] { table td.val.highlighted[data-dim="C"] {
background-color: rgb(255, 121, 117); background-color: rgb(255, 121, 117);
} }
table td.val.currentDimension:not(.hover) { table td.val.currentDimension:not(.hover) {
@ -165,7 +165,7 @@ div.filterBox > div label {
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
} }
div.filterBox > div label input[type=checkbox] { div.filterBox > div label input[type="checkbox"] {
appearance: none; appearance: none;
background-color: var(--color-shade-1); background-color: var(--color-shade-1);
margin: 0; margin: 0;
@ -178,7 +178,7 @@ div.filterBox > div label input[type=checkbox] {
position: relative; position: relative;
font-family: inherit; font-family: inherit;
} }
div.filterBox > div label input[type=checkbox]::before { div.filterBox > div label input[type="checkbox"]::before {
position: absolute; position: absolute;
inset: 0; inset: 0;
content: "x"; content: "x";
@ -188,7 +188,7 @@ div.filterBox > div label input[type=checkbox]::before {
transform: scale(0); transform: scale(0);
transition: 120ms transform ease-in-out; 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); transform: scale(1);
} }

30
styleguide/assets/style/merch.scss
View file

@ -37,7 +37,7 @@ table {
} }
} }
tr:first-child > th[colspan='15'] { tr:first-child > th[colspan="15"] {
background-color: var(--color-shade-2); background-color: var(--color-shade-2);
color: var(--color-dark-foreground); color: var(--color-dark-foreground);
} }
@ -86,7 +86,7 @@ table {
td { td {
&.val { &.val {
font-family: 'Departure Mono', ui-monospace, monospace; font-family: "Departure Mono", ui-monospace, monospace;
&.hover { &.hover {
background-color: transparent; background-color: transparent;
@ -105,15 +105,15 @@ table {
} }
&.highlighted { &.highlighted {
&[data-dim='A'] { &[data-dim="A"] {
background-color: rgb(96, 165, 249); background-color: rgb(96, 165, 249);
} }
&[data-dim='B'] { &[data-dim="B"] {
background-color: rgb(211, 129, 247); background-color: rgb(211, 129, 247);
} }
&[data-dim='C'] { &[data-dim="C"] {
background-color: rgb(255, 121, 117); background-color: rgb(255, 121, 117);
} }
} }
@ -122,7 +122,7 @@ table {
background-color: var(--color-shade-2); background-color: var(--color-shade-2);
} }
&:not([data-diff=''])::after { &:not([data-diff=""])::after {
content: attr(data-diff); content: attr(data-diff);
display: block; display: block;
font-size: 0.8em; font-size: 0.8em;
@ -135,8 +135,8 @@ table {
margin-top: -0.25rem; margin-top: -0.25rem;
} }
&[data-diff='']::after { &[data-diff=""]::after {
content: ''; content: "";
display: block; display: block;
font-size: 0.8em; font-size: 0.8em;
background-color: transparent; background-color: transparent;
@ -155,9 +155,9 @@ table {
} }
&.currentDimension::after { &.currentDimension::after {
content: '>'; content: ">";
/*color: var(--color-secondary);*/ /*color: var(--color-secondary);*/
font-family: 'Departure Mono', ui-monospace, monospace; font-family: "Departure Mono", ui-monospace, monospace;
position: relative; position: relative;
right: calc(-0.5rem - 0.5ch); right: calc(-0.5rem - 0.5ch);
margin-left: -1ch; margin-left: -1ch;
@ -172,7 +172,7 @@ div.filterBox {
margin: 2rem 0; margin: 2rem 0;
padding: 1rem; padding: 1rem;
position: relative; position: relative;
font-family: 'Departure Mono', ui-monospace, monospace; font-family: "Departure Mono", ui-monospace, monospace;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
column-gap: 4rem; column-gap: 4rem;
@ -180,7 +180,7 @@ div.filterBox {
width: fit-content; width: fit-content;
&::before { &::before {
content: 'filter'; content: "filter";
position: absolute; position: absolute;
top: -0.6lh; top: -0.6lh;
background-color: var(--color-background); background-color: var(--color-background);
@ -198,7 +198,7 @@ div.filterBox {
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
input[type='checkbox'] { input[type="checkbox"] {
appearance: none; appearance: none;
background-color: var(--color-shade-1); background-color: var(--color-shade-1);
margin: 0; margin: 0;
@ -214,7 +214,7 @@ div.filterBox {
&::before { &::before {
position: absolute; position: absolute;
inset: 0; inset: 0;
content: 'x'; content: "x";
text-align: center; text-align: center;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 0.7; line-height: 0.7;
@ -228,4 +228,4 @@ div.filterBox {
} }
} }
} }
} }

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

@ -129,14 +129,23 @@
--color-accent-1: var(--color-dark-accent-1); --color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2); --color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3); --color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: 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)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.125em var(--color-primary))
drop-shadow(0 0 0.25em var(--color-primary));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
drop-shadow(0 0 0.125em var(--color-secondary))
drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; filter 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)) drop-shadow(0 0 0.125em var(--color-primary)); border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
drop-shadow(0 0 0.125em var(--color-primary));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
} }
.dark .light-only { .dark .light-only {
display: none; display: none;
@ -163,8 +172,9 @@
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; 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-400)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
} }
@ -190,14 +200,23 @@
--color-accent-1: var(--color-dark-accent-1); --color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2); --color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3); --color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: 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)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.125em var(--color-primary))
drop-shadow(0 0 0.25em var(--color-primary));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
drop-shadow(0 0 0.125em var(--color-secondary))
drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; filter 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)) drop-shadow(0 0 0.125em var(--color-primary)); border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
drop-shadow(0 0 0.125em var(--color-primary));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
} }
html .light-only { html .light-only {
display: none; display: none;
@ -223,8 +242,9 @@
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; 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-400)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
} }
@ -257,8 +277,9 @@
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; 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-400)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
} }
@ -282,14 +303,23 @@
--color-accent-1: var(--color-dark-accent-1); --color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2); --color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3); --color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: 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)); --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white))
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); drop-shadow(0 0 0.125em var(--color-primary))
drop-shadow(0 0 0.25em var(--color-primary));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white))
drop-shadow(0 0 0.125em var(--color-secondary))
drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, --transition-glow:
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; filter 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)) drop-shadow(0 0 0.125em var(--color-primary)); border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-secondary)) drop-shadow(0 0 0.125em var(--color-secondary)); --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
drop-shadow(0 0 0.125em var(--color-primary));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
} }
html:has(#themeDark:checked) .light-only { html:has(#themeDark:checked) .light-only {
display: none; display: none;
@ -385,12 +415,18 @@ body {
font-family: "Athiti", ui-sans, sans-serif; font-family: "Athiti", ui-sans, sans-serif;
} }
h1, .h1, h1,
h2, .h2, .h1,
h3, .h3, h2,
h4, .h4, .h2,
h5, .h5, h3,
h6, .h6 { .h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: "Argon Glow", ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
margin: 1rem 0; margin: 1rem 0;
@ -496,7 +532,9 @@ a {
color: var(--color-accent-1); color: var(--color-accent-1);
text-decoration: underline; text-decoration: underline;
} }
a:hover, a:active, a:focus { a:hover,
a:active,
a:focus {
color: var(--color-accent-3); color: var(--color-accent-3);
text-decoration: none; text-decoration: none;
} }
@ -504,7 +542,9 @@ a:visited {
color: var(--color-accent-2); color: var(--color-accent-2);
text-decoration: underline; text-decoration: underline;
} }
a:visited:hover, a:visited:active, a:visited:focus { a:visited:hover,
a:visited:active,
a:visited:focus {
color: var(--color-accent-3); color: var(--color-accent-3);
text-decoration: none; text-decoration: none;
} }
@ -553,31 +593,31 @@ i[data-icon]::before {
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: currentColor; background-color: currentColor;
} }
i[data-icon][data-icon=arrow-left]::before { i[data-icon][data-icon="arrow-left"]::before {
mask-image: url("../icon/arrow_left.svg"); mask-image: url("../icon/arrow_left.svg");
} }
i[data-icon][data-icon=arrow-up]::before { i[data-icon][data-icon="arrow-up"]::before {
mask-image: url("../icon/arrow_up.svg"); mask-image: url("../icon/arrow_up.svg");
} }
i[data-icon][data-icon=arrow-right]::before { i[data-icon][data-icon="arrow-right"]::before {
mask-image: url("../icon/arrow_right.svg"); mask-image: url("../icon/arrow_right.svg");
} }
i[data-icon][data-icon=arrow-down]::before { i[data-icon][data-icon="arrow-down"]::before {
mask-image: url("../icon/arrow_down.svg"); mask-image: url("../icon/arrow_down.svg");
} }
i[data-icon][data-icon=info]::before { i[data-icon][data-icon="info"]::before {
mask-image: url("../icon/info.svg"); mask-image: url("../icon/info.svg");
} }
i[data-icon][data-icon=home]::before { i[data-icon][data-icon="home"]::before {
mask-image: url("../icon/home.svg"); mask-image: url("../icon/home.svg");
} }
i[data-icon][data-icon=menu-small]::before { i[data-icon][data-icon="menu-small"]::before {
mask-image: url("../icon/menu_small.svg"); mask-image: url("../icon/menu_small.svg");
} }
i[data-icon][data-icon=light]::before { i[data-icon][data-icon="light"]::before {
mask-image: url("../icon/lightbulb.svg"); mask-image: url("../icon/lightbulb.svg");
} }
i[data-icon][data-icon=warning]::before { i[data-icon][data-icon="warning"]::before {
mask-image: url("../icon/warning.svg"); mask-image: url("../icon/warning.svg");
} }
@ -617,10 +657,14 @@ body header #backToWiki > img {
body header #backToWiki:hover > img { body header #backToWiki:hover > img {
transform: scale(1.05); transform: scale(1.05);
} }
body h1, body .h1, body h1,
body h2, body .h2, body .h1,
body h3, body .h3, body h2,
body h4, body .h4 { body .h2,
body h3,
body .h3,
body h4,
body .h4 {
filter: var(--text-glow-primary); filter: var(--text-glow-primary);
} }
body > div { body > div {
@ -706,10 +750,12 @@ body > div nav ul li.link-back {
body > div nav ul li.active { body > div nav ul li.active {
background-color: var(--color-shade-2); background-color: var(--color-shade-2);
} }
body > div nav ul li.link-back a, body > div nav ul li.active a { body > div nav ul li.link-back a,
body > div nav ul li.active a {
border-color: var(--color-shade-4); border-color: var(--color-shade-4);
} }
body > div nav ul li > a, body > div nav ul li label { body > div nav ul li > a,
body > div nav ul li label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
@ -724,26 +770,60 @@ body > div nav ul li > a, body > div nav ul li label {
transition-duration: 400ms; transition-duration: 400ms;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
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, body > div nav ul li label:visited, body > div nav ul li label:focus, body > div nav ul li label:active, body > div nav ul li label:hover { 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,
body > div nav ul li label:visited,
body > div nav ul li label:focus,
body > div nav ul li label:active,
body > div nav ul li label:hover {
color: var(--color-foreground); color: var(--color-foreground);
} }
body > div nav ul li:hover, body > div nav ul li:focus-within { body > div nav ul li:hover,
body > div nav ul li:focus-within {
background-color: transparent; background-color: transparent;
} }
body > div nav ul li:hover a, body > div nav ul li:hover label, body > div nav ul li:focus-within a, body > div nav ul li:focus-within label { body > div nav ul li:hover a,
body > div nav ul li:hover label,
body > div nav ul li:focus-within a,
body > div nav ul li:focus-within label {
border: solid 0.1em var(--color-glow-primary); border: solid 0.1em var(--color-glow-primary);
background-color: transparent; background-color: transparent;
filter: var(--filter-glow-primary); filter: var(--filter-glow-primary);
transition: var(--transition-glow); transition: var(--transition-glow);
} }
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:hover label:visited, body > div nav ul li:hover label:focus, body > div nav ul li:hover label:active, body > div nav ul li:hover label: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, body > div nav ul li:focus-within label:visited, body > div nav ul li:focus-within label:focus, body > div nav ul li:focus-within label:active, body > div nav ul li:focus-within label:hover { 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:hover label:visited,
body > div nav ul li:hover label:focus,
body > div nav ul li:hover label:active,
body > div nav ul li:hover label: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,
body > div nav ul li:focus-within label:visited,
body > div nav ul li:focus-within label:focus,
body > div nav ul li:focus-within label:active,
body > div nav ul li:focus-within label:hover {
color: var(--color-glow-primary); color: var(--color-glow-primary);
} }
body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-back a { body > div nav ul li:hover.link-back a,
body > div nav ul li:focus-within.link-back a {
border: solid 0.1em var(--color-glow-secondary); border: solid 0.1em var(--color-glow-secondary);
filter: var(--filter-glow-secondary); filter: var(--filter-glow-secondary);
} }
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 { 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); color: var(--color-glow-secondary);
} }
body > div nav ul li:not(.themeToggle) i[data-icon] { body > div nav ul li:not(.themeToggle) i[data-icon] {
@ -779,15 +859,23 @@ body > div main {
background-color: var(--color-background); background-color: var(--color-background);
} }
a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited { a.a-regular,
a.a-regular:hover,
a.a-regular:active,
a.a-regular:focus,
a.a-regular:visited {
color: var(--color-accent-1); color: var(--color-accent-1);
text-decoration: underline; text-decoration: underline;
} }
a.a-hover, a.a-hover:visited { a.a-hover,
a.a-hover:visited {
color: var(--color-accent-3); color: var(--color-accent-3);
text-decoration: none; text-decoration: none;
} }
a.a-visited, a.a-visited:hover, a.a-visited:active, a.a-visited:focus { a.a-visited,
a.a-visited:hover,
a.a-visited:active,
a.a-visited:focus {
color: var(--color-accent-2); color: var(--color-accent-2);
text-decoration: underline; text-decoration: underline;
} }
@ -873,11 +961,15 @@ main > div.generator img {
width: 400px; width: 400px;
height: 300px; height: 300px;
object-fit: contain; 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)); 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 > div.generator i { main > div.generator i {
font-size: 3em; 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)); 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 { .swatch-grid {

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

@ -1,5 +1,5 @@
@import 'base'; @import "base";
@import 'icons'; @import "icons";
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -40,10 +40,14 @@ body {
} }
} }
h1, .h1, h1,
h2, .h2, .h1,
h3, .h3, h2,
h4, .h4, { .h2,
h3,
.h3,
h4,
.h4 {
filter: var(--text-glow-primary); filter: var(--text-glow-primary);
} }
@ -143,7 +147,8 @@ body {
} }
} }
> a, label { > a,
label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
@ -171,7 +176,8 @@ body {
&:focus-within { &:focus-within {
background-color: transparent; background-color: transparent;
a, label { a,
label {
border: solid 0.1em var(--color-glow-primary); border: solid 0.1em var(--color-glow-primary);
background-color: transparent; background-color: transparent;
filter: var(--filter-glow-primary); filter: var(--filter-glow-primary);
@ -242,7 +248,6 @@ body {
} }
a { a {
&.a-regular, &.a-regular,
&.a-regular:hover, &.a-regular:hover,
&.a-regular:active, &.a-regular:active,
@ -294,7 +299,7 @@ a {
} }
&::before { &::before {
content: ''; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 1rem; border-radius: 1rem;
@ -344,24 +349,26 @@ pre,
} }
} }
main > div.generator { main > div.generator {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
align-items: center; align-items: center;
img { img {
width: 400px; width: 400px;
height: 300px; height: 300px;
object-fit: contain; 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)); 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 { i {
font-size: 3em; 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)); 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));
} }
} }
@ -399,7 +406,7 @@ main > div.generator {
} }
span { span {
font-family: 'Departure Mono', ui-monospace, monospace; font-family: "Departure Mono", ui-monospace, monospace;
color: var(--color-foreground); color: var(--color-foreground);
line-height: 1.5; line-height: 1.5;
} }
@ -408,113 +415,113 @@ main > div.generator {
} }
.glow-16-primary { .glow-16-primary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur16Primary') filter: url("glows.svg#textBlur16Primary");
} }
.glow-18-primary { .glow-18-primary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur18Primary') filter: url("glows.svg#textBlur18Primary");
} }
.glow-24-primary { .glow-24-primary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur24Primary') filter: url("glows.svg#textBlur24Primary");
} }
.glow-32-primary { .glow-32-primary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur32Primary') filter: url("glows.svg#textBlur32Primary");
} }
.glow-48-primary { .glow-48-primary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 48px; font-size: 48px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur48Primary') filter: url("glows.svg#textBlur48Primary");
} }
.glow-72-primary { .glow-72-primary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 72px; font-size: 72px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur72Primary') filter: url("glows.svg#textBlur72Primary");
} }
.glow-160-primary { .glow-160-primary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 160px; font-size: 160px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur160Primary') filter: url("glows.svg#textBlur160Primary");
} }
.glow-16-secondary { .glow-16-secondary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur16Secondary') filter: url("glows.svg#textBlur16Secondary");
} }
.glow-18-secondary { .glow-18-secondary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur18Secondary') filter: url("glows.svg#textBlur18Secondary");
} }
.glow-24-secondary { .glow-24-secondary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur24Secondary') filter: url("glows.svg#textBlur24Secondary");
} }
.glow-32-secondary { .glow-32-secondary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur32Secondary') filter: url("glows.svg#textBlur32Secondary");
} }
.glow-48-secondary { .glow-48-secondary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 48px; font-size: 48px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur48Secondary') filter: url("glows.svg#textBlur48Secondary");
} }
.glow-72-secondary { .glow-72-secondary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 72px; font-size: 72px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur72Secondary') filter: url("glows.svg#textBlur72Secondary");
} }
.glow-160-secondary { .glow-160-secondary {
font-family: 'Argon Glow', ui-sans, sans-serif; font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 160px; font-size: 160px;
color: var(--color-white); color: var(--color-white);
filter: url('glows.svg#textBlur160Secondary') filter: url("glows.svg#textBlur160Secondary");
} }

900
styleguide/colors/index.html
View file

@ -1,374 +1,650 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<script> <script>
const setTheme = (theme) => { const setTheme = (theme) => {
theme ??= localStorage.theme || "system"; theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light"; document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark"; document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme; localStorage.theme = theme;
}; };
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
setTheme(); setTheme();
}); });
</script> </script>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css"> <link
rel="stylesheet"
type="text/css"
href="../assets/style/styleguide.css"
/>
<title>Color Guide</title> <title>Color Guide</title>
</head> </head>
<body> <body>
<header> <header>
<a href="/" id="backToWiki"> <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: <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> />
</a>
</header> </header>
<div> <div>
<nav> <nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button> <button aria-label="Open Navigation">
<ul> <i data-icon="menu-small"></i>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li> </button>
<li><a href="../"><i data-icon="home"></i>Overview</a></li> <ul>
<li class="active"><a href=""><i data-icon="info"></i>Colors</a></li> <li class="link-back">
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li> <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li> </li>
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li> <li>
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li> <a href="../"><i data-icon="home"></i>Overview</a>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li> </li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li> <li class="active">
<li id="themeToggleDark" class="themeToggle"> <a href=""><i data-icon="info"></i>Colors</a>
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeDark"> <li>
<i data-icon="light"></i> <a href="../typography"><i data-icon="info"></i>Typography</a>
</label> </li>
</li> <li>
<li id="themeToggleLight" class="themeToggle"> <a href="../iconography"><i data-icon="info"></i>Iconography</a>
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeLight"> <li>
<i data-icon="light"></i> <a href="../logo"><i data-icon="info"></i>Logo</a>
</label> </li>
</li> <li>
</ul> <a href="../glow"><i data-icon="info"></i>Glow</a>
</nav> </li>
<main> <li>
<div class="alert"> <a href="../demopage"><i data-icon="info"></i>Demopage</a>
<i data-icon="warning"></i> </li>
<p> <li>
<strong>Work in progress</strong> <a href="../generator"><i data-icon="info"></i>Image Generator</a>
This style guide is still under development.<br> </li>
Not all resources may be available yet, explanations and examples may be missing and things may <li id="themeToggleDark" class="themeToggle">
change without notice. <input
</p> id="themeDark"
</div> type="checkbox"
<h1>Color Guide</h1> aria-label="Switch between dark and light mode"
<p> />
The design consists of two sets of colors: lightmode and darkmode. Each set consists of the same number <label for="themeDark">
of colors, each of which has its own function. At the end of the page, one can find an overview of all <i data-icon="light"></i>
defined colors for quick lockup. Read on for the functions of each color. </label>
</p> </li>
<p> <li id="themeToggleLight" class="themeToggle">
The fore- and background colors are chosen for good contrast and are the same but swapped for light- and <input
darkmode. Most backgrounds should use the background color and most texts should use the foreground id="themeLight"
color. In some cases, more subtelty is needed: type="checkbox"
</p> aria-label="Switch between dark and light mode"
<ul> />
<li> <label for="themeLight">
If visual distinction through containers, boxes or similar is needed, the background shades can be <i data-icon="light"></i>
used to use a slightly lighter background color (in case of darkmode) or a slightly darker one (in </label>
case of lightmode). Preferably, each shade should corespond to a layer of nesting, but if desired, </li>
one can also mix-and-match, as long as the background for the main content is always the regular </ul>
background color. </nav>
</li> <main>
<li> <div class="alert">
For more subtle text, e.g. in a footer, subtitle, etc. one can use the foreground shades to achieve <i data-icon="warning"></i>
this effect. To ensure a high enough contrast between fore- and background, these colors should not <p>
be used in front of the background shades mentioned above, other than for very small amounts of <strong>Work in progress</strong>
texts like headings and alike. This style guide is still under development.<br />
</li> Not all resources may be available yet, explanations and examples
</ul> may be missing and things may change without notice.
<p> </p>
Additionally, there are also colors for various design elements. The accent colors can be used for </div>
whatever one desires, but are especially intended for use in hyperlinks like this: <h1>Color Guide</h1>
</p> <p>
<table> The design consists of two sets of colors: lightmode and darkmode.
<caption>Overview of link highlighting</caption> Each set consists of the same number of colors, each of which has its
<tr> own function. At the end of the page, one can find an overview of all
<th scope="row">Regular Link:</th> defined colors for quick lockup. Read on for the functions of each
<td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td> color.
</tr> </p>
<tr> <p>
<th scope="row">Hover/Focus/Active Link:</th> The fore- and background colors are chosen for good contrast and are
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td> the same but swapped for light- and darkmode. Most backgrounds should
</tr> use the background color and most texts should use the foreground
<tr> color. In some cases, more subtelty is needed:
<th scope="row">Visited Link:</th> </p>
<td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td> <ul>
</tr> <li>
</table> If visual distinction through containers, boxes or similar is
<p> needed, the background shades can be used to use a slightly lighter
Other than that, there are two more colors: the error and the success color. Intended for anything background color (in case of darkmode) or a slightly darker one (in
regarding user-feedback, they should tell someone that something is a critical action, has some positive case of lightmode). Preferably, each shade should corespond to a
or negativ meaning or progresses something in some way or form. layer of nesting, but if desired, one can also mix-and-match, as
</p> long as the background for the main content is always the regular
background color.
</li>
<li>
For more subtle text, e.g. in a footer, subtitle, etc. one can use
the foreground shades to achieve this effect. To ensure a high
enough contrast between fore- and background, these colors should
not be used in front of the background shades mentioned above, other
than for very small amounts of texts like headings and alike.
</li>
</ul>
<p>
Additionally, there are also colors for various design elements. The
accent colors can be used for whatever one desires, but are especially
intended for use in hyperlinks like this:
</p>
<table>
<caption>
Overview of link highlighting
</caption>
<tr>
<th scope="row">Regular Link:</th>
<td>
<a class="a-regular" href="">https://eh22.easterhegg.eu/</a>
</td>
</tr>
<tr>
<th scope="row">Hover/Focus/Active Link:</th>
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
</tr>
<tr>
<th scope="row">Visited Link:</th>
<td>
<a class="a-visited" href="">https://eh22.easterhegg.eu/</a>
</td>
</tr>
</table>
<p>
Other than that, there are two more colors: the error and the success
color. Intended for anything regarding user-feedback, they should tell
someone that something is a critical action, has some positive or
negativ meaning or progresses something in some way or form.
</p>
<h2>Digital Media</h2> <h2>Digital Media</h2>
<div class="layout-column"> <div class="layout-column">
<div class="dark swatch-grid"> <div class="dark swatch-grid">
<h3>Darkmode</h3> <h3>Darkmode</h3>
<section aria-labelledby="label-dark-fore-background"> <section aria-labelledby="label-dark-fore-background">
<span id="label-dark-fore-background">Fore- &amp; Background</span> <span id="label-dark-fore-background"
>Fore- &amp; Background</span
>
<div aria-labelledby="label-dark-swatch-foreground" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div> aria-labelledby="label-dark-swatch-foreground"
<span id="label-dark-swatch-foreground">#f2f0f5</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-foreground)"
></div>
<span id="label-dark-swatch-foreground">#f2f0f5</span>
</div>
<div aria-labelledby="label-dark-swatch-background" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-background)"></div> aria-labelledby="label-dark-swatch-background"
<span id="label-dark-swatch-background">#0c011f</span> class="swatch-container"
</div> >
</section> <div
class="swatch"
style="--swatch-color: var(--color-dark-background)"
></div>
<span id="label-dark-swatch-background">#0c011f</span>
</div>
</section>
<section aria-labelledby="label-dark-shades"> <section aria-labelledby="label-dark-shades">
<span id="label-dark-shades">Background Shades</span> <span id="label-dark-shades">Background Shades</span>
<div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div> aria-labelledby="label-dark-swatch-shade-1"
<span id="label-dark-swatch-shade-1">#180736</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-shade-1)"
></div>
<span id="label-dark-swatch-shade-1">#180736</span>
</div>
<div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div> aria-labelledby="label-dark-swatch-shade-2"
<span id="label-dark-swatch-shade-2">#26114B</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-shade-2)"
></div>
<span id="label-dark-swatch-shade-2">#26114B</span>
</div>
<div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div> aria-labelledby="label-dark-swatch-shade-3"
<span id="label-dark-swatch-shade-3">#371F60</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-shade-3)"
></div>
<span id="label-dark-swatch-shade-3">#371F60</span>
</div>
<div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div> aria-labelledby="label-dark-swatch-shade-4"
<span id="label-dark-swatch-shade-4">#4B3176</span> class="swatch-container"
</div> >
</section> <div
class="swatch"
style="--swatch-color: var(--color-dark-shade-4)"
></div>
<span id="label-dark-swatch-shade-4">#4B3176</span>
</div>
</section>
<section aria-labelledby="label-dark-texts"> <section aria-labelledby="label-dark-texts">
<span id="label-dark-texts">Text Shades</span> <span id="label-dark-texts">Text Shades</span>
<div aria-labelledby="label-dark-swatch-text-1" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-text-1)"></div> aria-labelledby="label-dark-swatch-text-1"
<span id="label-dark-swatch-text-1">#b2a0cb</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-text-1)"
></div>
<span id="label-dark-swatch-text-1">#b2a0cb</span>
</div>
<div aria-labelledby="label-dark-swatch-text-2" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-text-2)"></div> aria-labelledby="label-dark-swatch-text-2"
<span id="label-dark-swatch-text-2">#957eb5</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-text-2)"
></div>
<span id="label-dark-swatch-text-2">#957eb5</span>
</div>
<div aria-labelledby="label-dark-swatch-text-3" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-text-3)"></div> aria-labelledby="label-dark-swatch-text-3"
<span id="label-dark-swatch-text-3">#7a60a0</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-text-3)"
></div>
<span id="label-dark-swatch-text-3">#7a60a0</span>
</div>
<div aria-labelledby="label-dark-swatch-text-4" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-text-4)"></div> aria-labelledby="label-dark-swatch-text-4"
<span id="label-dark-swatch-text-4">#61468b</span> class="swatch-container"
</div> >
</section> <div
class="swatch"
style="--swatch-color: var(--color-dark-text-4)"
></div>
<span id="label-dark-swatch-text-4">#61468b</span>
</div>
</section>
<section aria-labelledby="label-dark-primary-secondary"> <section aria-labelledby="label-dark-primary-secondary">
<span id="label-dark-primary-secondary">Primary &amp; Secondary</span> <span id="label-dark-primary-secondary"
>Primary &amp; Secondary</span
>
<div aria-labelledby="label-dark-swatch-primary" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div> aria-labelledby="label-dark-swatch-primary"
<span id="label-dark-swatch-primary">#c6257d</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-primary)"
></div>
<span id="label-dark-swatch-primary">#c6257d</span>
</div>
<div aria-labelledby="label-dark-swatch-secondary" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div> aria-labelledby="label-dark-swatch-secondary"
<span id="label-dark-swatch-secondary">#4dadd8</span> class="swatch-container"
</div> >
</section> <div
class="swatch"
style="--swatch-color: var(--color-dark-secondary)"
></div>
<span id="label-dark-swatch-secondary">#4dadd8</span>
</div>
</section>
<section aria-labelledby="label-dark-error-success"> <section aria-labelledby="label-dark-error-success">
<span id="label-dark-error-success">Error &amp; Success</span> <span id="label-dark-error-success">Error &amp; Success</span>
<div aria-labelledby="label-dark-swatch-error" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-error)"></div> aria-labelledby="label-dark-swatch-error"
<span id="label-dark-swatch-error">#bb2626</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-error)"
></div>
<span id="label-dark-swatch-error">#bb2626</span>
</div>
<div aria-labelledby="label-dark-swatch-success" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-success)"></div> aria-labelledby="label-dark-swatch-success"
<span id="label-dark-swatch-success">#54aa18</span> class="swatch-container"
</div> >
</section> <div
class="swatch"
style="--swatch-color: var(--color-dark-success)"
></div>
<span id="label-dark-swatch-success">#54aa18</span>
</div>
</section>
<section aria-labelledby="label-dark-accents"> <section aria-labelledby="label-dark-accents">
<span id="label-dark-accents">Accents</span> <span id="label-dark-accents">Accents</span>
<div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div> aria-labelledby="label-dark-swatch-accent-1"
<span id="label-dark-swatch-accent-1">#60a5f9</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-accent-1)"
></div>
<span id="label-dark-swatch-accent-1">#60a5f9</span>
</div>
<div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div> aria-labelledby="label-dark-swatch-accent-2"
<span id="label-dark-swatch-accent-2">#d381f7</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-dark-accent-2)"
></div>
<span id="label-dark-swatch-accent-2">#d381f7</span>
</div>
<div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div> aria-labelledby="label-dark-swatch-accent-3"
<span id="label-dark-swatch-accent-3">#ff7975</span> class="swatch-container"
</div> >
</section> <div
</div> class="swatch"
style="--swatch-color: var(--color-dark-accent-3)"
></div>
<span id="label-dark-swatch-accent-3">#ff7975</span>
</div>
</section>
</div>
<div class="light swatch-grid"> <div class="light swatch-grid">
<h3>Lightmode</h3> <h3>Lightmode</h3>
<section aria-labelledby="label-light-fore-background"> <section aria-labelledby="label-light-fore-background">
<span id="label-light-fore-background">Fore- &amp; Background</span> <span id="label-light-fore-background"
>Fore- &amp; Background</span
>
<div aria-labelledby="label-light-swatch-foreground" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div> aria-labelledby="label-light-swatch-foreground"
<span id="label-light-swatch-foreground">#0c011f</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-foreground)"
></div>
<span id="label-light-swatch-foreground">#0c011f</span>
</div>
<div aria-labelledby="label-light-swatch-background" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-background)"></div> aria-labelledby="label-light-swatch-background"
<span id="label-light-swatch-background">#f2f0f5</span> class="swatch-container"
</div> >
</section> <div
class="swatch"
style="--swatch-color: var(--color-light-background)"
></div>
<span id="label-light-swatch-background">#f2f0f5</span>
</div>
</section>
<section aria-labelledby="label-light-shades"> <section aria-labelledby="label-light-shades">
<span id="label-light-shades">Background Shades</span> <span id="label-light-shades">Background Shades</span>
<div aria-labelledby="label-light-swatch-shade-1" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div> aria-labelledby="label-light-swatch-shade-1"
<span id="label-light-swatch-shade-1">#d1c6e0</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-shade-1)"
></div>
<span id="label-light-swatch-shade-1">#d1c6e0</span>
</div>
<div aria-labelledby="label-light-swatch-shade-2" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div> aria-labelledby="label-light-swatch-shade-2"
<span id="label-light-swatch-shade-2">#b2a0cb</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-shade-2)"
></div>
<span id="label-light-swatch-shade-2">#b2a0cb</span>
</div>
<div aria-labelledby="label-light-swatch-shade-3" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div> aria-labelledby="label-light-swatch-shade-3"
<span id="label-light-swatch-shade-3">#957eb5</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-shade-3)"
></div>
<span id="label-light-swatch-shade-3">#957eb5</span>
</div>
<div aria-labelledby="label-light-swatch-shade-4" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div> aria-labelledby="label-light-swatch-shade-4"
<span id="label-light-swatch-shade-4">#7a60a0</span> class="swatch-container"
</div> >
</section> <div
class="swatch"
style="--swatch-color: var(--color-light-shade-4)"
></div>
<span id="label-light-swatch-shade-4">#7a60a0</span>
</div>
</section>
<section aria-labelledby="label-light-texts"> <section aria-labelledby="label-light-texts">
<span id="label-light-texts">Text Shades</span> <span id="label-light-texts">Text Shades</span>
<div aria-labelledby="label-light-swatch-text-1" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-text-1)"></div> aria-labelledby="label-light-swatch-text-1"
<span id="label-light-swatch-text-1">#26114b</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-text-1)"
></div>
<span id="label-light-swatch-text-1">#26114b</span>
</div>
<div aria-labelledby="label-light-swatch-text-2" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-text-2)"></div> aria-labelledby="label-light-swatch-text-2"
<span id="label-light-swatch-text-2">#371f60</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-text-2)"
></div>
<span id="label-light-swatch-text-2">#371f60</span>
</div>
<div aria-labelledby="label-light-swatch-text-3" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-text-3)"></div> aria-labelledby="label-light-swatch-text-3"
<span id="label-light-swatch-text-3">#4b3176</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-text-3)"
></div>
<span id="label-light-swatch-text-3">#4b3176</span>
</div>
<div aria-labelledby="label-light-swatch-text-4" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-text-4)"></div> aria-labelledby="label-light-swatch-text-4"
<span id="label-light-swatch-text-4">#61468b</span> class="swatch-container"
</div> >
</section> <div
class="swatch"
style="--swatch-color: var(--color-light-text-4)"
></div>
<span id="label-light-swatch-text-4">#61468b</span>
</div>
</section>
<section aria-labelledby="label-light-primary-secondary"> <section aria-labelledby="label-light-primary-secondary">
<span id="label-light-primary-secondary">Primary &amp; Secondary</span> <span id="label-light-primary-secondary"
>Primary &amp; Secondary</span
>
<div aria-labelledby="label-light-swatch-primary" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-primary)"></div> aria-labelledby="label-light-swatch-primary"
<span id="label-light-swatch-primary">#9a0a61</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-primary)"
></div>
<span id="label-light-swatch-primary">#9a0a61</span>
</div>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div> aria-labelledby="label-light-swatch-secondary"
<span id="label-light-swatch-secondary">#167fac</span> class="swatch-container"
</div> >
</section> <div
class="swatch"
style="--swatch-color: var(--color-light-secondary)"
></div>
<span id="label-light-swatch-secondary">#167fac</span>
</div>
</section>
<section aria-labelledby="label-light-error-success"> <section aria-labelledby="label-light-error-success">
<span id="label-light-error-success">Error &amp; Success</span> <span id="label-light-error-success">Error &amp; Success</span>
<div aria-labelledby="label-light-swatch-error" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-error)"></div> aria-labelledby="label-light-swatch-error"
<span id="label-light-swatch-error">#b21010</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-error)"
></div>
<span id="label-light-swatch-error">#b21010</span>
</div>
<div aria-labelledby="label-light-swatch-success" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-success)"></div> aria-labelledby="label-light-swatch-success"
<span id="label-light-swatch-success">#47990f</span> class="swatch-container"
</div> >
</section> <div
class="swatch"
style="--swatch-color: var(--color-light-success)"
></div>
<span id="label-light-swatch-success">#47990f</span>
</div>
</section>
<section aria-labelledby="label-light-accents"> <section aria-labelledby="label-light-accents">
<span id="label-light-accents">Accents</span> <span id="label-light-accents">Accents</span>
<div aria-labelledby="label-light-swatch-accent-1" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-accent-1)"></div> aria-labelledby="label-light-swatch-accent-1"
<span id="label-light-swatch-accent-1">#303ec0</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-accent-1)"
></div>
<span id="label-light-swatch-accent-1">#303ec0</span>
</div>
<div aria-labelledby="label-light-swatch-accent-2" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-accent-2)"></div> aria-labelledby="label-light-swatch-accent-2"
<span id="label-light-swatch-accent-2">#6c366c</span> class="swatch-container"
</div> >
<div
class="swatch"
style="--swatch-color: var(--color-light-accent-2)"
></div>
<span id="label-light-swatch-accent-2">#6c366c</span>
</div>
<div aria-labelledby="label-light-swatch-accent-3" class="swatch-container"> <div
<div class="swatch" style="--swatch-color: var(--color-light-accent-3)"></div> aria-labelledby="label-light-swatch-accent-3"
<span id="label-light-swatch-accent-3">#932f0a</span> class="swatch-container"
</div> >
</section> <div
</div> class="swatch"
style="--swatch-color: var(--color-light-accent-3)"
></div>
<span id="label-light-swatch-accent-3">#932f0a</span>
</div>
</section>
</div>
</div>
<h2>Printing</h2>
<p>
Our primary and secondary colors are also defined for CMYK printing:
</p>
<div class="swatch-grid">
<section aria-labelledby="label-light-primary-secondary">
<span id="label-cmyk-primary-secondary">CMYK Colors</span>
<div
aria-labelledby="label-light-swatch-primary"
class="swatch-container"
>
<div
class="swatch"
style="--swatch-color: var(--color-cmyk-primary)"
></div>
<span id="label-cmyk-swatch-primary">0/94/6/0</span>
</div> </div>
<h2>Printing</h2> <div
<p> aria-labelledby="label-light-swatch-secondary"
Our primary and secondary colors are also defined for CMYK printing: class="swatch-container"
</p> >
<div
<div class="swatch-grid"> class="swatch"
<section aria-labelledby="label-light-primary-secondary"> style="--swatch-color: var(--color-cmyk-secondary)"
<span id="label-cmyk-primary-secondary">CMYK Colors</span> ></div>
<span id="label-cmyk-swatch-secondary">81/0/10/0</span>
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-cmyk-primary)"></div>
<span id="label-cmyk-swatch-primary">0/94/6/0</span>
</div>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-cmyk-secondary)"></div>
<span id="label-cmyk-swatch-secondary">81/0/10/0</span>
</div>
</section>
</div> </div>
</main> </section>
</div>
</main>
</div> </div>
</body> </body>
</html>
</html>

391
styleguide/demopage/index.html
View file

@ -1,125 +1,196 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<script> <script>
const setTheme = (theme) => { const setTheme = (theme) => {
theme ??= localStorage.theme || "system"; theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light"; document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark"; document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme; localStorage.theme = theme;
}; };
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
setTheme(); setTheme();
}); });
</script> </script>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css"> <link
rel="stylesheet"
type="text/css"
href="../assets/style/styleguide.css"
/>
<title>Demopage</title> <title>Demopage</title>
</head> </head>
<body> <body>
<header> <header>
<a href="/" id="backToWiki"> <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: <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> />
</a>
</header> </header>
<div> <div>
<nav> <nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button> <button aria-label="Open Navigation">
<ul> <i data-icon="menu-small"></i>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li> </button>
<li><a href="../"><i data-icon="home"></i>Overview</a></li> <ul>
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li> <li class="link-back">
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li> <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li> </li>
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li> <li>
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li> <a href="../"><i data-icon="home"></i>Overview</a>
<li class="active"><a href=""><i data-icon="info"></i>Demopage</a></li> </li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li> <li>
<li id="themeToggleDark" class="themeToggle"> <a href="../colors"><i data-icon="info"></i>Colors</a>
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeDark"> <li>
<i data-icon="light"></i> <a href="../typography"><i data-icon="info"></i>Typography</a>
</label> </li>
</li> <li>
<li id="themeToggleLight" class="themeToggle"> <a href="../iconography"><i data-icon="info"></i>Iconography</a>
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeLight"> <li>
<i data-icon="light"></i> <a href="../logo"><i data-icon="info"></i>Logo</a>
</label> </li>
</li> <li>
</ul> <a href="../glow"><i data-icon="info"></i>Glow</a>
</nav> </li>
<main> <li class="active">
<div class="alert"> <a href=""><i data-icon="info"></i>Demopage</a>
<i data-icon="warning"></i> </li>
<p> <li>
<strong>Work in progress</strong> <a href="../generator"><i data-icon="info"></i>Image Generator</a>
This style guide is still under development.<br> </li>
Not all resources may be available yet, explanations and examples may be missing and things may <li id="themeToggleDark" class="themeToggle">
change without notice. <input
</p> id="themeDark"
</div> type="checkbox"
<h1>Demopage</h1> aria-label="Switch between dark and light mode"
<p>This page contains examples for various text-components and fonts, as well as colorpalettes, images, and />
so on. Use can use it to get familiar with the design and as a reference for styling your own content. <label for="themeDark">
</p> <i data-icon="light"></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="light"></i>
</label>
</li>
</ul>
</nav>
<main>
<div class="alert">
<i data-icon="warning"></i>
<p>
<strong>Work in progress</strong>
This style guide is still under development.<br />
Not all resources may be available yet, explanations and examples
may be missing and things may change without notice.
</p>
</div>
<h1>Demopage</h1>
<p>
This page contains examples for various text-components and fonts, as
well as colorpalettes, images, and so on. Use can use it to get
familiar with the design and as a reference for styling your own
content.
</p>
<section> <section>
<h2>Overview of Link-Highlighting</h2> <h2>Overview of Link-Highlighting</h2>
<table> <table>
<tr> <tr>
<th scope="row">Regular Link:</th> <th scope="row">Regular Link:</th>
<td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td> <td>
</tr> <a class="a-regular" href="">https://eh22.easterhegg.eu/</a>
<tr> </td>
<th scope="row">Hover/Focus/Active Link:</th> </tr>
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td> <tr>
</tr> <th scope="row">Hover/Focus/Active Link:</th>
<tr> <td>
<th scope="row">Visited Link:</th> <a class="a-hover" href="">https://eh22.easterhegg.eu/</a>
<td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td> </td>
</tr> </tr>
</table> <tr>
</section> <th scope="row">Visited Link:</th>
<td>
<a class="a-visited" href="">https://eh22.easterhegg.eu/</a>
</td>
</tr>
</table>
</section>
<section> <section>
<h2>Ordered and Unordered Lists</h2> <h2>Ordered and Unordered Lists</h2>
<p>This is just a simple section containing plain text as well as some lists. This way you can get a <p>
feel for how lists fit into their surrounding content. Have a look at this ordered list: We simply This is just a simple section containing plain text as well as some
prefix each item with a one-indexed, right aligned number followed by a dot.</p> lists. This way you can get a feel for how lists fit into their
<ol> surrounding content. Have a look at this ordered list: We simply
<li>Short item no. 1.</li> prefix each item with a one-indexed, right aligned number followed
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over by a dot.
into the next line and therefore moves the next item further down.</li> </p>
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the <ol>
next line, but there is no next item to move.</li> <li>Short item no. 1.</li>
</ol> <li>
<p>But sometimes, the order of items doesn't matter, in that case, we instead put a basic bullet point Long item in the middle. This item is longer then one visual line,
infront of each item:</p> which is why it wraps over into the next line and therefore moves
<ul> the next item further down.
<li>Short item no. 1.</li> </li>
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over <li>
into the next line and therefore moves the next item further down.</li> Long item at the end, which is also longer than one visual line.
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the It also wraps over into the next line, but there is no next item
next line, but there is no next item to move.</li> to move.
</ul> </li>
</section> </ol>
<p>
But sometimes, the order of items doesn't matter, in that case, we
instead put a basic bullet point infront of each item:
</p>
<ul>
<li>Short item no. 1.</li>
<li>
Long item in the middle. This item is longer then one visual line,
which is why it wraps over into the next line and therefore moves
the next item further down.
</li>
<li>
Long item at the end, which is also longer than one visual line.
It also wraps over into the next line, but there is no next item
to move.
</li>
</ul>
</section>
<section> <section>
<h2>Preformatted Text</h2> <h2>Preformatted Text</h2>
<!-- TODO: custom highlighting theme --> <!-- TODO: custom highlighting theme -->
<p>This example doesn't use any syntax highlighting, but one can of course use a highlighting theme to <p>
make it easier to differentiate identifiers and similar. At the current state, we don't recommended This example doesn't use any syntax highlighting, but one can of
a specific highlight-theme, but this might still change.</p> course use a highlighting theme to make it easier to differentiate
<pre area-labelledby="code-positives-description"><code>#include &lt;stdlib.h&gt; identifiers and similar. At the current state, we don't recommended
a specific highlight-theme, but this might still change.
</p>
<pre
area-labelledby="code-positives-description"
><code>#include &lt;stdlib.h&gt;
int *positives(int *numbers, int *size) { int *positives(int *numbers, int *size) {
int new_size = 0; int new_size = 0;
@ -134,45 +205,73 @@ int *positives(int *numbers, int *size) {
*size = new_size; *size = new_size;
return realloc(numbers, sizeof(*numbers) * new_size); return realloc(numbers, sizeof(*numbers) * new_size);
}</code></pre> }</code></pre>
<p>This is a simple function written in C, which removes all negative integers from an array and updates <p>
its element count.</p> This is a simple function written in C, which removes all negative
</section> integers from an array and updates its element count.
</p>
</section>
<section> <section>
<h2>Section With Image</h2> <h2>Section With Image</h2>
<p>When including images in your content, you can opt into applying an SVG filter that adds visual <p>
glitches to the image. This shouldn't be used on images with text or important details, because the When including images in your content, you can opt into applying an
glitches will most likely reduce readability. Let's use the following plain image:</p> SVG filter that adds visual glitches to the image. This shouldn't be
<figure> used on images with text or important details, because the glitches
<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 will most likely reduce readability. Let's use the following plain
image:
</p>
<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
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> />
</figure> <figcaption>
<p>Now, in HTML you could simply specify <code>class="glitch"</code> on the image tag to add the SVG Example image without any distortion applied.
filter dynamically, but this won't render said filter in Apple's Safari, which has been a known </figcaption>
issue for many years. So instead, we also made <a href="../generator">a simple web-tool to apply the </figure>
filter</a> to an image and export it as a PNG. The tool also scales the image down to ensure <p>
that the filter looks similar across all images.</p> Now, in HTML you could simply specify <code>class="glitch"</code> on
<figure> the image tag to add the SVG filter dynamically, but this won't
<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 render said filter in Apple's Safari, which has been a known issue
for many years. So instead, we also made
<a href="../generator">a simple web-tool to apply the filter</a> to
an image and export it as a PNG. The tool also scales the image down
to ensure that the filter looks similar across all images.
</p>
<figure>
<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> />
</figure> <figcaption>Example image with visual glitches applied.</figcaption>
<p>Of course, every image should include an image description. No matter if its a website, social media </figure>
post, or a PDF. Most if not all wordprocessors (this includes Word, LaTeX and Typst) support this in <p>
one way or another.</p> Of course, every image should include an image description. No
<p>We would also prefer it, if no one uses "AI-generated" images. The entire event design was created matter if its a website, social media post, or a PDF. Most if not
through hard work by living beings. No LLM/GenAI was involved in any part of the design processes. all wordprocessors (this includes Word, LaTeX and Typst) support
So we kindly ask you not to use tools which are based on theft, actively harm artist and destroy our this in one way or another.
planet in the process. ("AI-generated" of course does not apply to generative art and similar, but </p>
to LLMs/GenAI.)</p> <p>
</section> We would also prefer it, if no one uses "AI-generated" images. The
</main> entire event design was created through hard work by living beings.
No LLM/GenAI was involved in any part of the design processes. So we
kindly ask you not to use tools which are based on theft, actively
harm artist and destroy our planet in the process. ("AI-generated"
of course does not apply to generative art and similar, but to
LLMs/GenAI.)
</p>
</section>
</main>
</div> </div>
<script src="../assets/script/styleguide.js" type="text/javascript"></script> <script
</body> src="../assets/script/styleguide.js"
type="text/javascript"
</html> ></script>
</body>
</html>

292
styleguide/generator/index.html
View file

@ -1,137 +1,199 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<script> <script>
const setTheme = (theme) => { const setTheme = (theme) => {
theme ??= localStorage.theme || "system"; theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light"; document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark"; document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme; localStorage.theme = theme;
}; };
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
setTheme(); setTheme();
}); });
</script> </script>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css"> <link
rel="stylesheet"
type="text/css"
href="../assets/style/styleguide.css"
/>
<title>Document</title> <title>Document</title>
</head> </head>
<body style="height: 100vh;"> <body style="height: 100vh">
<header> <header>
<a href="/" id="backToWiki"> <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: <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> />
</a>
</header> </header>
<div> <div>
<nav> <nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button> <button aria-label="Open Navigation">
<ul> <i data-icon="menu-small"></i>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li> </button>
<li><a href="../"><i data-icon="home"></i>Overview</a></li> <ul>
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li> <li class="link-back">
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li> <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li> </li>
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li> <li>
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li> <a href="../"><i data-icon="home"></i>Overview</a>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li> </li>
<li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li> <li>
<li id="themeToggleDark" class="themeToggle"> <a href="../colors"><i data-icon="info"></i>Colors</a>
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeDark"> <li>
<i data-icon="light"></i> <a href="../typography"><i data-icon="info"></i>Typography</a>
</label> </li>
</li> <li>
<li id="themeToggleLight" class="themeToggle"> <a href="../iconography"><i data-icon="info"></i>Iconography</a>
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeLight"> <li>
<i data-icon="light"></i> <a href="../logo"><i data-icon="info"></i>Logo</a>
</label> </li>
</li> <li>
</ul> <a href="../glow"><i data-icon="info"></i>Glow</a>
</nav> </li>
<main> <li>
<div class="alert"> <a href="../demopage"><i data-icon="info"></i>Demopage</a>
<i data-icon="warning"></i> </li>
<p> <li class="active">
<strong>Work in progress</strong> <a href=""><i data-icon="info"></i>Image Generator</a>
This style guide is still under development.<br> </li>
Not all resources may be available yet, explanations and examples may be missing and things may <li id="themeToggleDark" class="themeToggle">
change without notice. <input
</p> id="themeDark"
</div> type="checkbox"
<div class="generator"> aria-label="Switch between dark and light mode"
/>
<label for="themeDark">
<i data-icon="light"></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="light"></i>
</label>
</li>
</ul>
</nav>
<main>
<div class="alert">
<i data-icon="warning"></i>
<p>
<strong>Work in progress</strong>
This style guide is still under development.<br />
Not all resources may be available yet, explanations and examples
may be missing and things may change without notice.
</p>
</div>
<div class="generator">
<div>
<input id="file_input" type="file" name="image" accept="image/*" />
</div>
<div> <img id="source_img" src="" />
<input id="file_input" type="file" name="image" accept="image/*"> <i data-icon="arrow-down"></i>
</div> <img id="result_img" src="" />
<img id="source_img" src="" /> <div style="display: none">
<i data-icon="arrow-down"></i> <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<img id="result_img" src="" /> <filter
id="filter0"
color-interpolation-filters="linearRGB"
filterUnits="objectBoundingBox"
primitiveUnits="objectBoundingBox"
>
<feColorMatrix
in="SourceGraphic"
type="saturate"
values="0"
result="bw"
/>
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
<feComponentTransfer in="ltoa" result="ltoa_inverse">
<feFuncA type="table" tableValues="0 1" />
</feComponentTransfer>
<div style="display: none;"> <feConvolveMatrix
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg"> in="ltoa_inverse"
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox" result="pink_edges"
primitiveUnits="objectBoundingBox"> kernelMatrix="-4 0 4 0 0 0 -4 0 4"
<feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" /> />
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" /> <feComponentTransfer in="pink_edges" result="pink">
<feComponentTransfer in="ltoa" result="ltoa_inverse"> <feFuncR type="table" tableValues="0.7765 0" />
<feFuncA type="table" tableValues="0 1" /> <feFuncG type="table" tableValues="0.1451 0" />
</feComponentTransfer> <feFuncB type="table" tableValues="0.4902 0" />
</feComponentTransfer>
<feOffset in="pink" result="pink_shift" dx="-0.002" />
<feConvolveMatrix in="ltoa_inverse" result="pink_edges" <feConvolveMatrix
kernelMatrix="-4 0 4 0 0 0 -4 0 4" /> in="ltoa_inverse"
<feComponentTransfer in="pink_edges" result="pink"> result="cyan_edges"
<feFuncR type="table" tableValues="0.7765 0" /> kernelMatrix="4 0 -4 0 0 0 4 0 -4"
<feFuncG type="table" tableValues="0.1451 0" /> />
<feFuncB type="table" tableValues="0.4902 0" /> <feComponentTransfer in="cyan_edges" result="cyan">
</feComponentTransfer> <feFuncR type="table" tableValues="0.2941 0" />
<feOffset in="pink" result="pink_shift" dx="-0.002" /> <feFuncG type="table" tableValues="0.6784 0" />
<feFuncB type="table" tableValues="0.8471 0" />
</feComponentTransfer>
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges" <feMerge result="pink_cyan_shift">
kernelMatrix="4 0 -4 0 0 0 4 0 -4" /> <feMergeNode in="SourceGraphic" />
<feComponentTransfer in="cyan_edges" result="cyan"> <feMergeNode in="pink_shift" />
<feFuncR type="table" tableValues="0.2941 0" /> <feMergeNode in="cyan_shift" />
<feFuncG type="table" tableValues="0.6784 0" /> </feMerge>
<feFuncB type="table" tableValues="0.8471 0" />
</feComponentTransfer>
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
<feMerge result="pink_cyan_shift"> <feTurbulence
<feMergeNode in="SourceGraphic" /> type="fractalNoise"
<feMergeNode in="pink_shift" /> baseFrequency="0 0.2"
<feMergeNode in="cyan_shift" /> numOctaves="1"
</feMerge> result="noise"
/>
<feDisplacementMap
in="pink_cyan_shift"
in2="noise"
result="distorted_raw"
scale="0.02"
/>
<feOffset in="distorted_raw" result="distorted" />
</filter>
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" /> <g filter="url(#filter0)">
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" /> <image href="" width="100%" height="100%" />
<feOffset in="distorted_raw" result="distorted" /> </g>
</filter> </svg>
</div>
<g filter="url(#filter0)"> <button id="download" disabled>Download Result</button>
<image href="" width="100%" height="100%" /> </div>
</g> </main>
</svg>
</div>
<button id="download" disabled>
Download Result
</button>
</div>
</main>
</div> </div>
<script src="../assets/script/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> <script
</body> src="../assets/script/styleguide.js"
type="text/javascript"
</html> ></script>
</body>
</html>

174
styleguide/glow/index.html
View file

@ -1,79 +1,119 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<script> <script>
const setTheme = (theme) => { const setTheme = (theme) => {
theme ??= localStorage.theme || "system"; theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light"; document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark"; document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme; localStorage.theme = theme;
}; };
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
setTheme(); setTheme();
}); });
</script> </script>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css"> <link
rel="stylesheet"
type="text/css"
href="../assets/style/styleguide.css"
/>
<title>Glow</title> <title>Glow</title>
</head> </head>
<body> <body>
<header> <header>
<a href="/" id="backToWiki"> <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: <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> />
</a>
</header> </header>
<div> <div>
<nav> <nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button> <button aria-label="Open Navigation">
<ul> <i data-icon="menu-small"></i>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li> </button>
<li><a href="../"><i data-icon="home"></i>Overview</a></li> <ul>
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li> <li class="link-back">
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li> <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li> </li>
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li> <li>
<li class="active"><a href=""><i data-icon="info"></i>Glow</a></li> <a href="../"><i data-icon="home"></i>Overview</a>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li> </li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li> <li>
<li id="themeToggleDark" class="themeToggle"> <a href="../colors"><i data-icon="info"></i>Colors</a>
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeDark"> <li>
<i data-icon="light"></i> <a href="../typography"><i data-icon="info"></i>Typography</a>
</label> </li>
</li> <li>
<li id="themeToggleLight" class="themeToggle"> <a href="../iconography"><i data-icon="info"></i>Iconography</a>
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeLight"> <li>
<i data-icon="light"></i> <a href="../logo"><i data-icon="info"></i>Logo</a>
</label> </li>
</li> <li class="active">
</ul> <a href=""><i data-icon="info"></i>Glow</a>
</nav> </li>
<main> <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 id="themeToggleDark" class="themeToggle">
<input
id="themeDark"
type="checkbox"
aria-label="Switch between dark and light mode"
/>
<label for="themeDark">
<i data-icon="light"></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="light"></i>
</label>
</li>
</ul>
</nav>
<main>
<div class="alert">
<i data-icon="warning"></i>
<p>
<strong>Work in progress</strong>
This style guide is still under development.<br />
Not all resources may be available yet, explanations and examples
may be missing and things may change without notice.
</p>
</div>
<div class="alert"> <h1>Glow</h1>
<i data-icon="warning"></i> <!-- TODO -->
<p> </main>
<strong>Work in progress</strong>
This style guide is still under development.<br>
Not all resources may be available yet, explanations and examples may be missing and things may
change without notice.
</p>
</div>
<h1>Glow</h1>
<!-- TODO -->
</main>
</div> </div>
<script src="../assets/script/styleguide.js" type="text/javascript"></script> <script
</body> src="../assets/script/styleguide.js"
type="text/javascript"
</html> ></script>
</body>
</html>

322
styleguide/iconography/index.html
View file

@ -1,135 +1,211 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<script> <script>
const setTheme = (theme) => { const setTheme = (theme) => {
theme ??= localStorage.theme || "system"; theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light"; document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark"; document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme; localStorage.theme = theme;
}; };
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
setTheme(); setTheme();
}); });
</script> </script>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css"> <link
rel="stylesheet"
type="text/css"
href="../assets/style/styleguide.css"
/>
<title>Iconography</title> <title>Iconography</title>
</head> </head>
<body> <body>
<header> <header>
<a href="/" id="backToWiki"> <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: <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> />
</a>
</header> </header>
<div> <div>
<nav> <nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button> <button aria-label="Open Navigation">
<ul> <i data-icon="menu-small"></i>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li> </button>
<li><a href="../"><i data-icon="home"></i>Overview</a></li> <ul>
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li> <li class="link-back">
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li> <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
<li class="active"><a href=""><i data-icon="info"></i>Iconography</a></li> </li>
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li> <li>
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li> <a href="../"><i data-icon="home"></i>Overview</a>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li> </li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li> <li>
<li id="themeToggleDark" class="themeToggle"> <a href="../colors"><i data-icon="info"></i>Colors</a>
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeDark"> <li>
<i data-icon="light"></i> <a href="../typography"><i data-icon="info"></i>Typography</a>
</label> </li>
</li> <li class="active">
<li id="themeToggleLight" class="themeToggle"> <a href=""><i data-icon="info"></i>Iconography</a>
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeLight"> <li>
<i data-icon="light"></i> <a href="../logo"><i data-icon="info"></i>Logo</a>
</label> </li>
</li> <li>
</ul> <a href="../glow"><i data-icon="info"></i>Glow</a>
</nav> </li>
<main> <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 id="themeToggleDark" class="themeToggle">
<input
id="themeDark"
type="checkbox"
aria-label="Switch between dark and light mode"
/>
<label for="themeDark">
<i data-icon="light"></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="light"></i>
</label>
</li>
</ul>
</nav>
<main>
<div class="alert">
<i data-icon="warning"></i>
<p>
<strong>Work in progress</strong>
This style guide is still under development.<br />
Not all resources may be available yet, explanations and examples
may be missing and things may change without notice.
</p>
</div>
<div class="alert"> <h1>Iconography</h1>
<i data-icon="warning"></i> <p>
<p> Icons can help with conveying meaning or to help with directions. In
<strong>Work in progress</strong> order to fit into the overall theme, we wanted to have a set of icons
This style guide is still under development.<br> that implement the same design characteristics and rules as the
Not all resources may be available yet, explanations and examples may be missing and things may <a href="../logo/">logo, about which you can read more here</a>, and
change without notice. our font,
</p> <a href="../typography/"
</div> >Argon Glow, which we talk about more in the typography</a
>.
<h1>Iconography</h1> </p>
<p>Icons can help with conveying meaning or to help with directions. In order to fit into the overall theme, <p>
we wanted to have a set of icons that implement the same design characteristics and rules as the <a Of course, creating a full iconset would require years of work for
href="../logo/">logo, about which you can read more here</a>, and our font, <a such a small team, which is why we focused on the icons needed for the
href="../typography/">Argon Glow, which we talk about more in the typography</a>.</p> wiki, styleguide and signage on the event. At time of writing that is
<p>Of course, creating a full iconset would require years of work for such a small team, which is why we still roughly sixty icons which we needed to design. They can be found
focused on the icons needed for the wiki, styleguide and signage on the event. At time of writing that in our design repository (not yet published).
is still roughly sixty icons which we needed to design. They can be found in our design repository (not </p>
yet published).</p> <!-- TODO: Link to repository or other form of icon collection -->
<!-- TODO: Link to repository or other form of icon collection --> <p>
<p>Luckily, the rules which the icons needed to adhere to, also meant, that the icons would need to be Luckily, the rules which the icons needed to adhere to, also meant,
fairly simple. Uniform bend-radii (based on a circle, not bezier), a minimum gap distance, and as few that the icons would need to be fairly simple. Uniform bend-radii
lines as possible, all within a limited canvas size. In the end, we decide on an SVG canvas of 600 by (based on a circle, not bezier), a minimum gap distance, and as few
600 units with a uniform grid of 25 units between gridlines. Line width was set to 50 units, and the lines as possible, all within a limited canvas size. In the end, we
same for a 90° bend's radius. Because gaps didn't always align perfectly to the grid, they were chosen decide on an SVG canvas of 600 by 600 units with a uniform grid of 25
to always be at least 50 units and rounded up to the next gridline. Because we are aiming at a units between gridlines. Line width was set to 50 units, and the same
neon-esque tube look, line-caps were set to rounded, adding a semicircle with a radius of 25 units.</p> for a 90° bend's radius. Because gaps didn't always align perfectly to
<figure> the grid, they were chosen to always be at least 50 units and rounded
<svg height="20rem" viewBox="0 0 600 600" version="1.1" id="svg" xml:space="preserve" up to the next gridline. Because we are aiming at a neon-esque tube
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> look, line-caps were set to rounded, adding a semicircle with a radius
<defs> of 25 units.
<style> </p>
g { <figure>
fill: var(--color-foreground); <svg
} height="20rem"
</style> viewBox="0 0 600 600"
</defs> version="1.1"
<g> id="svg"
<path xml:space="preserve"
d="M 213.37856,242.00777 C 227.32944,264.08838 251.97907,278.75 280,278.75 c 1.62235,0 3.23375,-0.0492 4.83265,-0.14613 v -7.5149 C 283.23611,271.19575 281.62471,271.25 280,271.25 c -25.69487,0 -48.1643,-13.57397 -60.70703,-33.93164 l -0.46709,-0.75791 z" /> xmlns="http://www.w3.org/2000/svg"
<path xmlns:svg="http://www.w3.org/2000/svg"
d="m 277.18801,72.132287 c 15.38784,6.470687 32.9424,8.121551 50.32371,3.594275 4.76947,-1.242294 9.3272,-2.898256 13.6409,-4.918946 l -5.67991,-5.67991 c -3.15163,1.331329 -6.43925,2.45223 -9.85162,3.341044 -14.67629,3.822705 -29.46101,2.785261 -42.66223,-2.107307 z" /> >
<g aria-label="α=135°, r=75 px"> <defs>
<path <style>
d="m 196.15111,292.57293 -0.45833,-2.40625 q -0.46875,-2.46875 -2.32292,-2.46875 -1.39583,0 -2.03124,1.14583 -0.80209,1.4375 -0.80209,3.33333 0,2.29167 0.78125,3.38541 0.79167,1.11459 2.05208,1.11459 1.39583,0 2.14583,-2.21875 z m 1.07291,-3.1875 1.03125,-3.05208 h 1.70833 l -2.13541,6.32291 0.41667,2.28124 q 0.0937,0.51042 0.45833,0.9375 0.42708,0.5 0.76041,0.5 h 0.91667 V 298 h -1.14583 q -0.97917,0 -1.85417,-0.875 -0.42708,-0.4375 -0.60416,-1.35416 -0.47917,1.15625 -1.45833,2.06249 -0.45834,0.42709 -1.94792,0.42709 -2.44791,0 -3.63541,-1.58333 -1.21875,-1.63542 -1.21875,-4.5 0,-3.06249 1.32292,-4.49999 1.46875,-1.60416 3.53124,-1.60416 3.23958,0 3.85416,3.31249 z m 6.43749,-1.07291 h 13.35415 v 1.74999 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 18.26039,3.66666 h 3.4375 V 284.3646 l -3.73958,0.75 v -1.91666 l 3.71874,-0.75 h 2.10417 v 13.78123 h 3.43749 V 298 h -8.95832 z m 19.5833,-6.61457 q 1.51042,0.32291 2.35417,1.34374 0.85416,1.02084 0.85416,2.52083 0,2.30208 -1.58333,3.5625 -1.58333,1.26041 -4.49999,1.26041 -0.97917,0 -2.02083,-0.19791 -1.03125,-0.1875 -2.13541,-0.57292 V 295.5 q 0.87499,0.51042 1.91666,0.77084 1.04166,0.26041 2.17708,0.26041 1.97916,0 3.01041,-0.78125 1.04167,-0.78125 1.04167,-2.27083 0,-1.37499 -0.96875,-2.14583 -0.95833,-0.78124 -2.67708,-0.78124 h -1.8125 v -1.72917 h 1.89583 q 1.55208,0 2.375,-0.61458 0.82291,-0.625 0.82291,-1.79167 0,-1.19791 -0.85416,-1.83333 -0.84375,-0.64583 -2.42708,-0.64583 -0.86458,0 -1.85417,0.1875 -0.98958,0.1875 -2.17708,0.58333 v -1.87499 q 1.19792,-0.33334 2.23958,-0.5 1.05209,-0.16667 1.97917,-0.16667 2.39583,0 3.79166,1.09375 1.39583,1.08333 1.39583,2.9375 0,1.29166 -0.73958,2.18749 -0.73958,0.88542 -2.10417,1.22917 z m 7.21874,-7.16666 h 8.26041 v 1.77083 h -6.33333 v 3.8125 q 0.45834,-0.15625 0.91667,-0.22917 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42708 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16666 -1.01041,-0.16667 -2.09375,-0.5 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05208,-0.94792 1.05208,-2.57292 0,-1.62499 -1.05208,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 16.60414,1.0625 q -0.83333,0 -1.40624,0.58333 -0.57292,0.57292 -0.57292,1.40625 0,0.82292 0.57292,1.39583 0.57291,0.5625 1.40624,0.5625 0.83334,0 1.40625,-0.5625 0.57292,-0.57291 0.57292,-1.39583 0,-0.82292 -0.58334,-1.40625 -0.57291,-0.58333 -1.39583,-0.58333 z m 0,-1.34375 q 0.66667,0 1.28125,0.26042 0.61458,0.25 1.0625,0.72916 0.47917,0.46875 0.71875,1.0625 0.23958,0.59375 0.23958,1.28125 0,1.375 -0.96875,2.33333 -0.95833,0.94791 -2.35416,0.94791 -1.40625,0 -2.34375,-0.93749 -0.93749,-0.9375 -0.93749,-2.34375 0,-1.39583 0.95833,-2.36458 0.95833,-0.96875 2.34374,-0.96875 z" /> g {
<path fill: var(--color-foreground);
d="m 194.40111,314.79164 q -0.32291,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83333,-0.0937 -1.625,0 -2.5,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60417,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35417,-0.52083 0.19791,0 0.4375,0.0312 0.23958,0.0208 0.53124,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 17.36456,-10.11456 h 9.99998 v 0.89583 l -5.64582,14.65622 h -2.19791 l 5.31249,-13.78122 h -7.46874 z m 14.12498,0 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.5625,3.90624 -1.56249,1.38542 -4.40624,1.38542 -0.97916,0 -2,-0.16667 -1.01041,-0.16667 -2.09374,-0.5 v -2.11458 q 0.9375,0.51042 1.93749,0.76042 1,0.25 2.11458,0.25 1.80209,0 2.85417,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85417,-0.94792 -0.84374,0 -1.68749,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 21.91663,13.80206 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33334,1.6875 1.33334,4.4375 0,2.74999 -1.33334,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.87499,-3.3125 -0.86459,-1.20833 -2.38542,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38542,-1.19791 0.87499,-1.20833 0.87499,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98957 h -2.26041 l -3.39583,-4.58332 -3.39583,4.58332 h -2.26041 l 4.53124,-6.10415 -4.14583,-5.56249 h 2.26042 l 3.09374,4.15624 3.09375,-4.15624 z" /> }
</g> </style>
<path </defs>
d="m 187.79306,570.26801 h 8.26041 v 1.77083 h -6.33333 v 3.81249 q 0.45834,-0.15625 0.91667,-0.22916 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42709 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16667 -1.01041,-0.16666 -2.09375,-0.49999 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05209,-0.94792 1.05209,-2.57292 0,-1.62499 -1.05209,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.18749 -0.83333,0.1875 -1.70833,0.58334 z m 18.05206,1.38541 q -1.625,0 -2.44791,1.60417 -0.8125,1.59375 -0.8125,4.80207 0,3.19792 0.8125,4.80208 0.82291,1.59375 2.44791,1.59375 1.63541,0 2.44791,-1.59375 0.82292,-1.60416 0.82292,-4.80208 0,-3.20832 -0.82292,-4.80207 -0.8125,-1.60417 -2.44791,-1.60417 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -4,-2.0625 -1.37499,-2.07291 -1.37499,-5.99999 0,-3.93749 1.37499,-5.99999 1.38542,-2.07291 4,-2.07291 z m 17.43747,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04166 1.52083,-1.54166 0.92708,-0.51042 2.20833,-0.51042 2.125,0 3.44791,1.6875 1.33333,1.6875 1.33333,4.43749 0,2.75 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51041 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.31249 -0.86458,-1.20834 -2.38541,-1.20834 -1.52083,0 -2.39583,1.20834 -0.86458,1.19791 -0.86458,3.31249 0,2.11458 0.86458,3.32291 0.875,1.19792 2.39583,1.19792 1.52083,0 2.38541,-1.19792 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98958 h -2.26041 l -3.39583,-4.58333 -3.39583,4.58333 h -2.26041 l 4.53124,-6.10416 -4.14582,-5.56249 h 2.26041 l 3.09374,4.15624 3.09375,-4.15624 z" <g>
transform="rotate(-45)" aria-label="50 px" /> <path
<g aria-label="α=90°, r=50 px"> d="M 213.37856,242.00777 C 227.32944,264.08838 251.97907,278.75 280,278.75 c 1.62235,0 3.23375,-0.0492 4.83265,-0.14613 v -7.5149 C 283.23611,271.19575 281.62471,271.25 280,271.25 c -25.69487,0 -48.1643,-13.57397 -60.70703,-33.93164 l -0.46709,-0.75791 z"
<path />
d="m 281.87513,91.958416 -0.45833,-2.406247 q -0.46875,-2.468746 -2.32291,-2.468746 -1.39583,0 -2.03125,1.145832 -0.80208,1.437498 -0.80208,3.333328 0,2.291663 0.78125,3.385411 0.79166,1.114582 2.05208,1.114582 1.39583,0 2.14583,-2.218747 z m 1.07292,-3.187495 1.03125,-3.052079 h 1.70833 l -2.13542,6.322907 0.41667,2.281246 q 0.0937,0.510416 0.45833,0.937499 0.42708,0.499999 0.76042,0.499999 h 0.91666 v 1.624997 h -1.14583 q -0.97916,0 -1.85416,-0.874998 -0.42709,-0.4375 -0.60417,-1.354165 -0.47916,1.156248 -1.45833,2.062497 -0.45833,0.427083 -1.94791,0.427083 -2.44792,0 -3.63541,-1.583331 -1.21875,-1.635414 -1.21875,-4.499993 0,-3.062495 1.32291,-4.499993 1.46875,-1.604164 3.53125,-1.604164 3.23958,0 3.85416,3.312495 z m 6.43749,-1.072915 h 13.35414 v 1.749997 h -13.35414 z m 0,4.249993 h 13.35414 v 1.770831 h -13.35414 z m 17.9583,5.114575 v -1.916663 q 0.79167,0.374999 1.60417,0.572915 0.8125,0.197917 1.59374,0.197917 2.08334,0 3.17708,-1.395831 1.10417,-1.406248 1.26042,-4.26041 -0.60417,0.895832 -1.53125,1.374997 -0.92708,0.479166 -2.05208,0.479166 -2.33333,0 -3.69791,-1.406247 -1.35417,-1.416665 -1.35417,-3.864578 0,-2.395829 1.41667,-3.843744 1.41666,-1.447914 3.77083,-1.447914 2.69791,0 4.11457,2.072913 1.42708,2.062497 1.42708,5.999991 0,3.677078 -1.74999,5.874991 -1.73958,2.187496 -4.6875,2.187496 -0.79166,0 -1.60416,-0.156249 -0.8125,-0.15625 -1.6875,-0.46875 z m 4.1875,-6.593739 q 1.41666,0 2.23958,-0.968749 0.83333,-0.968748 0.83333,-2.656246 0,-1.67708 -0.83333,-2.645829 -0.82292,-0.979165 -2.23958,-0.979165 -1.41667,0 -2.25,0.979165 -0.82292,0.968749 -0.82292,2.645829 0,1.687498 0.82292,2.656246 0.83333,0.968749 2.25,0.968749 z m 13.82289,-7.249989 q -1.625,0 -2.44791,1.604164 -0.8125,1.593748 -0.8125,4.802076 0,3.197912 0.8125,4.802076 0.82291,1.593747 2.44791,1.593747 1.63542,0 2.44791,-1.593747 0.82292,-1.604164 0.82292,-4.802076 0,-3.208328 -0.82292,-4.802076 -0.81249,-1.604164 -2.44791,-1.604164 z m 0,-1.666664 q 2.61458,0 3.98958,2.072913 1.38541,2.062497 1.38541,5.999991 0,3.927077 -1.38541,5.999991 -1.375,2.062496 -3.98958,2.062496 -2.61458,0 -3.99999,-2.062496 -1.375,-2.072914 -1.375,-5.999991 0,-3.937494 1.375,-5.999991 1.38541,-2.072913 3.99999,-2.072913 z m 12.12498,1.343748 q -0.83333,0 -1.40625,0.583332 -0.57291,0.572916 -0.57291,1.406248 0,0.822916 0.57291,1.395831 0.57292,0.562499 1.40625,0.562499 0.83333,0 1.40625,-0.562499 0.57292,-0.572915 0.57292,-1.395831 0,-0.822915 -0.58334,-1.406248 -0.57291,-0.583332 -1.39583,-0.583332 z m 0,-1.343748 q 0.66667,0 1.28125,0.260416 0.61458,0.25 1.0625,0.729166 0.47916,0.468749 0.71875,1.062498 0.23958,0.593749 0.23958,1.281248 0,1.374998 -0.96875,2.33333 -0.95833,0.947915 -2.35416,0.947915 -1.40625,0 -2.34375,-0.937499 -0.9375,-0.937498 -0.9375,-2.343746 0,-1.395831 0.95834,-2.364579 0.95833,-0.968749 2.34374,-0.968749 z" /> <path
<path d="m 277.18801,72.132287 c 15.38784,6.470687 32.9424,8.121551 50.32371,3.594275 4.76947,-1.242294 9.3272,-2.898256 13.6409,-4.918946 l -5.67991,-5.67991 c -3.15163,1.331329 -6.43925,2.45223 -9.85162,3.341044 -14.67629,3.822705 -29.46101,2.785261 -42.66223,-2.107307 z"
d="m 273.33869,114.17713 q -0.32292,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83334,-0.0937 -1.62499,0 -2.49999,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60416,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35416,-0.52083 0.19792,0 0.4375,0.0312 0.23959,0.0208 0.53125,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 H 275.5991 Z m 0,4.24999 h 13.35415 v 1.77083 H 275.5991 Z m 17.91664,-10.11456 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.56249,3.90624 -1.5625,1.38542 -4.40625,1.38542 -0.97916,0 -1.99999,-0.16667 -1.01042,-0.16666 -2.09375,-0.5 v -2.11458 q 0.9375,0.51042 1.9375,0.76042 0.99999,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85416,-0.94792 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 18.05205,1.38541 q -1.62499,0 -2.44791,1.60416 -0.8125,1.59375 -0.8125,4.80208 0,3.19791 0.8125,4.80208 0.82292,1.59374 2.44791,1.59374 1.63542,0 2.44792,-1.59374 0.82291,-1.60417 0.82291,-4.80208 0,-3.20833 -0.82291,-4.80208 -0.8125,-1.60416 -2.44792,-1.60416 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -3.99999,-2.0625 -1.375,-2.07291 -1.375,-5.99999 0,-3.93749 1.375,-5.99999 1.38541,-2.07291 3.99999,-2.07291 z m 17.43748,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60416,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33333,1.6875 1.33333,4.4375 0,2.74999 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91667,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.3125 -0.86458,-1.20833 -2.38541,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38541,-1.19791 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21875,5.67707 4.4375,5.98957 h -2.26042 l -3.39582,-4.58332 -3.39583,4.58332 h -2.26042 l 4.53125,-6.10415 -4.14583,-5.56249 h 2.26041 l 3.09375,4.15624 3.09374,-4.15624 z" /> />
</g> <g aria-label="α=135°, r=75 px">
<path <path
d="m 557.29687,216.24219 -5.30273,5.30273 5.05078,5.05078 -24.74805,24.74805 -5.05273,-5.05078 -5.30273,5.30273 10.35546,10.35547 35.35547,-35.35547 z" /> d="m 196.15111,292.57293 -0.45833,-2.40625 q -0.46875,-2.46875 -2.32292,-2.46875 -1.39583,0 -2.03124,1.14583 -0.80209,1.4375 -0.80209,3.33333 0,2.29167 0.78125,3.38541 0.79167,1.11459 2.05208,1.11459 1.39583,0 2.14583,-2.21875 z m 1.07291,-3.1875 1.03125,-3.05208 h 1.70833 l -2.13541,6.32291 0.41667,2.28124 q 0.0937,0.51042 0.45833,0.9375 0.42708,0.5 0.76041,0.5 h 0.91667 V 298 h -1.14583 q -0.97917,0 -1.85417,-0.875 -0.42708,-0.4375 -0.60416,-1.35416 -0.47917,1.15625 -1.45833,2.06249 -0.45834,0.42709 -1.94792,0.42709 -2.44791,0 -3.63541,-1.58333 -1.21875,-1.63542 -1.21875,-4.5 0,-3.06249 1.32292,-4.49999 1.46875,-1.60416 3.53124,-1.60416 3.23958,0 3.85416,3.31249 z m 6.43749,-1.07291 h 13.35415 v 1.74999 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 18.26039,3.66666 h 3.4375 V 284.3646 l -3.73958,0.75 v -1.91666 l 3.71874,-0.75 h 2.10417 v 13.78123 h 3.43749 V 298 h -8.95832 z m 19.5833,-6.61457 q 1.51042,0.32291 2.35417,1.34374 0.85416,1.02084 0.85416,2.52083 0,2.30208 -1.58333,3.5625 -1.58333,1.26041 -4.49999,1.26041 -0.97917,0 -2.02083,-0.19791 -1.03125,-0.1875 -2.13541,-0.57292 V 295.5 q 0.87499,0.51042 1.91666,0.77084 1.04166,0.26041 2.17708,0.26041 1.97916,0 3.01041,-0.78125 1.04167,-0.78125 1.04167,-2.27083 0,-1.37499 -0.96875,-2.14583 -0.95833,-0.78124 -2.67708,-0.78124 h -1.8125 v -1.72917 h 1.89583 q 1.55208,0 2.375,-0.61458 0.82291,-0.625 0.82291,-1.79167 0,-1.19791 -0.85416,-1.83333 -0.84375,-0.64583 -2.42708,-0.64583 -0.86458,0 -1.85417,0.1875 -0.98958,0.1875 -2.17708,0.58333 v -1.87499 q 1.19792,-0.33334 2.23958,-0.5 1.05209,-0.16667 1.97917,-0.16667 2.39583,0 3.79166,1.09375 1.39583,1.08333 1.39583,2.9375 0,1.29166 -0.73958,2.18749 -0.73958,0.88542 -2.10417,1.22917 z m 7.21874,-7.16666 h 8.26041 v 1.77083 h -6.33333 v 3.8125 q 0.45834,-0.15625 0.91667,-0.22917 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42708 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16666 -1.01041,-0.16667 -2.09375,-0.5 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05208,-0.94792 1.05208,-2.57292 0,-1.62499 -1.05208,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 16.60414,1.0625 q -0.83333,0 -1.40624,0.58333 -0.57292,0.57292 -0.57292,1.40625 0,0.82292 0.57292,1.39583 0.57291,0.5625 1.40624,0.5625 0.83334,0 1.40625,-0.5625 0.57292,-0.57291 0.57292,-1.39583 0,-0.82292 -0.58334,-1.40625 -0.57291,-0.58333 -1.39583,-0.58333 z m 0,-1.34375 q 0.66667,0 1.28125,0.26042 0.61458,0.25 1.0625,0.72916 0.47917,0.46875 0.71875,1.0625 0.23958,0.59375 0.23958,1.28125 0,1.375 -0.96875,2.33333 -0.95833,0.94791 -2.35416,0.94791 -1.40625,0 -2.34375,-0.93749 -0.93749,-0.9375 -0.93749,-2.34375 0,-1.39583 0.95833,-2.36458 0.95833,-0.96875 2.34374,-0.96875 z"
</g> />
<path style="fill:#808080;" <path
d="m 71.185431,207.42553 c -24.198406,24.1984 -24.198409,64.19342 1e-6,88.39183 24.198409,24.1984 64.188198,24.19318 88.386608,-0.005 L 274.47515,180.90903 c 2.66087,-2.66088 4.20734,-2.30988 6.60826,-1.31541 2.4009,0.99451 3.74779,1.84302 3.7478,5.60606 l -10e-6,389.80306 a 25.000064,25.000064 0 0 0 24.99756,24.99756 25.000064,25.000064 0 0 0 25.00277,-25.00277 V 185.19446 c -10e-6,-23.9138 -15.38944,-43.83349 -34.6124,-51.79591 -19.22297,-7.96242 -44.18796,-4.75275 -61.09758,12.15688 L 124.21844,260.45854 c -5.09092,5.09091 -12.58327,5.09091 -17.67419,0 -5.09091,-5.09092 -5.09613,-12.5885 -0.005,-17.67941 L 292.15457,57.163588 c 9.97246,-9.972464 25.38634,-9.972456 35.35881,1e-5 L 504.29182,233.94204 a 25.000064,25.000064 0 0 0 35.34837,0 25.000064,25.000064 0 0 0 0.005,-35.35361 L 362.86699,21.809987 c -29.07996,-29.07996 -76.98606,-29.0799534 -106.06602,2e-6 z" /> d="m 194.40111,314.79164 q -0.32291,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83333,-0.0937 -1.625,0 -2.5,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60417,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35417,-0.52083 0.19791,0 0.4375,0.0312 0.23958,0.0208 0.53124,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 17.36456,-10.11456 h 9.99998 v 0.89583 l -5.64582,14.65622 h -2.19791 l 5.31249,-13.78122 h -7.46874 z m 14.12498,0 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.5625,3.90624 -1.56249,1.38542 -4.40624,1.38542 -0.97916,0 -2,-0.16667 -1.01041,-0.16667 -2.09374,-0.5 v -2.11458 q 0.9375,0.51042 1.93749,0.76042 1,0.25 2.11458,0.25 1.80209,0 2.85417,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85417,-0.94792 -0.84374,0 -1.68749,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 21.91663,13.80206 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33334,1.6875 1.33334,4.4375 0,2.74999 -1.33334,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.87499,-3.3125 -0.86459,-1.20833 -2.38542,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38542,-1.19791 0.87499,-1.20833 0.87499,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98957 h -2.26041 l -3.39583,-4.58332 -3.39583,4.58332 h -2.26041 l 4.53124,-6.10415 -4.14583,-5.56249 h 2.26042 l 3.09374,4.15624 3.09375,-4.15624 z"
</svg> />
<figcaption>Example icon depicting an arrow pointing up, which follows the design rules outlined above. </g>
Two bends are given an angle-marker and values that describe one as a 90° angle with a 50 px bend <path
radius, and the other as a 135° angle with a a 75 px bend. At one end of the only line, the d="m 187.79306,570.26801 h 8.26041 v 1.77083 h -6.33333 v 3.81249 q 0.45834,-0.15625 0.91667,-0.22916 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42709 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16667 -1.01041,-0.16666 -2.09375,-0.49999 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05209,-0.94792 1.05209,-2.57292 0,-1.62499 -1.05209,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.18749 -0.83333,0.1875 -1.70833,0.58334 z m 18.05206,1.38541 q -1.625,0 -2.44791,1.60417 -0.8125,1.59375 -0.8125,4.80207 0,3.19792 0.8125,4.80208 0.82291,1.59375 2.44791,1.59375 1.63541,0 2.44791,-1.59375 0.82292,-1.60416 0.82292,-4.80208 0,-3.20832 -0.82292,-4.80207 -0.8125,-1.60417 -2.44791,-1.60417 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -4,-2.0625 -1.37499,-2.07291 -1.37499,-5.99999 0,-3.93749 1.37499,-5.99999 1.38542,-2.07291 4,-2.07291 z m 17.43747,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04166 1.52083,-1.54166 0.92708,-0.51042 2.20833,-0.51042 2.125,0 3.44791,1.6875 1.33333,1.6875 1.33333,4.43749 0,2.75 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51041 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.31249 -0.86458,-1.20834 -2.38541,-1.20834 -1.52083,0 -2.39583,1.20834 -0.86458,1.19791 -0.86458,3.31249 0,2.11458 0.86458,3.32291 0.875,1.19792 2.39583,1.19792 1.52083,0 2.38541,-1.19792 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98958 h -2.26041 l -3.39583,-4.58333 -3.39583,4.58333 h -2.26041 l 4.53124,-6.10416 -4.14582,-5.56249 h 2.26041 l 3.09374,4.15624 3.09375,-4.15624 z"
line-width is marked as 50 px.</figcaption> transform="rotate(-45)"
</figure> aria-label="50 px"
</main> />
<g aria-label="α=90°, r=50 px">
<path
d="m 281.87513,91.958416 -0.45833,-2.406247 q -0.46875,-2.468746 -2.32291,-2.468746 -1.39583,0 -2.03125,1.145832 -0.80208,1.437498 -0.80208,3.333328 0,2.291663 0.78125,3.385411 0.79166,1.114582 2.05208,1.114582 1.39583,0 2.14583,-2.218747 z m 1.07292,-3.187495 1.03125,-3.052079 h 1.70833 l -2.13542,6.322907 0.41667,2.281246 q 0.0937,0.510416 0.45833,0.937499 0.42708,0.499999 0.76042,0.499999 h 0.91666 v 1.624997 h -1.14583 q -0.97916,0 -1.85416,-0.874998 -0.42709,-0.4375 -0.60417,-1.354165 -0.47916,1.156248 -1.45833,2.062497 -0.45833,0.427083 -1.94791,0.427083 -2.44792,0 -3.63541,-1.583331 -1.21875,-1.635414 -1.21875,-4.499993 0,-3.062495 1.32291,-4.499993 1.46875,-1.604164 3.53125,-1.604164 3.23958,0 3.85416,3.312495 z m 6.43749,-1.072915 h 13.35414 v 1.749997 h -13.35414 z m 0,4.249993 h 13.35414 v 1.770831 h -13.35414 z m 17.9583,5.114575 v -1.916663 q 0.79167,0.374999 1.60417,0.572915 0.8125,0.197917 1.59374,0.197917 2.08334,0 3.17708,-1.395831 1.10417,-1.406248 1.26042,-4.26041 -0.60417,0.895832 -1.53125,1.374997 -0.92708,0.479166 -2.05208,0.479166 -2.33333,0 -3.69791,-1.406247 -1.35417,-1.416665 -1.35417,-3.864578 0,-2.395829 1.41667,-3.843744 1.41666,-1.447914 3.77083,-1.447914 2.69791,0 4.11457,2.072913 1.42708,2.062497 1.42708,5.999991 0,3.677078 -1.74999,5.874991 -1.73958,2.187496 -4.6875,2.187496 -0.79166,0 -1.60416,-0.156249 -0.8125,-0.15625 -1.6875,-0.46875 z m 4.1875,-6.593739 q 1.41666,0 2.23958,-0.968749 0.83333,-0.968748 0.83333,-2.656246 0,-1.67708 -0.83333,-2.645829 -0.82292,-0.979165 -2.23958,-0.979165 -1.41667,0 -2.25,0.979165 -0.82292,0.968749 -0.82292,2.645829 0,1.687498 0.82292,2.656246 0.83333,0.968749 2.25,0.968749 z m 13.82289,-7.249989 q -1.625,0 -2.44791,1.604164 -0.8125,1.593748 -0.8125,4.802076 0,3.197912 0.8125,4.802076 0.82291,1.593747 2.44791,1.593747 1.63542,0 2.44791,-1.593747 0.82292,-1.604164 0.82292,-4.802076 0,-3.208328 -0.82292,-4.802076 -0.81249,-1.604164 -2.44791,-1.604164 z m 0,-1.666664 q 2.61458,0 3.98958,2.072913 1.38541,2.062497 1.38541,5.999991 0,3.927077 -1.38541,5.999991 -1.375,2.062496 -3.98958,2.062496 -2.61458,0 -3.99999,-2.062496 -1.375,-2.072914 -1.375,-5.999991 0,-3.937494 1.375,-5.999991 1.38541,-2.072913 3.99999,-2.072913 z m 12.12498,1.343748 q -0.83333,0 -1.40625,0.583332 -0.57291,0.572916 -0.57291,1.406248 0,0.822916 0.57291,1.395831 0.57292,0.562499 1.40625,0.562499 0.83333,0 1.40625,-0.562499 0.57292,-0.572915 0.57292,-1.395831 0,-0.822915 -0.58334,-1.406248 -0.57291,-0.583332 -1.39583,-0.583332 z m 0,-1.343748 q 0.66667,0 1.28125,0.260416 0.61458,0.25 1.0625,0.729166 0.47916,0.468749 0.71875,1.062498 0.23958,0.593749 0.23958,1.281248 0,1.374998 -0.96875,2.33333 -0.95833,0.947915 -2.35416,0.947915 -1.40625,0 -2.34375,-0.937499 -0.9375,-0.937498 -0.9375,-2.343746 0,-1.395831 0.95834,-2.364579 0.95833,-0.968749 2.34374,-0.968749 z"
/>
<path
d="m 273.33869,114.17713 q -0.32292,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83334,-0.0937 -1.62499,0 -2.49999,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60416,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35416,-0.52083 0.19792,0 0.4375,0.0312 0.23959,0.0208 0.53125,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 H 275.5991 Z m 0,4.24999 h 13.35415 v 1.77083 H 275.5991 Z m 17.91664,-10.11456 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.56249,3.90624 -1.5625,1.38542 -4.40625,1.38542 -0.97916,0 -1.99999,-0.16667 -1.01042,-0.16666 -2.09375,-0.5 v -2.11458 q 0.9375,0.51042 1.9375,0.76042 0.99999,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85416,-0.94792 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 18.05205,1.38541 q -1.62499,0 -2.44791,1.60416 -0.8125,1.59375 -0.8125,4.80208 0,3.19791 0.8125,4.80208 0.82292,1.59374 2.44791,1.59374 1.63542,0 2.44792,-1.59374 0.82291,-1.60417 0.82291,-4.80208 0,-3.20833 -0.82291,-4.80208 -0.8125,-1.60416 -2.44792,-1.60416 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -3.99999,-2.0625 -1.375,-2.07291 -1.375,-5.99999 0,-3.93749 1.375,-5.99999 1.38541,-2.07291 3.99999,-2.07291 z m 17.43748,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60416,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33333,1.6875 1.33333,4.4375 0,2.74999 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91667,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.3125 -0.86458,-1.20833 -2.38541,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38541,-1.19791 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21875,5.67707 4.4375,5.98957 h -2.26042 l -3.39582,-4.58332 -3.39583,4.58332 h -2.26042 l 4.53125,-6.10415 -4.14583,-5.56249 h 2.26041 l 3.09375,4.15624 3.09374,-4.15624 z"
/>
</g>
<path
d="m 557.29687,216.24219 -5.30273,5.30273 5.05078,5.05078 -24.74805,24.74805 -5.05273,-5.05078 -5.30273,5.30273 10.35546,10.35547 35.35547,-35.35547 z"
/>
</g>
<path
style="fill: #808080"
d="m 71.185431,207.42553 c -24.198406,24.1984 -24.198409,64.19342 1e-6,88.39183 24.198409,24.1984 64.188198,24.19318 88.386608,-0.005 L 274.47515,180.90903 c 2.66087,-2.66088 4.20734,-2.30988 6.60826,-1.31541 2.4009,0.99451 3.74779,1.84302 3.7478,5.60606 l -10e-6,389.80306 a 25.000064,25.000064 0 0 0 24.99756,24.99756 25.000064,25.000064 0 0 0 25.00277,-25.00277 V 185.19446 c -10e-6,-23.9138 -15.38944,-43.83349 -34.6124,-51.79591 -19.22297,-7.96242 -44.18796,-4.75275 -61.09758,12.15688 L 124.21844,260.45854 c -5.09092,5.09091 -12.58327,5.09091 -17.67419,0 -5.09091,-5.09092 -5.09613,-12.5885 -0.005,-17.67941 L 292.15457,57.163588 c 9.97246,-9.972464 25.38634,-9.972456 35.35881,1e-5 L 504.29182,233.94204 a 25.000064,25.000064 0 0 0 35.34837,0 25.000064,25.000064 0 0 0 0.005,-35.35361 L 362.86699,21.809987 c -29.07996,-29.07996 -76.98606,-29.0799534 -106.06602,2e-6 z"
/>
</svg>
<figcaption>
Example icon depicting an arrow pointing up, which follows the
design rules outlined above. Two bends are given an angle-marker and
values that describe one as a 90° angle with a 50 px bend radius,
and the other as a 135° angle with a a 75 px bend. At one end of the
only line, the line-width is marked as 50 px.
</figcaption>
</figure>
</main>
</div> </div>
<script src="../assets/script/styleguide.js" type="text/javascript"></script> <script
</body> src="../assets/script/styleguide.js"
type="text/javascript"
</html> ></script>
</body>
</html>

165
styleguide/index.html
View file

@ -1,78 +1,111 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<script> <script>
const setTheme = (theme) => { const setTheme = (theme) => {
theme ??= localStorage.theme || "system"; theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light"; document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark"; document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme; localStorage.theme = theme;
}; };
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
setTheme(); setTheme();
}); });
</script> </script>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css"> <link rel="stylesheet" type="text/css" href="assets/style/styleguide.css" />
<title>Color Guide</title> <title>Color Guide</title>
</head> </head>
<body> <body>
<header> <header>
<a href="/" id="backToWiki"> <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: <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> />
</a>
</header> </header>
<div> <div>
<nav> <nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button> <button aria-label="Open Navigation">
<ul> <i data-icon="menu-small"></i>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li> </button>
<li class="active"><a href=""><i data-icon="home"></i>Overview</a></li> <ul>
<li><a href="colors"><i data-icon="info"></i>Colors</a></li> <li class="link-back">
<li><a href="typography"><i data-icon="info"></i>Typography</a></li> <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
<li><a href="iconography"><i data-icon="info"></i>Iconography</a></li> </li>
<li><a href="logo"><i data-icon="info"></i>Logo</a></li> <li class="active">
<li><a href="glow"><i data-icon="info"></i>Glow</a></li> <a href=""><i data-icon="home"></i>Overview</a>
<li><a href="demopage"><i data-icon="info"></i>Demopage</a></li> </li>
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li> <li>
<li id="themeToggleDark" class="themeToggle"> <a href="colors"><i data-icon="info"></i>Colors</a>
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeDark"> <li>
<i data-icon="light"></i> <a href="typography"><i data-icon="info"></i>Typography</a>
</label> </li>
</li> <li>
<li id="themeToggleLight" class="themeToggle"> <a href="iconography"><i data-icon="info"></i>Iconography</a>
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeLight"> <li>
<i data-icon="light"></i> <a href="logo"><i data-icon="info"></i>Logo</a>
</label> </li>
</li> <li>
</ul> <a href="glow"><i data-icon="info"></i>Glow</a>
</nav> </li>
<main> <li>
<h1>Styleguide Easterhegg 2025</h1> <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 id="themeToggleDark" class="themeToggle">
<input
id="themeDark"
type="checkbox"
aria-label="Switch between dark and light mode"
/>
<label for="themeDark">
<i data-icon="light"></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="light"></i>
</label>
</li>
</ul>
</nav>
<main>
<h1>Styleguide Easterhegg 2025</h1>
<div class="alert"> <div class="alert">
<i data-icon="warning"></i> <i data-icon="warning"></i>
<p> <p>
<strong>Work in progress</strong> <strong>Work in progress</strong>
This style guide is still under development.<br> This style guide is still under development.<br />
Not all resources may be available yet, explanations and examples may be missing and things may Not all resources may be available yet, explanations and examples
change without notice. may be missing and things may change without notice.
</p> </p>
</div> </div>
</main>
</main> <script src="assets/script/styleguide.js" type="text/javascript"></script>
<script src="assets/script/styleguide.js" type="text/javascript"></script>
</div> </div>
</body> </body>
</html>
</html>

327
styleguide/logo/index.html
View file

@ -1,136 +1,225 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<script> <script>
const setTheme = (theme) => { const setTheme = (theme) => {
theme ??= localStorage.theme || "system"; theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light"; document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark"; document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme; localStorage.theme = theme;
}; };
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
setTheme(); setTheme();
}); });
</script> </script>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css"> <link
rel="stylesheet"
type="text/css"
href="../assets/style/styleguide.css"
/>
<title>Logo</title> <title>Logo</title>
</head> </head>
<body> <body>
<header> <header>
<a href="/" id="backToWiki"> <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: <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> />
</a>
</header> </header>
<div> <div>
<nav> <nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button> <button aria-label="Open Navigation">
<ul> <i data-icon="menu-small"></i>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li> </button>
<li><a href="../"><i data-icon="home"></i>Overview</a></li> <ul>
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li> <li class="link-back">
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li> <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li> </li>
<li class="active"><a href=""><i data-icon="info"></i>Logo</a></li> <li>
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li> <a href="../"><i data-icon="home"></i>Overview</a>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li> </li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li> <li>
<li id="themeToggleDark" class="themeToggle"> <a href="../colors"><i data-icon="info"></i>Colors</a>
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeDark"> <li>
<i data-icon="light"></i> <a href="../typography"><i data-icon="info"></i>Typography</a>
</label> </li>
</li> <li>
<li id="themeToggleLight" class="themeToggle"> <a href="../iconography"><i data-icon="info"></i>Iconography</a>
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeLight"> <li class="active">
<i data-icon="light"></i> <a href=""><i data-icon="info"></i>Logo</a>
</label> </li>
</li> <li>
</ul> <a href="../glow"><i data-icon="info"></i>Glow</a>
</nav> </li>
<main> <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 id="themeToggleDark" class="themeToggle">
<input
id="themeDark"
type="checkbox"
aria-label="Switch between dark and light mode"
/>
<label for="themeDark">
<i data-icon="light"></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="light"></i>
</label>
</li>
</ul>
</nav>
<main>
<div class="alert">
<i data-icon="warning"></i>
<p>
<strong>Work in progress</strong>
This style guide is still under development.<br />
Not all resources may be available yet, explanations and examples
may be missing and things may change without notice.
</p>
</div>
<div class="alert"> <h1>Logo</h1>
<i data-icon="warning"></i> <p>
<p> One of the primary design elements of any design is of course its
<strong>Work in progress</strong> logo. But because a single logo doesn't fit each use-case, e.g. in
This style guide is still under development.<br> terms of aspect ratio or detail, we created multiple variants. On top
Not all resources may be available yet, explanations and examples may be missing and things may of that, each variant also has its separate dark and light theme
change without notice. variants, in case the logo is used on a light background. But in
</p> general, as with the entire design, dark mode is the preferred
</div> representaton. All logo files (with and without transparency or glow
and in both light and dark mode) can be found in the design repository
(not yet published).
</p>
<!-- TODO: Link to repository or other form of logo collection -->
<h1>Logo</h1> <h2>Full Logo</h2>
<p>One of the primary design elements of any design is of course its logo. But because a single logo doesn't <p>
fit each use-case, e.g. in terms of aspect ratio or detail, we created multiple variants. On top of The most present logo consists of the hare and egg, as well as the
that, each variant also has its separate dark and light theme variants, in case the logo is used on a motto <i>Unhandled Eggception</i> and the eventname
light background. But in general, as with the entire design, dark mode is the preferred representaton. <i>Easterhegg 2025</i>. It is used on this website and can be used as
All logo files (with and without transparency or glow and in both light and dark mode) can be found in a banner, title image or for posters and similar. The eventname on it
the design repository (not yet published).</p> is optional, variants without it can be found&mdash;as all other logo
<!-- TODO: Link to repository or other form of logo collection --> files&mdash;using the link above.
</p>
<div class="layout-column">
<img
src="../assets/image/logos_dark/logo_eventname.png"
class="dark background"
alt="Full 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 with cracks. The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
/>
<img
src="../assets/image/logos_light/logo_eventname.png"
class="light background"
alt="The same logo as the previous one, but instead in the style of an unpowered neon sign, only glowing dimly."
/>
</div>
<h2>Full Logo</h2> <h2>EH22 Logo</h2>
<p>The most present logo consists of the hare and egg, as well as the motto <i>Unhandled Eggception</i> and <p>
the eventname <i>Easterhegg 2025</i>. It is used on this website and can be used as a banner, title Especially useful for our matrix space, this logo variant featuring
image or for posters and similar. The eventname on it is optional, variants without it can be only the "EH22" lettering has a more rectangular appearance and is
found&mdash;as all other logo files&mdash;using the link above.</p> therefore useful for profile-esque pictures, where the eventname might
<div class="layout-column"> not always be visible, e.g. in a collapsed room-overview in the
<img src="../assets/image/logos_dark/logo_eventname.png" class="dark background" Element matrix client.
alt="Full 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 with cracks. The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." /> </p>
<img src="../assets/image/logos_light/logo_eventname.png" class="light background" <div class="layout-column">
alt="The same logo as the previous one, but instead in the style of an unpowered neon sign, only glowing dimly." /> <img
</div> src="../assets/image/logos_dark/logo_eh22.png"
class="dark background"
alt="EH22 logo of Easterhegg 2025 in the style of a neon sign: It features the text 'EH22' spanning two lines. The '22' spans across the same width as 'EH' by spacing the two digits slighty further apart from one another than the two letters, giving it a rectangular appearance. The entire text features the blue neon effect from previous logos."
/>
<img
src="../assets/image/logos_light/logo_eh22.png"
class="light background"
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
/>
</div>
<h2>EH22 Logo</h2> <h2>Icon Logos</h2>
<p>Especially useful for our matrix space, this logo variant featuring only the "EH22" lettering has a more <p>
rectangular appearance and is therefore useful for profile-esque pictures, where the eventname might not The following logo variants are all intended for a similar
always be visible, e.g. in a collapsed room-overview in the Element matrix client.</p> profile-esque use-case as the EH22 logo above. The main difference is,
<div class="layout-column"> that they don't have an explicit mention of the eventname. Meaning
<img src="../assets/image/logos_dark/logo_eh22.png" class="dark background" they should preferably be used, if the eventname is always visible
alt="EH22 logo of Easterhegg 2025 in the style of a neon sign: It features the text 'EH22' spanning two lines. The '22' spans across the same width as 'EH' by spacing the two digits slighty further apart from one another than the two letters, giving it a rectangular appearance. The entire text features the blue neon effect from previous logos." /> (e.g. via the display name on the
<img src="../assets/image/logos_light/logo_eh22.png" class="light background" <a href="https://chaos.social/@easterhegg2025"
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." /> >Easterhegg 2025 mastodon account</a
</div> >) or the association is clear e.g. because it's a channel icon inside
the EH22 matrix space. But this is not a super strict policy. They can
of course also be used as simple design elements.
</p>
<div class="layout-column">
<img
src="../assets/image/logos_dark/logo_icons.png"
class="dark background"
alt="Icon logo of Easterhegg 2025 in the style of a neon sign: It features the same hare and egg as before, horizontally next to one another, but the egg is a bit lower than the hare."
/>
<img
src="../assets/image/logos_light/logo_icons.png"
class="light background"
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
/>
</div>
<h2>Icon Logos</h2> <div class="layout-column">
<p>The following logo variants are all intended for a similar profile-esque use-case as the EH22 logo above. <img
The main difference is, that they don't have an explicit mention of the eventname. Meaning they should src="../assets/image/logos_dark/logo_egg.png"
preferably be used, if the eventname is always visible (e.g. via the display name on the <a class="dark background"
href="https://chaos.social/@easterhegg2025">Easterhegg 2025 mastodon account</a>) or the association alt="Egg-only logo of Easterhegg 2025 in the style of a neon sign: It only features the egg from before."
is clear e.g. because it's a channel icon inside the EH22 matrix space. But this is not a super strict />
policy. They can of course also be used as simple design elements.</p> <img
<div class="layout-column"> src="../assets/image/logos_light/logo_egg.png"
<img src="../assets/image/logos_dark/logo_icons.png" class="dark background" class="light background"
alt="Icon logo of Easterhegg 2025 in the style of a neon sign: It features the same hare and egg as before, horizontally next to one another, but the egg is a bit lower than the hare." /> alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
<img src="../assets/image/logos_light/logo_icons.png" class="light background" />
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." /> </div>
</div>
<div class="layout-column"> <div class="layout-column">
<img src="../assets/image/logos_dark/logo_egg.png" class="dark background" <img
alt="Egg-only logo of Easterhegg 2025 in the style of a neon sign: It only features the egg from before." /> src="../assets/image/logos_dark/logo_hare.png"
<img src="../assets/image/logos_light/logo_egg.png" class="light background" class="dark background"
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." /> alt="Hare-only logo of Easterhegg 2025 in the style of a neon sign: It only features the hare from before."
</div> />
<img
<div class="layout-column"> src="../assets/image/logos_light/logo_hare.png"
<img src="../assets/image/logos_dark/logo_hare.png" class="dark background" class="light background"
alt="Hare-only logo of Easterhegg 2025 in the style of a neon sign: It only features the hare from before." /> alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
<img src="../assets/image/logos_light/logo_hare.png" class="light background" />
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." /> </div>
</div> </main>
</main>
</div> </div>
<script src="../assets/script/styleguide.js" type="text/javascript"></script> <script
</body> src="../assets/script/styleguide.js"
type="text/javascript"
</html> ></script>
</body>
</html>

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

419
styleguide/typography/index.html
View file

@ -1,188 +1,265 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<script> <script>
const setTheme = (theme) => { const setTheme = (theme) => {
theme ??= localStorage.theme || "system"; theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light"; document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark"; document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme; localStorage.theme = theme;
}; };
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
setTheme(); setTheme();
}); });
</script> </script>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css"> <link
rel="stylesheet"
type="text/css"
href="../assets/style/styleguide.css"
/>
<title>Typography</title> <title>Typography</title>
</head> </head>
<body> <body>
<header> <header>
<a href="/" id="backToWiki"> <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: <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> />
</a>
</header> </header>
<div> <div>
<nav> <nav>
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button> <button aria-label="Open Navigation">
<ul> <i data-icon="menu-small"></i>
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li> </button>
<li><a href="../"><i data-icon="home"></i>Overview</a></li> <ul>
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li> <li class="link-back">
<li class="active"><a href=""><i data-icon="info"></i>Typography</a></li> <a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li> </li>
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li> <li>
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li> <a href="../"><i data-icon="home"></i>Overview</a>
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li> </li>
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li> <li>
<li id="themeToggleDark" class="themeToggle"> <a href="../colors"><i data-icon="info"></i>Colors</a>
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeDark"> <li class="active">
<i data-icon="light"></i> <a href=""><i data-icon="info"></i>Typography</a>
</label> </li>
</li> <li>
<li id="themeToggleLight" class="themeToggle"> <a href="../iconography"><i data-icon="info"></i>Iconography</a>
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode"> </li>
<label for="themeLight"> <li>
<i data-icon="light"></i> <a href="../logo"><i data-icon="info"></i>Logo</a>
</label> </li>
</li> <li>
</ul> <a href="../glow"><i data-icon="info"></i>Glow</a>
</nav> </li>
<main> <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 id="themeToggleDark" class="themeToggle">
<input
id="themeDark"
type="checkbox"
aria-label="Switch between dark and light mode"
/>
<label for="themeDark">
<i data-icon="light"></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="light"></i>
</label>
</li>
</ul>
</nav>
<main>
<div class="alert">
<i data-icon="warning"></i>
<p>
<strong>Work in progress</strong>
This style guide is still under development.<br />
Not all resources may be available yet, explanations and examples
may be missing and things may change without notice.
</p>
</div>
<div class="alert"> <h1>Typography</h1>
<i data-icon="warning"></i> <p>
<p> The design contains multiple typefaces, which are intended to be used
<strong>Work in progress</strong> for different types of text. Below you'll find an explaination about
This style guide is still under development.<br> which typeface should be used for which context, as well as a table
Not all resources may be available yet, explanations and examples may be missing and things may containing specific font-sizes together with previews. If you want to
change without notice. see the typography in action, head to the
</p> <a href="../demopage/"
</div> >demopage which includes examples of various text components</a
>.
</p>
<dl>
<dt>Paragraphs/Wildcard:</dt>
<dd>
In general, everything that doesn't fall under the following
categories, should use the Athiti typeface, unless your use-case
calls for something else. This is just a guide and design
recommendation after all.
</dd>
<h1>Typography</h1> <dt>Headings:</dt>
<p>The design contains multiple typefaces, which are intended to be used for different types of text. Below <dd>
you'll find an explaination about which typeface should be used for which context, as well as a table We believe that almost no one requires more than four levels of
containing specific font-sizes together with previews. If you want to see the typography in action, head headings. Therefore we only define font-sizes for this many. But you
to the <a href="../demopage/">demopage which includes examples of various text components</a>.</p> can of course define your own additional levels. But be it slides,
<dl> webpages or whatever else; headings should always use our custom
<dt>Paragraphs/Wildcard:</dt> made neon-sign font, Argon Glow. If you are curious about why we
<dd>In general, everything that doesn't fall under the following categories, should use the Athiti created a custom font, we explained the decision further below.
typeface, unless your use-case calls for something else. This is just a guide and design </dd>
recommendation after all.</dd>
<dt>Headings:</dt> <dt>Subheadings:</dt>
<dd>We believe that almost no one requires more than four levels of headings. Therefore we only define <dd>
font-sizes for this many. But you can of course define your own additional levels. But be it slides, This applies to secondary titles directly following a primary title,
webpages or whatever else; headings should always use our custom made neon-sign font, Argon Glow. If as is typical on title-slides and similar. Use Athiti, but larger
you are curious about why we created a custom font, we explained the decision further below.</dd> than the text size of the main content. See the table below for a
size guide.
</dd>
<dt>Subheadings:</dt> <dt>Code/monospace:</dt>
<dd>This applies to secondary titles directly following a primary title, as is typical on title-slides <dd>
and similar. Use Athiti, but larger than the text size of the main content. See the table below for For monospace content, we think, Departure Mono is a fitting choice,
a size guide.</dd> to further add to the 80s retro vibe of the neon look, by leaning
into a more digital, pixelated theme. Beware: it won't work nicely
with all font sizes, because it tries to heavily rasterize. This
makes it a subadequate choice for terminal emulators and editors.
Use your monospace typeface of choice if Departure Mono doesn't work
for your use-case.
</dd>
</dl>
<dt>Code/monospace:</dt> <h2>Font Table</h2>
<dd>For monospace content, we think, Departure Mono is a fitting choice, to further add to the 80s retro <div class="layout-column">
vibe of the neon look, by leaning into a more digital, pixelated theme. Beware: it won't work nicely <table class="row-hover">
with all font sizes, because it tries to heavily rasterize. This makes it a subadequate choice for <thead>
terminal emulators and editors. Use your monospace typeface of choice if Departure Mono doesn't work <tr>
for your use-case.</dd> <th>Type</th>
</dl> <th>Font size</th>
<th>Font family</th>
</tr>
</thead>
<tr>
<th scope="row">Main Title</th>
<td>72px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 1</th>
<td>48px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 2</th>
<td>32px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 3</th>
<td>24px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Heading 4</th>
<td>18px</td>
<td>Argon Glow</td>
</tr>
<tr>
<th scope="row">Subheading</th>
<td>24px</td>
<td>Athiti</td>
</tr>
<tr>
<th scope="row">Paragraph</th>
<td>16px</td>
<td>Athiti</td>
</tr>
<tr>
<th scope="row">Code</th>
<td>16px</td>
<td>Departure Mono</td>
</tr>
</table>
<ul>
<li><span class="main-title">Main Title</span></li>
<li><span class="h1">Heading 1</span></li>
<li><span class="h2">Heading 2</span></li>
<li><span class="h3">Heading 3</span></li>
<li><span class="h4">Heading 4</span></li>
<li><span class="subheading">Subheading</span></li>
<li><span class="p">Paragraph</span></li>
<li><span class="code">Code</span></li>
</ul>
</div>
<h2>Font Table</h2> <h2>Our custom font: Argon Glow</h2>
<div class="layout-column"> <p>
<table class="row-hover"> As mentioned above, we created Argon Glow ourselves. While researching
<thead> libre typefaces (OFL or similarly licenced) with a neon-sign look, we
<tr> found quite a few candidates. But each of them made some sort of
<th>Type</th> design choice we didn't like.
<th>Font size</th> </p>
<th>Font family</th> <p>
</tr> Major issues were gaps and line lengths. Neon signs are made using
</thead> bent tubes. Some shapes would require either multiple tubes or involve
<tr> very tight bends and layering in the third dimension. Some typefaces
<th scope="row">Main Title</th> did try to imitate layering, but because typefaces are usually
<td>72px</td> two-dimensional, this didn't really look satisfactory.
<td>Argon Glow</td> </p>
</tr> <p>
<tr> When using multiple lines, some typefaces really likes the
<th scope="row">Heading 1</th> <i>more is better</i> approach, using unnecessary gaps that one
<td>48px</td> wouldn't do when creating physical signs, simply because it would be a
<td>Argon Glow</td> useless amount of additional work.
</tr> </p>
<tr> <p>
<th scope="row">Heading 2</th> Bending tubes is difficult, requiring a minimum radius to not damage
<td>32px</td> the pipe or cause flattening. So all typefaces using corners on the
<td>Argon Glow</td> inside of bends were a no-go. Some typefaces on the other hand liked
</tr> bends so much, they added extra bends to the end of lines, which did a
<tr> full 180. Maybe to try and imitate serifs? Either way, we didn't like
<th scope="row">Heading 3</th> that.
<td>24px</td> </p>
<td>Argon Glow</td> <p>
</tr> So in the end, and over the course of multiple months, we made our own
<tr> custom typeface that meets all of our desired properties and is freely
<th scope="row">Heading 4</th> available under the OFL version 1.1. We hope y'all like it. And who
<td>18px</td> knows, maybe someone will use it for completely unrelated projects
<td>Argon Glow</td> than this Easterhegg.
</tr> </p>
<tr> </main>
<th scope="row">Subheading</th>
<td>24px</td>
<td>Athiti</td>
</tr>
<tr>
<th scope="row">Paragraph</th>
<td>16px</td>
<td>Athiti</td>
</tr>
<tr>
<th scope="row">Code</th>
<td>16px</td>
<td>Departure Mono</td>
</tr>
</table>
<ul>
<li><span class="main-title">Main Title</span></li>
<li><span class="h1">Heading 1</span></li>
<li><span class="h2">Heading 2</span></li>
<li><span class="h3">Heading 3</span></li>
<li><span class="h4">Heading 4</span></li>
<li><span class="subheading">Subheading</span></li>
<li><span class="p">Paragraph</span></li>
<li><span class="code">Code</span></li>
</ul>
</div>
<h2>Our custom font: Argon Glow</h2>
<p>As mentioned above, we created Argon Glow ourselves. While researching libre typefaces (OFL or similarly
licenced) with a neon-sign look, we found quite a few candidates. But each of them made some sort of
design choice we didn't like.</p>
<p>Major issues were gaps and line lengths. Neon signs are made using bent tubes. Some shapes would require
either multiple tubes or involve very tight bends and layering in the third dimension. Some typefaces
did try to imitate layering, but because typefaces are usually two-dimensional, this didn't really look
satisfactory.</p>
<p>When using multiple lines, some typefaces really likes the <i>more is better</i> approach, using
unnecessary gaps that one wouldn't do when creating physical signs, simply because it would be a useless
amount of additional work.</p>
<p>Bending tubes is difficult, requiring a minimum radius to not damage the pipe or cause flattening. So all
typefaces using corners on the inside of bends were a no-go. Some typefaces on the other hand liked
bends so much, they added extra bends to the end of lines, which did a full 180. Maybe to try and
imitate serifs? Either way, we didn't like that.</p>
<p>So in the end, and over the course of multiple months, we made our own custom typeface that meets all of
our desired properties and is freely available under the OFL version 1.1. We hope y'all like it. And who
knows, maybe someone will use it for completely unrelated projects than this Easterhegg.</p>
</main>
</div> </div>
<script src="../assets/script/styleguide.js" type="text/javascript"></script> <script
</body> src="../assets/script/styleguide.js"
type="text/javascript"
</html> ></script>
</body>
</html>