From 155d47222eaf221f50590c73c29a13fdcceccf1e Mon Sep 17 00:00:00 2001 From: kritzl Date: Mon, 3 Mar 2025 16:46:05 +0100 Subject: [PATCH] Run prettier --- styleguide/assets/script/generator.js | 122 +- styleguide/assets/script/merch.js | 328 +-- styleguide/assets/script/styleguide.js | 29 +- styleguide/assets/style/base.css | 104 +- styleguide/assets/style/base.scss | 123 +- styleguide/assets/style/icons.scss | 41 +- styleguide/assets/style/merch.css | 12 +- styleguide/assets/style/merch.scss | 30 +- styleguide/assets/style/styleguide.css | 208 +- styleguide/assets/style/styleguide.scss | 95 +- styleguide/colors/index.html | 900 +++++--- styleguide/demopage/index.html | 391 ++-- styleguide/generator/index.html | 292 ++- styleguide/glow/index.html | 174 +- styleguide/iconography/index.html | 322 +-- styleguide/index.html | 165 +- styleguide/logo/index.html | 327 +-- styleguide/merch/de/index.html | 2548 ++++++++++++----------- styleguide/merch/en/index.html | 2545 +++++++++++----------- styleguide/typography/index.html | 419 ++-- 20 files changed, 5172 insertions(+), 4003 deletions(-) diff --git a/styleguide/assets/script/generator.js b/styleguide/assets/script/generator.js index bf890b0..c39c1e6 100644 --- a/styleguide/assets/script/generator.js +++ b/styleguide/assets/script/generator.js @@ -1,90 +1,92 @@ let can = document.createElement("canvas"); -let ctx = can.getContext('2d'); +let ctx = can.getContext("2d"); let result; -const downloadButton = document.querySelector('#download'); +const downloadButton = document.querySelector("#download"); function filterImage(svgDataUrl, width, height) { - const filteredImage = new Image(); - const resultPreview = document.querySelector('#result_img') + const filteredImage = new Image(); + const resultPreview = document.querySelector("#result_img"); - can.width = width; - can.height = height; + can.width = width; + can.height = height; - filteredImage.onload = function () { - ctx.drawImage(filteredImage, 0, 0, width, height); - result = can.toDataURL(); - downloadButton.disabled = false; - resultPreview.src = result; - }; - filteredImage.src = svgDataUrl; + filteredImage.onload = function () { + ctx.drawImage(filteredImage, 0, 0, width, height); + result = can.toDataURL(); + downloadButton.disabled = false; + resultPreview.src = result; + }; + filteredImage.src = svgDataUrl; } function loadImage(base64Image) { - const sourceImage = new Image(); - const svg = document.querySelector('svg') - const svgImage = svg.querySelector('image') - const sourcePreview = document.querySelector('#source_img') - let svgDataUrl; + const sourceImage = new Image(); + const svg = document.querySelector("svg"); + const svgImage = svg.querySelector("image"); + const sourcePreview = document.querySelector("#source_img"); + let svgDataUrl; - sourceImage.onload = function () { - let svgWidth = this.width; - let svgHeight = this.height; + sourceImage.onload = function () { + let svgWidth = this.width; + let svgHeight = this.height; - if (this.height > 1000) { - svgHeight = 1000; - svgWidth = 1000 * this.width / this.height; - } + if (this.height > 1000) { + svgHeight = 1000; + svgWidth = (1000 * this.width) / this.height; + } - svg.setAttribute("height", svgHeight); - svg.setAttribute("width", svgWidth); + svg.setAttribute("height", svgHeight); + svg.setAttribute("width", svgWidth); - let svgString = (new XMLSerializer).serializeToString(svg); - svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString); + let svgString = new XMLSerializer().serializeToString(svg); + svgDataUrl = "data:image/svg+xml," + encodeURIComponent(svgString); - filterImage(svgDataUrl, this.width, this.height); - }; - sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image; + filterImage(svgDataUrl, this.width, this.height); + }; + sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image; } - function handleFileSelect(e) { - const files = e.target.files; - if (!files || !files.length) return; - const file = files[0]; - if (!file.type.match('image.*')) return; + const files = e.target.files; + if (!files || !files.length) return; + const file = files[0]; + if (!file.type.match("image.*")) return; - const reader = new FileReader(); + const reader = new FileReader(); - reader.onload = (readerEvent) => { - loadImage(readerEvent.target.result); - }; + reader.onload = (readerEvent) => { + 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) { - let link = document.createElement("a"); - link.download = 'distortedImageEH22.png'; - link.href = result; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - delete link; + let link = document.createElement("a"); + link.download = "distortedImageEH22.png"; + link.href = result; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + delete link; } -downloadButton.addEventListener('click', downloadURI); +downloadButton.addEventListener("click", downloadURI); (async () => { - let exampleImageBlob = await fetch("../assets/image/example_cat.jpg") - .then(r => r.blob()); + let exampleImageBlob = await fetch("../assets/image/example_cat.jpg").then( + (r) => r.blob(), + ); - let dataUrl = await new Promise(resolve => { - let reader = new FileReader(); - reader.onload = () => resolve(reader.result); - reader.readAsDataURL(exampleImageBlob); - }); + let dataUrl = await new Promise((resolve) => { + let reader = new FileReader(); + reader.onload = () => resolve(reader.result); + reader.readAsDataURL(exampleImageBlob); + }); - loadImage(dataUrl); -})() + loadImage(dataUrl); +})(); diff --git a/styleguide/assets/script/merch.js b/styleguide/assets/script/merch.js index b7b7479..7a58f72 100644 --- a/styleguide/assets/script/merch.js +++ b/styleguide/assets/script/merch.js @@ -1,197 +1,229 @@ 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) { - const cell = e.target; - const value = parseFloat(cell.dataset.val); - const col = cell.dataset.col; - const dimension = cell.dataset.dim; + const cell = e.target; + const value = parseFloat(cell.dataset.val); + const col = cell.dataset.col; + const dimension = cell.dataset.dim; - document.querySelectorAll('td.val:not(.empty)').forEach(match => { - match.dataset.diff = ''; - match.classList.remove('highlighted') - match.classList.remove('currentDimension') - if (match.dataset.dim === dimension) { - match.classList.add('currentDimension') - const diff = parseFloat(match.dataset.val) - value; - 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'); - if (match.innerHTML === dimension) { - match.classList.add('currentDimension'); - } - }); + document.querySelectorAll("td.val:not(.empty)").forEach((match) => { + match.dataset.diff = ""; + match.classList.remove("highlighted"); + match.classList.remove("currentDimension"); + if (match.dataset.dim === dimension) { + match.classList.add("currentDimension"); + const diff = parseFloat(match.dataset.val) - value; + 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"); + if (match.innerHTML === dimension) { + match.classList.add("currentDimension"); + } + }); - cell.classList.add('highlighted') + cell.classList.add("highlighted"); } function selectCellPlus(e) { - e.stopPropagation(); - const cell = e.target; - const group = cell.parentElement.parentElement; - const col = cell.dataset.col; + e.stopPropagation(); + const cell = e.target; + const group = cell.parentElement.parentElement; + const col = cell.dataset.col; - if (cell.classList.contains('highlighted') && !cell.classList.contains('currentDimension')) { - selectCell(e); - return; + if ( + cell.classList.contains("highlighted") && + !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 => { - 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') - }) - + group.querySelectorAll(`td[data-col='${col}']`).forEach((match) => { + match.classList.add("highlighted"); + }); } function hoverCell(e) { - const cell = e.target; - const group = cell.parentElement.parentElement; - const col = cell.dataset.col; - const dim = cell.dataset.dim; + const cell = e.target; + const group = cell.parentElement.parentElement; + const col = cell.dataset.col; + const dim = cell.dataset.dim; - hoverOff() - document.querySelectorAll('table > thead > tr > th').forEach(match => { - if (match.dataset.col === col) match.classList.add('hover') - }); - group.querySelectorAll('td.dimension').forEach(match => { - if (match.innerText === dim) match.classList.add('hover') - }); - group.querySelectorAll('td:not(.dimension), th').forEach(match => { - match.classList.add('hover') - }); + hoverOff(); + document.querySelectorAll("table > thead > tr > th").forEach((match) => { + if (match.dataset.col === col) match.classList.add("hover"); + }); + group.querySelectorAll("td.dimension").forEach((match) => { + if (match.innerText === dim) match.classList.add("hover"); + }); + group.querySelectorAll("td:not(.dimension), th").forEach((match) => { + match.classList.add("hover"); + }); } function hoverOff() { - document.querySelectorAll('table > thead > tr > th').forEach(match => { - match.classList.remove('hover') - }); - document.querySelectorAll('td.dimension, td, th').forEach(match => { - match.classList.remove('hover') - }); + document.querySelectorAll("table > thead > tr > th").forEach((match) => { + match.classList.remove("hover"); + }); + document.querySelectorAll("td.dimension, td, th").forEach((match) => { + match.classList.remove("hover"); + }); } -const typeList = new Set() -const fitList = new Set() +const typeList = new Set(); +const fitList = new Set(); -document.querySelectorAll('tbody').forEach(tbody => { - if (tbody.dataset.from) { - const source = document.querySelector(`tbody#${tbody.dataset.from}`) - if (!source) { - console.log(`tbody with ID '${tbody.dataset.from}' not found.`); - 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; +document.querySelectorAll("tbody").forEach((tbody) => { + if (tbody.dataset.from) { + const source = document.querySelector(`tbody#${tbody.dataset.from}`); + if (!source) { + console.log(`tbody with ID '${tbody.dataset.from}' not found.`); + return; } - typeList.add(tbody.dataset.type); - fitList.add(tbody.dataset.fit); + 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); + fitList.add(tbody.dataset.fit); }); // build filter -const filterTypeElement = document.querySelector('#filterType'); -typeList.forEach(type => { - filterTypeElement.insertAdjacentHTML('beforeend', ``, + ); +}); const filterType = new Set(typeList); const filterFit = new Set(fitList); function filter() { - document.querySelectorAll(`tbody`).forEach(match => { - match.classList.toggle('filtered', !filterType.has(match.dataset.type) || !filterFit.has(match.dataset.fit)); - }) + document.querySelectorAll(`tbody`).forEach((match) => { + match.classList.toggle( + "filtered", + !filterType.has(match.dataset.type) || !filterFit.has(match.dataset.fit), + ); + }); } -filterTypeElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { - checkbox.addEventListener('change', (e) => { - if (checkbox.checked) { - filterType.add(checkbox.value) - } else { - filterType.delete(checkbox.value) - } - filter(); +filterTypeElement + .querySelectorAll('input[type="checkbox"]') + .forEach((checkbox) => { + checkbox.addEventListener("change", (e) => { + if (checkbox.checked) { + filterType.add(checkbox.value); + } else { + filterType.delete(checkbox.value); + } + filter(); }); -}); + }); -filterFitElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { - checkbox.addEventListener('change', (e) => { - if (checkbox.checked) { - filterFit.add(checkbox.value) - } else { - filterFit.delete(checkbox.value) - } +filterFitElement + .querySelectorAll('input[type="checkbox"]') + .forEach((checkbox) => { + checkbox.addEventListener("change", (e) => { + if (checkbox.checked) { + filterFit.add(checkbox.value); + } else { + filterFit.delete(checkbox.value); + } - filter(); + filter(); }); -}); + }); -document.querySelectorAll('td.val').forEach(cell => { - const rowTitle = cell.parentElement.querySelector('th'); - cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1]; - cell.addEventListener('pointerenter', hoverCell); - cell.addEventListener('pointerleave', hoverOff); +document.querySelectorAll("td.val").forEach((cell) => { + const rowTitle = cell.parentElement.querySelector("th"); + cell.dataset.col = + sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1]; + cell.addEventListener("pointerenter", hoverCell); + cell.addEventListener("pointerleave", hoverOff); }); // initialize table -document.querySelectorAll('td.val:not(.empty)').forEach(cell => { - cell.dataset.val = cell.innerText; - cell.dataset.diff = ''; - cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML; +document.querySelectorAll("td.val:not(.empty)").forEach((cell) => { + cell.dataset.val = cell.innerText; + cell.dataset.diff = ""; + cell.dataset.dim = cell.parentElement.querySelector("td.dimension").innerHTML; - cell.addEventListener('click', selectCellPlus); + cell.addEventListener("click", selectCellPlus); }); // disable select on click outside value cell -document.addEventListener('click', e => { - document.querySelectorAll('td.val:not(.empty)').forEach(match => { - match.dataset.diff = ''; - match.classList.remove('highlighted') - match.classList.remove('currentDimension') - }); - document.querySelectorAll('td.dimension').forEach(match => { - match.classList.remove('currentDimension'); - }); -}); \ No newline at end of file +document.addEventListener("click", (e) => { + document.querySelectorAll("td.val:not(.empty)").forEach((match) => { + match.dataset.diff = ""; + match.classList.remove("highlighted"); + match.classList.remove("currentDimension"); + }); + document.querySelectorAll("td.dimension").forEach((match) => { + match.classList.remove("currentDimension"); + }); +}); diff --git a/styleguide/assets/script/styleguide.js b/styleguide/assets/script/styleguide.js index 7f3df14..65db9f6 100644 --- a/styleguide/assets/script/styleguide.js +++ b/styleguide/assets/script/styleguide.js @@ -1,19 +1,18 @@ -document.querySelector('nav > button')?.addEventListener('click', (e) => { - document.querySelector('nav').classList.toggle('visible'); -}) +document.querySelector("nav > button")?.addEventListener("click", (e) => { + document.querySelector("nav").classList.toggle("visible"); +}); -document.querySelectorAll('.toggleTheme')?.forEach( - element => element.addEventListener('click', (e) => { - const newTheme = element.dataset.theme; - applyTheme(newTheme); - } - ) +document.querySelectorAll(".toggleTheme")?.forEach((element) => + element.addEventListener("click", (e) => { + const newTheme = element.dataset.theme; + applyTheme(newTheme); + }), ); -document.querySelector('#themeDark').addEventListener('change', (e) => { - setTheme(e.target.checked ? 'dark' : 'system'); -}) +document.querySelector("#themeDark").addEventListener("change", (e) => { + setTheme(e.target.checked ? "dark" : "system"); +}); -document.querySelector('#themeLight').addEventListener('change', (e) => { - setTheme(e.target.checked ? 'light' : 'system'); -}) \ No newline at end of file +document.querySelector("#themeLight").addEventListener("change", (e) => { + setTheme(e.target.checked ? "light" : "system"); +}); diff --git a/styleguide/assets/style/base.css b/styleguide/assets/style/base.css index c51057a..a912fe7 100644 --- a/styleguide/assets/style/base.css +++ b/styleguide/assets/style/base.css @@ -129,14 +129,23 @@ --color-accent-1: var(--color-dark-accent-1); --color-accent-2: var(--color-dark-accent-2); --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-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)); + --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-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-secondary: var(--color-white); - --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, - border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; - --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) 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)); + --transition-glow: + filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, + border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; + --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) + drop-shadow(0 0 0.0625em var(--color-primary)) + 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 { display: none; @@ -163,8 +172,9 @@ --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --color-glow-primary: var(--color-argon-950); --color-glow-secondary: var(--color-krypton-950); - --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, - border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; + --transition-glow: + filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, + border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-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-2: var(--color-dark-accent-2); --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-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)); + --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-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-secondary: var(--color-white); - --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, - border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; - --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) 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)); + --transition-glow: + filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, + border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; + --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) + drop-shadow(0 0 0.0625em var(--color-primary)) + 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 { display: none; @@ -223,8 +242,9 @@ --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --color-glow-primary: var(--color-argon-950); --color-glow-secondary: var(--color-krypton-950); - --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, - border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; + --transition-glow: + filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, + border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-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)); --color-glow-primary: var(--color-argon-950); --color-glow-secondary: var(--color-krypton-950); - --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, - border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; + --transition-glow: + filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, + border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-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-2: var(--color-dark-accent-2); --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-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)); + --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-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-secondary: var(--color-white); - --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, - border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; - --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) 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)); + --transition-glow: + filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, + border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; + --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) + drop-shadow(0 0 0.0625em var(--color-primary)) + 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 { display: none; @@ -385,12 +415,18 @@ body { font-family: "Athiti", ui-sans, sans-serif; } -h1, .h1, -h2, .h2, -h3, .h3, -h4, .h4, -h5, .h5, -h6, .h6 { +h1, +.h1, +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; margin: 1rem 0; @@ -496,7 +532,9 @@ a { color: var(--color-accent-1); text-decoration: underline; } -a:hover, a:active, a:focus { +a:hover, +a:active, +a:focus { color: var(--color-accent-3); text-decoration: none; } @@ -504,7 +542,9 @@ a:visited { color: var(--color-accent-2); 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); text-decoration: none; } diff --git a/styleguide/assets/style/base.scss b/styleguide/assets/style/base.scss index 98060d9..53e3c4d 100644 --- a/styleguide/assets/style/base.scss +++ b/styleguide/assets/style/base.scss @@ -145,16 +145,24 @@ $mobile-navigation-height: 4rem; --color-accent-2: var(--color-dark-accent-2); --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-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)); + --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-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-secondary: var(--color-white); - --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, - border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; - - --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) 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)); + --transition-glow: + filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, + border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; + --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) + drop-shadow(0 0 0.0625em var(--color-primary)) + 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 { display: none; @@ -184,13 +192,13 @@ $mobile-navigation-height: 4rem; --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --color-glow-primary: var(--color-argon-950); --color-glow-secondary: var(--color-krypton-950); - --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, - border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; + --transition-glow: + filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, + border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400)); --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400)); - .light-only { display: initial; } @@ -237,91 +245,91 @@ $mobile-navigation-height: 4rem; // fonts @font-face { - font-family: 'Athiti'; + font-family: "Athiti"; font-weight: 700; - src: url('../font/athiti/Athiti-Bold.woff2') format('woff2'); + src: url("../font/athiti/Athiti-Bold.woff2") format("woff2"); } @font-face { - font-family: 'Athiti'; + font-family: "Athiti"; font-weight: 600; - src: url('../font/athiti/Athiti-SemiBold.woff2') format('woff2'); + src: url("../font/athiti/Athiti-SemiBold.woff2") format("woff2"); } @font-face { - font-family: 'Athiti'; + font-family: "Athiti"; font-weight: 500; - src: url('../font/athiti/Athiti-Medium.woff2') format('woff2'); + src: url("../font/athiti/Athiti-Medium.woff2") format("woff2"); } @font-face { - font-family: 'Athiti'; + font-family: "Athiti"; font-weight: 400; - src: url('../font/athiti/Athiti-Regular.woff2') format('woff2'); + src: url("../font/athiti/Athiti-Regular.woff2") format("woff2"); } @font-face { - font-family: 'Athiti'; + font-family: "Athiti"; font-weight: 300; - src: url('../font/athiti/Athiti-Light.woff2') format('woff2'); + src: url("../font/athiti/Athiti-Light.woff2") format("woff2"); } @font-face { - font-family: 'Athiti'; + font-family: "Athiti"; font-weight: 200; - src: url('../font/athiti/Athiti-ExtraLight.woff2') format('woff2'); + src: url("../font/athiti/Athiti-ExtraLight.woff2") format("woff2"); } @font-face { - font-family: 'Departure Mono'; - src: url('../font/departuremono/DepartureMono-Regular.woff2') format('woff2'); + font-family: "Departure Mono"; + src: url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2"); } @font-face { - font-family: 'Argon Glow'; + font-family: "Argon Glow"; font-weight: 100; - src: url('../font/argonglow/ArgonGlow-Thin.woff2') format('woff2'); + src: url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2"); } @font-face { - font-family: 'Argon Glow'; + font-family: "Argon Glow"; font-weight: 200; - src: url('../font/argonglow/ArgonGlow-ExtraLight.woff2') format('woff2'); + src: url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2"); } @font-face { - font-family: 'Argon Glow'; + font-family: "Argon Glow"; font-weight: 300; - src: url('../font/argonglow/ArgonGlow-Light.woff2') format('woff2'); + src: url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2"); } @font-face { - font-family: 'Argon Glow'; + font-family: "Argon Glow"; font-weight: 400; - src: url('../font/argonglow/ArgonGlow-Regular.woff2') format('woff2'); + src: url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2"); } @font-face { - font-family: 'Argon Glow'; + font-family: "Argon Glow"; font-weight: 500; - src: url('../font/argonglow/ArgonGlow-Medium.woff2') format('woff2'); + src: url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2"); } @font-face { - font-family: 'Argon Glow'; + font-family: "Argon Glow"; font-weight: 600; - src: url('../font/argonglow/ArgonGlow-SemiBold.woff2') format('woff2'); + src: url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2"); } @font-face { - font-family: 'Argon Glow'; + font-family: "Argon Glow"; font-weight: 700; - src: url('../font/argonglow/ArgonGlow-Bold.woff2') format('woff2'); + src: url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2"); } @font-face { - font-family: 'Argon Glow'; - src: url('../font/argonglow/ArgonGlow-VariableVF.woff2') format('woff2'); + font-family: "Argon Glow"; + src: url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2"); font-weight: 100 900; } @@ -334,22 +342,26 @@ $mobile-navigation-height: 4rem; body { background-color: var(--color-background); color: var(--color-foreground); - font-family: 'Athiti', ui-sans, sans-serif; + font-family: "Athiti", ui-sans, sans-serif; } -h1, .h1, -h2, .h2, -h3, .h3, -h4, .h4, -h5, .h5, -h6, .h6, -{ - font-family: 'Argon Glow', ui-sans, sans-serif; +h1, +.h1, +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; margin: 1rem 0; } - h1, .h1 { font-size: var(--text-5xl); @@ -387,7 +399,7 @@ h6, } pre { - font-family: 'Departure Mono', ui-monospace, monospace; + font-family: "Departure Mono", ui-monospace, monospace; font-size: 0.8em; display: block; padding: 1rem; @@ -404,7 +416,7 @@ pre { code, .code { - font-family: 'Departure Mono', ui-monospace, monospace; + font-family: "Departure Mono", ui-monospace, monospace; font-size: 0.8em; background-color: var(--color-shade-2); border-radius: 0.2em; @@ -415,7 +427,6 @@ table { width: fit-content; border-collapse: collapse; - th, td { padding: 0.25rem 0.5rem; @@ -493,7 +504,7 @@ figure { object-position: center; &.glitch { - filter: url('glitch.svg#glitch'); + filter: url("glitch.svg#glitch"); } } } @@ -506,6 +517,6 @@ img { margin: 0 auto; &.glitch { - filter: url('glitch.svg#glitch'); + filter: url("glitch.svg#glitch"); } -} \ No newline at end of file +} diff --git a/styleguide/assets/style/icons.scss b/styleguide/assets/style/icons.scss index 2ca3c92..a409267 100644 --- a/styleguide/assets/style/icons.scss +++ b/styleguide/assets/style/icons.scss @@ -1,4 +1,3 @@ - i[data-icon] { display: inline-block; width: 1em; @@ -8,7 +7,7 @@ i[data-icon] { box-sizing: content-box; &::before { - content: ''; + content: ""; display: block; width: 100%; height: 100%; @@ -18,39 +17,39 @@ i[data-icon] { background-color: currentColor; } - &[data-icon='arrow-left']::before { - mask-image: url('../icon/arrow_left.svg'); + &[data-icon="arrow-left"]::before { + mask-image: url("../icon/arrow_left.svg"); } - &[data-icon='arrow-up']::before { - mask-image: url('../icon/arrow_up.svg'); + &[data-icon="arrow-up"]::before { + mask-image: url("../icon/arrow_up.svg"); } - &[data-icon='arrow-right']::before { - mask-image: url('../icon/arrow_right.svg'); + &[data-icon="arrow-right"]::before { + mask-image: url("../icon/arrow_right.svg"); } - &[data-icon='arrow-down']::before { - mask-image: url('../icon/arrow_down.svg'); + &[data-icon="arrow-down"]::before { + mask-image: url("../icon/arrow_down.svg"); } - &[data-icon='info']::before { - mask-image: url('../icon/info.svg'); + &[data-icon="info"]::before { + mask-image: url("../icon/info.svg"); } - &[data-icon='home']::before { - mask-image: url('../icon/home.svg'); + &[data-icon="home"]::before { + mask-image: url("../icon/home.svg"); } - &[data-icon='menu-small']::before { - mask-image: url('../icon/menu_small.svg'); + &[data-icon="menu-small"]::before { + mask-image: url("../icon/menu_small.svg"); } - &[data-icon='light']::before { - mask-image: url('../icon/lightbulb.svg'); + &[data-icon="light"]::before { + mask-image: url("../icon/lightbulb.svg"); } - &[data-icon='warning']::before { - mask-image: url('../icon/warning.svg'); + &[data-icon="warning"]::before { + mask-image: url("../icon/warning.svg"); } -} \ No newline at end of file +} diff --git a/styleguide/assets/style/merch.css b/styleguide/assets/style/merch.css index 13d81f3..ae2a3e9 100644 --- a/styleguide/assets/style/merch.css +++ b/styleguide/assets/style/merch.css @@ -86,13 +86,13 @@ table td.val:not(.empty).hover { table td.val:not(.empty):hover { background-color: var(--color-shade-3); } -table td.val.highlighted[data-dim=A] { +table td.val.highlighted[data-dim="A"] { 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); } -table td.val.highlighted[data-dim=C] { +table td.val.highlighted[data-dim="C"] { background-color: rgb(255, 121, 117); } table td.val.currentDimension:not(.hover) { @@ -165,7 +165,7 @@ div.filterBox > div label { align-items: center; gap: 0.5rem; } -div.filterBox > div label input[type=checkbox] { +div.filterBox > div label input[type="checkbox"] { appearance: none; background-color: var(--color-shade-1); margin: 0; @@ -178,7 +178,7 @@ div.filterBox > div label input[type=checkbox] { position: relative; font-family: inherit; } -div.filterBox > div label input[type=checkbox]::before { +div.filterBox > div label input[type="checkbox"]::before { position: absolute; inset: 0; content: "x"; @@ -188,7 +188,7 @@ div.filterBox > div label input[type=checkbox]::before { transform: scale(0); transition: 120ms transform ease-in-out; } -div.filterBox > div label input[type=checkbox]:checked::before { +div.filterBox > div label input[type="checkbox"]:checked::before { transform: scale(1); } diff --git a/styleguide/assets/style/merch.scss b/styleguide/assets/style/merch.scss index fa7625a..1f33996 100644 --- a/styleguide/assets/style/merch.scss +++ b/styleguide/assets/style/merch.scss @@ -37,7 +37,7 @@ table { } } - tr:first-child > th[colspan='15'] { + tr:first-child > th[colspan="15"] { background-color: var(--color-shade-2); color: var(--color-dark-foreground); } @@ -86,7 +86,7 @@ table { td { &.val { - font-family: 'Departure Mono', ui-monospace, monospace; + font-family: "Departure Mono", ui-monospace, monospace; &.hover { background-color: transparent; @@ -105,15 +105,15 @@ table { } &.highlighted { - &[data-dim='A'] { + &[data-dim="A"] { background-color: rgb(96, 165, 249); } - &[data-dim='B'] { + &[data-dim="B"] { background-color: rgb(211, 129, 247); } - &[data-dim='C'] { + &[data-dim="C"] { background-color: rgb(255, 121, 117); } } @@ -122,7 +122,7 @@ table { background-color: var(--color-shade-2); } - &:not([data-diff=''])::after { + &:not([data-diff=""])::after { content: attr(data-diff); display: block; font-size: 0.8em; @@ -135,8 +135,8 @@ table { margin-top: -0.25rem; } - &[data-diff='']::after { - content: ''; + &[data-diff=""]::after { + content: ""; display: block; font-size: 0.8em; background-color: transparent; @@ -155,9 +155,9 @@ table { } &.currentDimension::after { - content: '>'; + content: ">"; /*color: var(--color-secondary);*/ - font-family: 'Departure Mono', ui-monospace, monospace; + font-family: "Departure Mono", ui-monospace, monospace; position: relative; right: calc(-0.5rem - 0.5ch); margin-left: -1ch; @@ -172,7 +172,7 @@ div.filterBox { margin: 2rem 0; padding: 1rem; position: relative; - font-family: 'Departure Mono', ui-monospace, monospace; + font-family: "Departure Mono", ui-monospace, monospace; display: flex; flex-wrap: wrap; column-gap: 4rem; @@ -180,7 +180,7 @@ div.filterBox { width: fit-content; &::before { - content: 'filter'; + content: "filter"; position: absolute; top: -0.6lh; background-color: var(--color-background); @@ -198,7 +198,7 @@ div.filterBox { align-items: center; gap: 0.5rem; - input[type='checkbox'] { + input[type="checkbox"] { appearance: none; background-color: var(--color-shade-1); margin: 0; @@ -214,7 +214,7 @@ div.filterBox { &::before { position: absolute; inset: 0; - content: 'x'; + content: "x"; text-align: center; font-size: 1.2rem; line-height: 0.7; @@ -228,4 +228,4 @@ div.filterBox { } } } -} \ No newline at end of file +} diff --git a/styleguide/assets/style/styleguide.css b/styleguide/assets/style/styleguide.css index 1220472..531ba49 100644 --- a/styleguide/assets/style/styleguide.css +++ b/styleguide/assets/style/styleguide.css @@ -129,14 +129,23 @@ --color-accent-1: var(--color-dark-accent-1); --color-accent-2: var(--color-dark-accent-2); --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-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)); + --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-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-secondary: var(--color-white); - --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, - border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; - --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) 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)); + --transition-glow: + filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, + border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; + --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) + drop-shadow(0 0 0.0625em var(--color-primary)) + 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 { display: none; @@ -163,8 +172,9 @@ --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --color-glow-primary: var(--color-argon-950); --color-glow-secondary: var(--color-krypton-950); - --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, - border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; + --transition-glow: + filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, + border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-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-2: var(--color-dark-accent-2); --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-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)); + --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-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-secondary: var(--color-white); - --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, - border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; - --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) 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)); + --transition-glow: + filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, + border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; + --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) + drop-shadow(0 0 0.0625em var(--color-primary)) + 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 { display: none; @@ -223,8 +242,9 @@ --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --color-glow-primary: var(--color-argon-950); --color-glow-secondary: var(--color-krypton-950); - --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, - border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; + --transition-glow: + filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, + border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-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)); --color-glow-primary: var(--color-argon-950); --color-glow-secondary: var(--color-krypton-950); - --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, - border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; + --transition-glow: + filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, + border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-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-2: var(--color-dark-accent-2); --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-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)); + --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-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-secondary: var(--color-white); - --transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, - border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; - --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) drop-shadow(0 0 0.0625em var(--color-primary)) 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)); + --transition-glow: + filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms, + border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms; + --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white)) + drop-shadow(0 0 0.0625em var(--color-primary)) + 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 { display: none; @@ -385,12 +415,18 @@ body { font-family: "Athiti", ui-sans, sans-serif; } -h1, .h1, -h2, .h2, -h3, .h3, -h4, .h4, -h5, .h5, -h6, .h6 { +h1, +.h1, +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; margin: 1rem 0; @@ -496,7 +532,9 @@ a { color: var(--color-accent-1); text-decoration: underline; } -a:hover, a:active, a:focus { +a:hover, +a:active, +a:focus { color: var(--color-accent-3); text-decoration: none; } @@ -504,7 +542,9 @@ a:visited { color: var(--color-accent-2); 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); text-decoration: none; } @@ -553,31 +593,31 @@ i[data-icon]::before { mask-repeat: no-repeat; 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"); } -i[data-icon][data-icon=arrow-up]::before { +i[data-icon][data-icon="arrow-up"]::before { 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"); } -i[data-icon][data-icon=arrow-down]::before { +i[data-icon][data-icon="arrow-down"]::before { 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"); } -i[data-icon][data-icon=home]::before { +i[data-icon][data-icon="home"]::before { 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"); } -i[data-icon][data-icon=light]::before { +i[data-icon][data-icon="light"]::before { 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"); } @@ -617,10 +657,14 @@ body header #backToWiki > img { body header #backToWiki:hover > img { transform: scale(1.05); } -body h1, body .h1, -body h2, body .h2, -body h3, body .h3, -body h4, body .h4 { +body h1, +body .h1, +body h2, +body .h2, +body h3, +body .h3, +body h4, +body .h4 { filter: var(--text-glow-primary); } body > div { @@ -706,10 +750,12 @@ body > div nav ul li.link-back { body > div nav ul li.active { 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); } -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; align-items: center; gap: 0.5rem; @@ -724,26 +770,60 @@ body > div nav ul li > a, body > div nav ul li label { transition-duration: 400ms; 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); } -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; } -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); background-color: transparent; filter: var(--filter-glow-primary); 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); } -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); 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); } body > div nav ul li:not(.themeToggle) i[data-icon] { @@ -779,15 +859,23 @@ body > div main { 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); text-decoration: underline; } -a.a-hover, a.a-hover:visited { +a.a-hover, +a.a-hover:visited { color: var(--color-accent-3); 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); text-decoration: underline; } @@ -873,11 +961,15 @@ main > div.generator img { width: 400px; height: 300px; object-fit: contain; - filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary)); + 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 { 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 { diff --git a/styleguide/assets/style/styleguide.scss b/styleguide/assets/style/styleguide.scss index b3d948f..d1685f8 100644 --- a/styleguide/assets/style/styleguide.scss +++ b/styleguide/assets/style/styleguide.scss @@ -1,5 +1,5 @@ -@import 'base'; -@import 'icons'; +@import "base"; +@import "icons"; * { box-sizing: border-box; @@ -40,10 +40,14 @@ body { } } - h1, .h1, - h2, .h2, - h3, .h3, - h4, .h4, { + h1, + .h1, + h2, + .h2, + h3, + .h3, + h4, + .h4 { filter: var(--text-glow-primary); } @@ -143,7 +147,8 @@ body { } } - > a, label { + > a, + label { display: flex; align-items: center; gap: 0.5rem; @@ -171,7 +176,8 @@ body { &:focus-within { background-color: transparent; - a, label { + a, + label { border: solid 0.1em var(--color-glow-primary); background-color: transparent; filter: var(--filter-glow-primary); @@ -242,7 +248,6 @@ body { } a { - &.a-regular, &.a-regular:hover, &.a-regular:active, @@ -294,7 +299,7 @@ a { } &::before { - content: ''; + content: ""; position: absolute; inset: 0; border-radius: 1rem; @@ -344,24 +349,26 @@ pre, } } - main > div.generator { display: flex; flex-direction: column; gap: 1em; align-items: center; - img { width: 400px; height: 300px; object-fit: contain; - filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary)); + filter: drop-shadow(0 0 0.0625em var(--color-white)) + drop-shadow(0 0 0.125em var(--color-primary)) + drop-shadow(0 0 0.25em var(--color-primary)); } i { font-size: 3em; - filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary)); + 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 { - font-family: 'Departure Mono', ui-monospace, monospace; + font-family: "Departure Mono", ui-monospace, monospace; color: var(--color-foreground); line-height: 1.5; } @@ -408,113 +415,113 @@ main > div.generator { } .glow-16-primary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 16px; color: var(--color-white); - filter: url('glows.svg#textBlur16Primary') + filter: url("glows.svg#textBlur16Primary"); } .glow-18-primary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 18px; color: var(--color-white); - filter: url('glows.svg#textBlur18Primary') + filter: url("glows.svg#textBlur18Primary"); } .glow-24-primary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 24px; color: var(--color-white); - filter: url('glows.svg#textBlur24Primary') + filter: url("glows.svg#textBlur24Primary"); } .glow-32-primary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 32px; color: var(--color-white); - filter: url('glows.svg#textBlur32Primary') + filter: url("glows.svg#textBlur32Primary"); } .glow-48-primary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 48px; color: var(--color-white); - filter: url('glows.svg#textBlur48Primary') + filter: url("glows.svg#textBlur48Primary"); } .glow-72-primary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 72px; color: var(--color-white); - filter: url('glows.svg#textBlur72Primary') + filter: url("glows.svg#textBlur72Primary"); } .glow-160-primary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 160px; color: var(--color-white); - filter: url('glows.svg#textBlur160Primary') + filter: url("glows.svg#textBlur160Primary"); } .glow-16-secondary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 16px; color: var(--color-white); - filter: url('glows.svg#textBlur16Secondary') + filter: url("glows.svg#textBlur16Secondary"); } .glow-18-secondary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 18px; color: var(--color-white); - filter: url('glows.svg#textBlur18Secondary') + filter: url("glows.svg#textBlur18Secondary"); } .glow-24-secondary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 24px; color: var(--color-white); - filter: url('glows.svg#textBlur24Secondary') + filter: url("glows.svg#textBlur24Secondary"); } .glow-32-secondary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 32px; color: var(--color-white); - filter: url('glows.svg#textBlur32Secondary') + filter: url("glows.svg#textBlur32Secondary"); } .glow-48-secondary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 48px; color: var(--color-white); - filter: url('glows.svg#textBlur48Secondary') + filter: url("glows.svg#textBlur48Secondary"); } .glow-72-secondary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 72px; color: var(--color-white); - filter: url('glows.svg#textBlur72Secondary') + filter: url("glows.svg#textBlur72Secondary"); } .glow-160-secondary { - font-family: 'Argon Glow', ui-sans, sans-serif; + font-family: "Argon Glow", ui-sans, sans-serif; font-weight: 400; font-size: 160px; color: var(--color-white); - filter: url('glows.svg#textBlur160Secondary') -} \ No newline at end of file + filter: url("glows.svg#textBlur160Secondary"); +} diff --git a/styleguide/colors/index.html b/styleguide/colors/index.html index 818cb31..e7ba2fc 100644 --- a/styleguide/colors/index.html +++ b/styleguide/colors/index.html @@ -1,374 +1,650 @@ - + - - + - - - + + + Color Guide - + - +
- - Logo of Easterhegg 2025. In the style of a neon sign: + <a href= + Logo of Easterhegg 2025. In the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. - Logo of Easterhegg 2025. In the style of a unpowered neon sign: + The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. + Logo of Easterhegg 2025. In the style of a unpowered neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink. - + The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." + /> +
- -
-
- -

- Work in progress - This style guide is still under development.
- Not all resources may be available yet, explanations and examples may be missing and things may - change without notice. -

-
-

Color Guide

-

- The design consists of two sets of colors: lightmode and darkmode. Each set consists of the same number - of colors, each of which has its own function. At the end of the page, one can find an overview of all - defined colors for quick lockup. Read on for the functions of each color. -

-

- The fore- and background colors are chosen for good contrast and are the same but swapped for light- and - darkmode. Most backgrounds should use the background color and most texts should use the foreground - color. In some cases, more subtelty is needed: -

-
    -
  • - If visual distinction through containers, boxes or similar is needed, the background shades can be - used to use a slightly lighter background color (in case of darkmode) or a slightly darker one (in - case of lightmode). Preferably, each shade should corespond to a layer of nesting, but if desired, - one can also mix-and-match, as long as the background for the main content is always the regular - background color. -
    • -
  • - 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. -
    • -
-

- 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: -

- - - - - - - - - - - - - - -
Overview of link highlighting
Regular Link:https://eh22.easterhegg.eu/
Hover/Focus/Active Link:https://eh22.easterhegg.eu/
Visited Link:https://eh22.easterhegg.eu/
-

- 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. -

+ +
+
+ +

+ Work in progress + This style guide is still under development.
+ Not all resources may be available yet, explanations and examples + may be missing and things may change without notice. +

+
+

Color Guide

+

+ The design consists of two sets of colors: lightmode and darkmode. + Each set consists of the same number of colors, each of which has its + own function. At the end of the page, one can find an overview of all + defined colors for quick lockup. Read on for the functions of each + color. +

+

+ The fore- and background colors are chosen for good contrast and are + the same but swapped for light- and darkmode. Most backgrounds should + use the background color and most texts should use the foreground + color. In some cases, more subtelty is needed: +

+
    +
  • + If visual distinction through containers, boxes or similar is + needed, the background shades can be used to use a slightly lighter + background color (in case of darkmode) or a slightly darker one (in + case of lightmode). Preferably, each shade should corespond to a + layer of nesting, but if desired, one can also mix-and-match, as + long as the background for the main content is always the regular + background color. +
    • +
  • + 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. +
    • +
+

+ 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: +

+ + + + + + + + + + + + + + +
+ Overview of link highlighting +
Regular Link: + https://eh22.easterhegg.eu/ +
Hover/Focus/Active Link:https://eh22.easterhegg.eu/
Visited Link: + https://eh22.easterhegg.eu/ +
+

+ 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. +

-

Digital Media

-
-
-

Darkmode

+

Digital Media

+
+
+

Darkmode

-
- Fore- & Background +
+ Fore- & Background -
-
- #f2f0f5 -
+
+
+ #f2f0f5 +
-
-
- #0c011f -
-
+
+
+ #0c011f +
+
-
- Background Shades +
+ Background Shades -
-
- #180736 -
+
+
+ #180736 +
-
-
- #26114B -
+
+
+ #26114B +
-
-
- #371F60 -
+
+
+ #371F60 +
-
-
- #4B3176 -
-
+
+
+ #4B3176 +
+
-
- Text Shades +
+ Text Shades -
-
- #b2a0cb -
+
+
+ #b2a0cb +
-
-
- #957eb5 -
+
+
+ #957eb5 +
-
-
- #7a60a0 -
+
+
+ #7a60a0 +
-
-
- #61468b -
-
+
+
+ #61468b +
+
-
- Primary & Secondary +
+ Primary & Secondary -
-
- #c6257d -
+
+
+ #c6257d +
-
-
- #4dadd8 -
-
+
+
+ #4dadd8 +
+
-
- Error & Success +
+ Error & Success -
-
- #bb2626 -
+
+
+ #bb2626 +
-
-
- #54aa18 -
-
+
+
+ #54aa18 +
+
-
- Accents +
+ Accents -
-
- #60a5f9 -
+
+
+ #60a5f9 +
-
-
- #d381f7 -
+
+
+ #d381f7 +
-
-
- #ff7975 -
-
-
+
+
+ #ff7975 +
+ +
-
-

Lightmode

+
+

Lightmode

-
- Fore- & Background +
+ Fore- & Background -
-
- #0c011f -
+
+
+ #0c011f +
-
-
- #f2f0f5 -
-
+
+
+ #f2f0f5 +
+
-
- Background Shades +
+ Background Shades -
-
- #d1c6e0 -
+
+
+ #d1c6e0 +
-
-
- #b2a0cb -
+
+
+ #b2a0cb +
-
-
- #957eb5 -
+
+
+ #957eb5 +
-
-
- #7a60a0 -
-
+
+
+ #7a60a0 +
+
-
- Text Shades +
+ Text Shades -
-
- #26114b -
+
+
+ #26114b +
-
-
- #371f60 -
+
+
+ #371f60 +
-
-
- #4b3176 -
+
+
+ #4b3176 +
-
-
- #61468b -
-
+
+
+ #61468b +
+
-
- Primary & Secondary +
+ Primary & Secondary -
-
- #9a0a61 -
+
+
+ #9a0a61 +
-
-
- #167fac -
-
+
+
+ #167fac +
+
-
- Error & Success +
+ Error & Success -
-
- #b21010 -
+
+
+ #b21010 +
-
-
- #47990f -
-
+
+
+ #47990f +
+
-
- Accents +
+ Accents -
-
- #303ec0 -
+
+
+ #303ec0 +
-
-
- #6c366c -
+
+
+ #6c366c +
-
-
- #932f0a -
-
-
+
+
+ #932f0a +
+ +
+
+ +

Printing

+

+ Our primary and secondary colors are also defined for CMYK printing: +

+ +
+
+ CMYK Colors + +
+
+ 0/94/6/0
-

Printing

-

- Our primary and secondary colors are also defined for CMYK printing: -

- -
-
- CMYK Colors - -
-
- 0/94/6/0 -
- -
-
- 81/0/10/0 -
-
+
+
+ 81/0/10/0
-
+ +
+ - - - \ No newline at end of file + + diff --git a/styleguide/demopage/index.html b/styleguide/demopage/index.html index 27a043f..3aad67b 100644 --- a/styleguide/demopage/index.html +++ b/styleguide/demopage/index.html @@ -1,125 +1,196 @@ - + - - + - - - + + + Demopage - + - +
- - Logo of Easterhegg 2025. In the style of a neon sign: + <a href= + Logo of Easterhegg 2025. In the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. - Logo of Easterhegg 2025. In the style of a unpowered neon sign: + The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. + Logo of Easterhegg 2025. In the style of a unpowered neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink. - + The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." + /> +
- -
-
- -

- Work in progress - This style guide is still under development.
- Not all resources may be available yet, explanations and examples may be missing and things may - change without notice. -

-
-

Demopage

-

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. -

+ +
+
+ +

+ Work in progress + This style guide is still under development.
+ Not all resources may be available yet, explanations and examples + may be missing and things may change without notice. +

+
+

Demopage

+

+ 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. +

-
-

Overview of Link-Highlighting

- - - - - - - - - - - - - -
Regular Link:https://eh22.easterhegg.eu/
Hover/Focus/Active Link:https://eh22.easterhegg.eu/
Visited Link:https://eh22.easterhegg.eu/
-
+
+

Overview of Link-Highlighting

+ + + + + + + + + + + + + +
Regular Link: + https://eh22.easterhegg.eu/ +
Hover/Focus/Active Link: + https://eh22.easterhegg.eu/ +
Visited Link: + https://eh22.easterhegg.eu/ +
+
-
-

Ordered and Unordered Lists

-

This is just a simple section containing plain text as well as some lists. This way you can get a - feel for how lists fit into their surrounding content. Have a look at this ordered list: We simply - prefix each item with a one-indexed, right aligned number followed by a dot.

-
    -
  1. Short item no. 1.
    2. -
  2. 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.
    3. -
  3. 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.
    4. -
-

But sometimes, the order of items doesn't matter, in that case, we instead put a basic bullet point - infront of each item:

-
    -
  • Short item no. 1.
    • -
  • 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.
    • -
  • 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.
    • -
-
+
+

Ordered and Unordered Lists

+

+ This is just a simple section containing plain text as well as some + lists. This way you can get a feel for how lists fit into their + surrounding content. Have a look at this ordered list: We simply + prefix each item with a one-indexed, right aligned number followed + by a dot. +

+
    +
  1. Short item no. 1.
    2. +
  2. + 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. +
    3. +
  3. + 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. +
    4. +
+

+ But sometimes, the order of items doesn't matter, in that case, we + instead put a basic bullet point infront of each item: +

+
    +
  • Short item no. 1.
    • +
  • + 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. +
    • +
  • + 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. +
    • +
+
-
-

Preformatted Text

- -

This example doesn't use any syntax highlighting, but one can of course use a highlighting theme to - make it easier to differentiate identifiers and similar. At the current state, we don't recommended - a specific highlight-theme, but this might still change.

- 
#include <stdlib.h>
+        

+          
Preformatted Text

+          
+          

+            This example doesn't use any syntax highlighting, but one can of
+            course use a highlighting theme to make it easier to differentiate
+            identifiers and similar. At the current state, we don't recommended
+            a specific highlight-theme, but this might still change.
+          

+          
#include <stdlib.h>
 
 int *positives(int *numbers, int *size) {
     int new_size = 0;
@@ -134,45 +205,73 @@ int *positives(int *numbers, int *size) {
     *size = new_size;
     return realloc(numbers, sizeof(*numbers) * new_size);
 }

-                
This is a simple function written in C, which removes all negative integers from an array and updates
-                    its element count.

-            

+          

+            This is a simple function written in C, which removes all negative
+            integers from an array and updates its element count.
+          

+
-
-

Section With Image

-

When including images in your content, you can opt into applying an SVG filter that adds visual - glitches to the image. This shouldn't be used on images with text or important details, because the - glitches will most likely reduce readability. Let's use the following plain image:

-
- Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind + <section> + <h2>Section With Image</h2> + <p> + When including images in your content, you can opt into applying an + SVG filter that adds visual glitches to the image. This shouldn't be + used on images with text or important details, because the glitches + will most likely reduce readability. Let's use the following plain + image: + </p> + <figure> + <img + src= -
Example image without any distortion applied.
-
-

Now, in HTML you could simply specify class="glitch" on the image tag to add the SVG - filter dynamically, but this won't render said filter in Apple's Safari, which has been a known - issue for many years. So instead, we also made a simple web-tool to apply the - filter 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.

-
- The same photograph as before, except with a glitchy filer applied. The first effect applies to + plain. +
+ Example image without any distortion applied. +
+
+

+ Now, in HTML you could simply specify class="glitch" on + the image tag to add the SVG filter dynamically, but this won't + render said filter in Apple's Safari, which has been a known issue + for many years. So instead, we also made + a simple web-tool to apply the filter 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. +

+
+ 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 one distorts the image by offsetting parts of the image horizontally by seemingly random yet - somewhat osscilating amounts. -
Example image with visual glitches applied.
-
-

Of course, every image should include an image description. No matter if its a website, social media - post, or a PDF. Most if not all wordprocessors (this includes Word, LaTeX and Typst) support this in - one way or another.

-

We would also prefer it, if no one uses "AI-generated" images. The 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.)

-
-
+ somewhat osscilating amounts." + /> +
Example image with visual glitches applied.
+ +

+ Of course, every image should include an image description. No + matter if its a website, social media post, or a PDF. Most if not + all wordprocessors (this includes Word, LaTeX and Typst) support + this in one way or another. +

+

+ We would also prefer it, if no one uses "AI-generated" images. The + 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.) +

+ +
- - - - \ No newline at end of file + + + diff --git a/styleguide/generator/index.html b/styleguide/generator/index.html index 2473706..db198d7 100644 --- a/styleguide/generator/index.html +++ b/styleguide/generator/index.html @@ -1,137 +1,199 @@ - - + - - - + + + Document - + - +
- - Logo of Easterhegg 2025. In the style of a neon sign: + <a href= + Logo of Easterhegg 2025. In the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. - Logo of Easterhegg 2025. In the style of a unpowered neon sign: + The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. + Logo of Easterhegg 2025. In the style of a unpowered neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink. - + The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." + /> +
- -
-
- -

- Work in progress - This style guide is still under development.
- Not all resources may be available yet, explanations and examples may be missing and things may - change without notice. -

-
-
+ +
+
+ +

+ Work in progress + This style guide is still under development.
+ Not all resources may be available yet, explanations and examples + may be missing and things may change without notice. +

+
+
+
+ +
-
- -
+ + + - - - +
+ + + + + + + -
- - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + - - - - - + + + + - - - - + + + + +
- - - - -
- - - -
-
+ +
+
- - - - \ No newline at end of file + + + diff --git a/styleguide/glow/index.html b/styleguide/glow/index.html index 03e7d27..e987a3a 100644 --- a/styleguide/glow/index.html +++ b/styleguide/glow/index.html @@ -1,79 +1,119 @@ - + - - + - - - + + + Glow - + - +
- - Logo of Easterhegg 2025. In the style of a neon sign: + <a href= + Logo of Easterhegg 2025. In the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. - Logo of Easterhegg 2025. In the style of a unpowered neon sign: + The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. + Logo of Easterhegg 2025. In the style of a unpowered neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink. - + The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." + /> +
- -
+ +
+
+ +

+ Work in progress + This style guide is still under development.
+ Not all resources may be available yet, explanations and examples + may be missing and things may change without notice. +

+
-
- -

- Work in progress - This style guide is still under development.
- Not all resources may be available yet, explanations and examples may be missing and things may - change without notice. -

-
- -

Glow

- -
+

Glow

+ +
- - - - \ No newline at end of file + + + diff --git a/styleguide/iconography/index.html b/styleguide/iconography/index.html index 261afce..de26602 100644 --- a/styleguide/iconography/index.html +++ b/styleguide/iconography/index.html @@ -1,135 +1,211 @@ - + - - + - - - + + + Iconography - + - +
- - Logo of Easterhegg 2025. In the style of a neon sign: + <a href= + Logo of Easterhegg 2025. In the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. - Logo of Easterhegg 2025. In the style of a unpowered neon sign: + The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. + Logo of Easterhegg 2025. In the style of a unpowered neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink. - + The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." + /> +
- -
+ +
+
+ +

+ Work in progress + This style guide is still under development.
+ Not all resources may be available yet, explanations and examples + may be missing and things may change without notice. +

+
-
- -

- Work in progress - This style guide is still under development.
- Not all resources may be available yet, explanations and examples may be missing and things may - change without notice. -

-
- -

Iconography

-

Icons can help with conveying meaning or to help with directions. In order to fit into the overall theme, - we wanted to have a set of icons that implement the same design characteristics and rules as the logo, about which you can read more here, and our font, Argon Glow, which we talk about more in the typography.

-

Of course, creating a full iconset would require years of work for such a small team, which is why we - focused on the icons needed for the wiki, styleguide and signage on the event. At time of writing that - is still roughly sixty icons which we needed to design. They can be found in our design repository (not - yet published).

- -

Luckily, the rules which the icons needed to adhere to, also meant, that the icons would need to be - fairly simple. Uniform bend-radii (based on a circle, not bezier), a minimum gap distance, and as few - lines as possible, all within a limited canvas size. In the end, we decide on an SVG canvas of 600 by - 600 units with a uniform grid of 25 units between gridlines. Line width was set to 50 units, and the - same for a 90° bend's radius. Because gaps didn't always align perfectly to the grid, they were chosen - to always be at least 50 units and rounded up to the next gridline. Because we are aiming at a - neon-esque tube look, line-caps were set to rounded, adding a semicircle with a radius of 25 units.

-
- - - - - - - - - - - - - - - - - - - - -
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.
-
-
+

Iconography

+

+ Icons can help with conveying meaning or to help with directions. In + order to fit into the overall theme, we wanted to have a set of icons + that implement the same design characteristics and rules as the + logo, about which you can read more here, and + our font, + Argon Glow, which we talk about more in the typography. +

+

+ Of course, creating a full iconset would require years of work for + such a small team, which is why we focused on the icons needed for the + wiki, styleguide and signage on the event. At time of writing that is + still roughly sixty icons which we needed to design. They can be found + in our design repository (not yet published). +

+ +

+ Luckily, the rules which the icons needed to adhere to, also meant, + that the icons would need to be fairly simple. Uniform bend-radii + (based on a circle, not bezier), a minimum gap distance, and as few + lines as possible, all within a limited canvas size. In the end, we + decide on an SVG canvas of 600 by 600 units with a uniform grid of 25 + units between gridlines. Line width was set to 50 units, and the same + for a 90° bend's radius. Because gaps didn't always align perfectly to + the grid, they were chosen to always be at least 50 units and rounded + up to the next gridline. Because we are aiming at a neon-esque tube + look, line-caps were set to rounded, adding a semicircle with a radius + of 25 units. +

+
+ + + + + + + + + + + + + + + + + + + + +
+ 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. +
+
+
- - - - \ No newline at end of file + + + diff --git a/styleguide/index.html b/styleguide/index.html index 9f7a8e1..431e402 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -1,78 +1,111 @@ - + - - + - - - + + + Color Guide - + - +
- - Logo of Easterhegg 2025. In the style of a neon sign: + <a href= + Logo of Easterhegg 2025. In the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. - Logo of Easterhegg 2025. In the style of a unpowered neon sign: + The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. + Logo of Easterhegg 2025. In the style of a unpowered neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink. - + The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." + /> +
- -
-

Styleguide Easterhegg 2025

+ +
+

Styleguide Easterhegg 2025

-
- -

- Work in progress - This style guide is still under development.
- Not all resources may be available yet, explanations and examples may be missing and things may - change without notice. -

-
- -
- +
+ +

+ Work in progress + This style guide is still under development.
+ Not all resources may be available yet, explanations and examples + may be missing and things may change without notice. +

+
+
+
- - - \ No newline at end of file + + diff --git a/styleguide/logo/index.html b/styleguide/logo/index.html index 2596bf9..8b9cbcc 100644 --- a/styleguide/logo/index.html +++ b/styleguide/logo/index.html @@ -1,136 +1,225 @@ - + - - + - - - + + + Logo - + - +
- - Logo of Easterhegg 2025. In the style of a neon sign: + <a href= + Logo of Easterhegg 2025. In the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. - Logo of Easterhegg 2025. In the style of a unpowered neon sign: + The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. + Logo of Easterhegg 2025. In the style of a unpowered neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink. - + The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." + /> +
- -
+ +
+
+ +

+ Work in progress + This style guide is still under development.
+ Not all resources may be available yet, explanations and examples + may be missing and things may change without notice. +

+
-
- -

- Work in progress - This style guide is still under development.
- Not all resources may be available yet, explanations and examples may be missing and things may - change without notice. -

-
+

Logo

+

+ One of the primary design elements of any design is of course its + logo. But because a single logo doesn't fit each use-case, e.g. in + terms of aspect ratio or detail, we created multiple variants. On top + of that, each variant also has its separate dark and light theme + variants, in case the logo is used on a light background. But in + general, as with the entire design, dark mode is the preferred + 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). +

+ -

Logo

-

One of the primary design elements of any design is of course its logo. But because a single logo doesn't - fit each use-case, e.g. in terms of aspect ratio or detail, we created multiple variants. On top of - that, each variant also has its separate dark and light theme variants, in case the logo is used on a - light background. But in general, as with the entire design, dark mode is the preferred 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).

- +

Full Logo

+

+ The most present logo consists of the hare and egg, as well as the + motto Unhandled Eggception and the eventname + Easterhegg 2025. It is used on this website and can be used as + a banner, title image or for posters and similar. The eventname on it + is optional, variants without it can be found—as all other logo + files—using the link above. +

+
+ 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. + The same logo as the previous one, but instead in the style of an unpowered neon sign, only glowing dimly. +
-

Full Logo

-

The most present logo consists of the hare and egg, as well as the motto Unhandled Eggception and - the eventname Easterhegg 2025. It is used on this website and can be used as a banner, title - image or for posters and similar. The eventname on it is optional, variants without it can be - found—as all other logo files—using the link above.

-
- 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. - The same logo as the previous one, but instead in the style of an unpowered neon sign, only glowing dimly. -
+

EH22 Logo

+

+ Especially useful for our matrix space, this logo variant featuring + only the "EH22" lettering has a more rectangular appearance and is + therefore useful for profile-esque pictures, where the eventname might + not always be visible, e.g. in a collapsed room-overview in the + Element matrix client. +

+
+ 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. + The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly. +
-

EH22 Logo

-

Especially useful for our matrix space, this logo variant featuring only the "EH22" lettering has a more - rectangular appearance and is therefore useful for profile-esque pictures, where the eventname might not - always be visible, e.g. in a collapsed room-overview in the Element matrix client.

-
- 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. - The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly. -
+

Icon Logos

+

+ The following logo variants are all intended for a similar + profile-esque use-case as the EH22 logo above. The main difference is, + that they don't have an explicit mention of the eventname. Meaning + they should preferably be used, if the eventname is always visible + (e.g. via the display name on the + Easterhegg 2025 mastodon account) 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. +

+
+ 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. + The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly. +
-

Icon Logos

-

The following logo variants are all intended for a similar profile-esque use-case as the EH22 logo above. - The main difference is, that they don't have an explicit mention of the eventname. Meaning they should - preferably be used, if the eventname is always visible (e.g. via the display name on the Easterhegg 2025 mastodon account) 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.

-
- 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. - The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly. -
+
+ Egg-only logo of Easterhegg 2025 in the style of a neon sign: It only features the egg from before. + The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly. +
-
- Egg-only logo of Easterhegg 2025 in the style of a neon sign: It only features the egg from before. - The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly. -
- -
- Hare-only logo of Easterhegg 2025 in the style of a neon sign: It only features the hare from before. - The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly. -
-
+
+ Hare-only logo of Easterhegg 2025 in the style of a neon sign: It only features the hare from before. + The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly. +
+
- - - - \ No newline at end of file + + + diff --git a/styleguide/merch/de/index.html b/styleguide/merch/de/index.html index 52d1d5a..376c898 100644 --- a/styleguide/merch/de/index.html +++ b/styleguide/merch/de/index.html @@ -1,1224 +1,1342 @@ - - - - - - - + + + + + + EH22 - Merch Größenvergleich - + - +
-
-

Merch Grössenvergleich

-
-
-

Unten findest du eine Größen-Tabelle mit Größen und Maßen an Merchandise-Kleidung von diesem und - vergangenen Chaos Veranstaltungen. Die Tabelle soll dabei helfen, passende Kleidungsstücke zu - wählen, basierend auf sich bereits im Besitz befindender Kleidung vergangener Veranstaltungen. - Dabei basieren alle Angaben auf den Spezifikationen der jeweiligen Kleidungshersteller. Stücke - haben außerdem verschiedene Stoffe mit unterschiedlicher Elastizität (sprich Dehnbarkeit). D. h. - es kann zu Unstimmigkeiten kommen im Bezug auf die reale Passform.

-

Für jedes Kleidungsstück sind zwei oder drei Arten an Maße angegeben. Die Bedeutung ist - einerseits in - der schematischen Darstellung ablesbar, oder im Folgenden erklärt:

-
    -
  • - A – Brust: gemessen ca. 2.5 cm unter den Achseln, über die Breite des (flachen) - Torsos. -
    • -
  • - B – Länge: Distanz von der Oberseite der Schultern bis ganz nach unten. -
    • -
  • - C – Ärmel: Bei der Naht zwischen Ärmel und Torso, vom obersten Punkt bis zum - Ende des Armes gemessen. -
    • -
-

Du kannst jede Zelle, die einen Wert enthält, anklicken, um zu sehen, wie stark die Maße (A, B - und C) der verschiedenen Größen jedes Kleidungsstückes von dem ausgewählten abweichen. Du kannst - außerdem bei Bedarf nur die Differenzen für ein bestimmtes Maß (z. B. nur A) anzeigen lassen, - indem du bei einer Größe ein zweites Mal klickst, diesmal in der jeweiligen Zeile des Maßes.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
+
+

Merch Grössenvergleich

+
+
+

+ Unten findest du eine Größen-Tabelle mit Größen und Maßen an + Merchandise-Kleidung von diesem und vergangenen Chaos + Veranstaltungen. Die Tabelle soll dabei helfen, passende + Kleidungsstücke zu wählen, basierend auf sich bereits im Besitz + befindender Kleidung vergangener Veranstaltungen. Dabei basieren + alle Angaben auf den Spezifikationen der jeweiligen + Kleidungshersteller. Stücke haben außerdem verschiedene Stoffe mit + unterschiedlicher Elastizität (sprich Dehnbarkeit). D. h. es kann + zu Unstimmigkeiten kommen im Bezug auf die reale Passform. +

+

+ Für jedes Kleidungsstück sind zwei oder drei Arten an Maße + angegeben. Die Bedeutung ist einerseits in der schematischen + Darstellung ablesbar, oder im Folgenden erklärt: +

+
    +
  • + A – Brust: gemessen ca. 2.5 cm unter den Achseln, + über die Breite des (flachen) Torsos. +
    • +
  • + B – Länge: Distanz von der Oberseite der Schultern + bis ganz nach unten. +
    • +
  • + C – Ärmel: Bei der Naht zwischen Ärmel und Torso, + vom obersten Punkt bis zum Ende des Armes gemessen. +
    • +
+

+ Du kannst jede Zelle, die einen Wert enthält, anklicken, um zu + sehen, wie stark die Maße (A, B und C) der verschiedenen Größen + jedes Kleidungsstückes von dem ausgewählten abweichen. Du kannst + außerdem bei Bedarf nur die Differenzen für ein bestimmtes Maß (z. + B. nur A) anzeigen lassen, indem du bei einer Größe ein zweites + Mal klickst, diesmal in der jeweiligen Zeile des Maßes. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Easterhegg - EH22
KleidungsstückMarkeModellMaßeXXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		Stanley/StellaStella Ella STTW174
- Produktdatenblatt		A394245485155
B54.557.559.561.563.565.5
C1818.51919.52020.5
Shirt
Straight		Stanley/StellaCreator 2.0 STTU169
- Produktdatenblatt		A45.547.549.553.556.559.563.567.572.577.5
B62656973757779818384
C202122.52424.52525.5262626
HoodieStanley/StellaCruiser 2.0 STSU177
- Produktdatenblatt		A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
ZipperStanley/StellaCultivator 2.0 STSU179
- Produktdatenblatt		A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
Congress - 38C3
KleidungsstückMarkeModellMaßeXXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		Stanley/StellaStella Ella STTW174same as EH22 Shirt Fitted
Shirt
Straight
Black/Navy/Green		Stanley/StellaCreator 2.0 STTU169same as EH22 Shirt Straight
Shirt
Straight
Burgundy		stormtextilST102 Heavy LuxeA4345485256606366707478
B6469717476798285888889
HoodieStanley/StellaCruiser STSU822same as camp23 Hoodie
ZipperStanley/StellaConnector STSU820A46.54951.5545760636671
B636568727476788082
C60.561.56465.56768.5707070
Embroidered
Heavy Shirt		Stanley/StellaSparker 2.0 STTU171A47.549.551.555.558.561.565.569.5
B6467717577798183
C202122.52424.52525.526
Embroidered
Sweatshirt		Stanley/StellaChanger 2.0 STSU178A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
DressStanley/StellaStella Spinner STDW144A46.54952555861
B868890929393
C191920202121
GPN - gpn22
KleidungsstückMarkeModellMaßeXXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		 SOL'S Imperial WOMEN11502A414447505356
B616365676971
Shirt
Straight		 SOL'S Imperial11500A485053565962656871
B647072747678808284
Zipper
Fitted		Russell EuropeLadies' Authentic
Zipped Hood Jacket
0R266F0		A4548515457
B65.567.569.571.573.5
Zipper
Straight		Russell EuropeMen's Authentic
Zipped Hood Jacket
0R266M0		A5154576063666972
B6466.56971.57476.57983.5
Congress - 37C3
KleidungsstückMarkeModellMaßeXXSXSSMLXL2XL3XL4XL5XL6XL
Angelshirt
Fitted		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Angelshirt
Straight		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Shirt
Fitted
Black		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Shirt
Straight
Black		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Hoodie
Black		Stanley/StellaCruiser STSU822same as camp23 Hoodie
Zipper
Black		Stanley/StellaCultivator STSM566same as camp23 Zipper
Shirt
Fitted
Blue		KaribanK3026ICA43464952555861
B60626466687072
C15.7516.517.251818.7519.520.25
Shirt
Straight
Blue		KaribanK3032ICA44475053565962656871
B66687072747678808284
C15.51616.51717.51818.51919.520
Hoodie
Blue		KaribanK4027A5154576063666972
B6870727476788082
C6667686970717273
Zipper
Blue		KaribanK4030A4851545760636669
B6668707274767880
C6566676869707172
Camp - Camp23
KleidungsstückMarkeModellMaßeXXSXSSMLXL2XL3XL4XL5XL6XL
Angelshirt
Fitted		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Angelshirt
Straight		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Shirt
Fitted		Stanley/StellaStella Expresser STTW032A4244.547.550.553.556.5
B626466686969
C161617171818
Shirt
Straight		Stanley/StellaCreator STTU755A43.5464952555861646974
B64666972747678808284
C1919.520.521.522.522.523.524.524.525
HoodieStanley/StellaCruiser STSU822A46.54951.554576063667176
B63656872747678808283
C60.561.56465.56768.570707070
ZipperStanley/StellaCultivator STSM566A46.54951.554576063667176
B61636872747678808283
C59606465.56768.570707070
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Easterhegg - EH22
KleidungsstückMarkeModellMaßeXXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		Stanley/Stella + Stella Ella STTW174
+ Produktdatenblatt + 		A394245485155
B54.557.559.561.563.565.5
C1818.51919.52020.5
Shirt
Straight		Stanley/Stella + Creator 2.0 STTU169
+ Produktdatenblatt + 		A45.547.549.553.556.559.563.567.572.577.5
B62656973757779818384
C202122.52424.52525.5262626
HoodieStanley/Stella + Cruiser 2.0 STSU177
+ Produktdatenblatt + 		A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
ZipperStanley/Stella + Cultivator 2.0 STSU179
+ Produktdatenblatt + 		A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
Congress - 38C3
KleidungsstückMarkeModellMaßeXXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		Stanley/StellaStella Ella STTW174same as EH22 Shirt Fitted
Shirt
Straight
Black/Navy/Green		Stanley/StellaCreator 2.0 STTU169same as EH22 Shirt Straight
Shirt
Straight
Burgundy		stormtextilST102 Heavy LuxeA4345485256606366707478
B6469717476798285888889
HoodieStanley/StellaCruiser STSU822same as camp23 Hoodie
ZipperStanley/StellaConnector STSU820A46.54951.5545760636671
B636568727476788082
C60.561.56465.56768.5707070
Embroidered
Heavy Shirt		Stanley/StellaSparker 2.0 STTU171A47.549.551.555.558.561.565.569.5
B6467717577798183
C202122.52424.52525.526
Embroidered
Sweatshirt		Stanley/StellaChanger 2.0 STSU178A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
DressStanley/StellaStella Spinner STDW144A46.54952555861
B868890929393
C191920202121
GPN - gpn22
KleidungsstückMarkeModellMaßeXXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		SOL'S Imperial WOMEN11502A414447505356
B616365676971
Shirt
Straight		SOL'S Imperial11500A485053565962656871
B647072747678808284
Zipper
Fitted		Russell Europe + Ladies' Authentic
Zipped Hood Jacket
0R266F0 + 		A4548515457
B65.567.569.571.573.5
Zipper
Straight		Russell Europe + Men's Authentic
Zipped Hood Jacket
0R266M0 + 		A5154576063666972
B6466.56971.57476.57983.5
Congress - 37C3
KleidungsstückMarkeModellMaßeXXSXSSMLXL2XL3XL4XL5XL6XL
Angelshirt
Fitted		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Angelshirt
Straight		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Shirt
Fitted
Black		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Shirt
Straight
Black		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Hoodie
Black		Stanley/StellaCruiser STSU822same as camp23 Hoodie
Zipper
Black		Stanley/StellaCultivator STSM566same as camp23 Zipper
Shirt
Fitted
Blue		KaribanK3026ICA43464952555861
B60626466687072
C15.7516.517.251818.7519.520.25
Shirt
Straight
Blue		KaribanK3032ICA44475053565962656871
B66687072747678808284
C15.51616.51717.51818.51919.520
Hoodie
Blue		KaribanK4027A5154576063666972
B6870727476788082
C6667686970717273
Zipper
Blue		KaribanK4030A4851545760636669
B6668707274767880
C6566676869707172
Camp - Camp23
KleidungsstückMarkeModellMaßeXXSXSSMLXL2XL3XL4XL5XL6XL
Angelshirt
Fitted		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Angelshirt
Straight		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Shirt
Fitted		Stanley/StellaStella Expresser STTW032A4244.547.550.553.556.5
B626466686969
C161617171818
Shirt
Straight		Stanley/StellaCreator STTU755A43.5464952555861646974
B64666972747678808284
C1919.520.521.522.522.523.524.524.525
HoodieStanley/StellaCruiser STSU822A46.54951.554576063667176
B63656872747678808283
C60.561.56465.56768.570707070
ZipperStanley/StellaCultivator STSM566A46.54951.554576063667176
B61636872747678808283
C59606465.56768.570707070
- - - \ No newline at end of file + + diff --git a/styleguide/merch/en/index.html b/styleguide/merch/en/index.html index bbd99eb..048bd07 100644 --- a/styleguide/merch/en/index.html +++ b/styleguide/merch/en/index.html @@ -1,1223 +1,1340 @@ - - - - - - - + + + + + + EH22 - Merch Size Comparison - + - +
-
-

Merch Size Comparison

-
-
-

Below you will find a table of sizes and measurements of merchandise clothing from this and past - chaos events. It is meant to guide in choosing a fitting piece of clothing based on owned pieces - from previous events. All values are based on the respective manufacturer's specifications and - different fabrics vary in elasticity (i. e. how stretchy they are), so there might be some - discrepancies regarding the actual fit.

-

For each piece of clothing there are two or three types of measurements. You can use the - schematic or read below to determine what each of them means:

-
    -
  • - A – chest: measured roughly 2.5 cm below the armpits over the breadth of the - (flattend) torso. -
    • -
  • - B – length: distance from the top of the shoulders all the way down. -
    • -
  • - C – sleeve: starting at the seam connecting the sleeve and torso, measured from - the top-most point down to the end of the arm. -
    • -
-

You can click on any cell holding a value to see how much the other pieces of clothing's sizes - deviate from the selected one's size in each measurement (A, B and C). You can also opt to only - show the deviation for a specific measurement by clicking again on the respective measurement's - value. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
+
+

Merch Size Comparison

+
+
+

+ Below you will find a table of sizes and measurements of + merchandise clothing from this and past chaos events. It is meant + to guide in choosing a fitting piece of clothing based on owned + pieces from previous events. All values are based on the + respective manufacturer's specifications and different fabrics + vary in elasticity (i. e. how stretchy they are), so there might + be some discrepancies regarding the actual fit. +

+

+ For each piece of clothing there are two or three types of + measurements. You can use the schematic or read below to determine + what each of them means: +

+
    +
  • + A – chest: measured roughly 2.5 cm below the + armpits over the breadth of the (flattend) torso. +
    • +
  • + B – length: distance from the top of the shoulders + all the way down. +
    • +
  • + C – sleeve: starting at the seam connecting the + sleeve and torso, measured from the top-most point down to the + end of the arm. +
    • +
+

+ You can click on any cell holding a value to see how much the + other pieces of clothing's sizes deviate from the selected one's + size in each measurement (A, B and C). You can also opt to only + show the deviation for a specific measurement by clicking again on + the respective measurement's value. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Easterhegg - EH22
GarmentBrandModelMeas.XXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		Stanley/StellaStella Ella STTW174
- Datasheet		A394245485155
B54.557.559.561.563.565.5
C1818.51919.52020.5
Shirt
Straight		Stanley/StellaCreator 2.0 STTU169
- Datasheet		A45.547.549.553.556.559.563.567.572.577.5
B62656973757779818384
C202122.52424.52525.5262626
HoodieStanley/StellaCruiser 2.0 STSU177
- Datasheet		A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
ZipperStanley/StellaCultivator 2.0 STSU179
- Datasheet		A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
Congress - 38C3
GarmentBrandModelMeas.XXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		Stanley/StellaStella Ella STTW174same as EH22 Shirt Fitted
Shirt
Straight
Black/Navy/Green		Stanley/StellaCreator 2.0 STTU169same as EH22 Shirt Straight
Shirt
Straight
Burgundy		stormtextilST102 Heavy LuxeA4345485256606366707478
B6469717476798285888889
HoodieStanley/StellaCruiser STSU822same as camp23 Hoodie
ZipperStanley/StellaConnector STSU820A46.54951.5545760636671
B636568727476788082
C60.561.56465.56768.5707070
Embroidered
Heavy Shirt		Stanley/StellaSparker 2.0 STTU171A47.549.551.555.558.561.565.569.5
B6467717577798183
C202122.52424.52525.526
Embroidered
Sweatshirt		Stanley/StellaChanger 2.0 STSU178A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
DressStanley/StellaStella Spinner STDW144A46.54952555861
B868890929393
C191920202121
GPN - gpn22
GarmentBrandModelMeas.XXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		 SOL'S Imperial WOMEN11502A414447505356
B616365676971
Shirt
Straight		 SOL'S Imperial11500A485053565962656871
B647072747678808284
Zipper
Fitted		Russell EuropeLadies' Authentic
Zipped Hood Jacket
0R266F0		A4548515457
B65.567.569.571.573.5
Zipper
Straight		Russell EuropeMen's Authentic
Zipped Hood Jacket
0R266M0		A5154576063666972
B6466.56971.57476.57983.5
Congress - 37C3
GarmentBrandModelMeas.XXSXSSMLXL2XL3XL4XL5XL6XL
Angelshirt
Fitted		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Angelshirt
Straight		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Shirt
Fitted
Black		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Shirt
Straight
Black		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Hoodie
Black		Stanley/StellaCruiser STSU822same as camp23 Hoodie
Zipper
Black		Stanley/StellaCultivator STSM566same as camp23 Zipper
Shirt
Fitted
Blue		KaribanK3026ICA43464952555861
B60626466687072
C15.7516.517.251818.7519.520.25
Shirt
Straight
Blue		KaribanK3032ICA44475053565962656871
B66687072747678808284
C15.51616.51717.51818.51919.520
Hoodie
Blue		KaribanK4027A5154576063666972
B6870727476788082
C6667686970717273
Zipper
Blue		KaribanK4030A4851545760636669
B6668707274767880
C6566676869707172
Camp - Camp23
GarmentBrandModelMeas.XXSXSSMLXL2XL3XL4XL5XL6XL
Angelshirt
Fitted		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Angelshirt
Straight		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Shirt
Fitted		Stanley/StellaStella Expresser STTW032A4244.547.550.553.556.5
B626466686969
C161617171818
Shirt
Straight		Stanley/StellaCreator STTU755A43.5464952555861646974
B64666972747678808284
C1919.520.521.522.522.523.524.524.525
HoodieStanley/StellaCruiser STSU822A46.54951.554576063667176
B63656872747678808283
C60.561.56465.56768.570707070
ZipperStanley/StellaCultivator STSM566A46.54951.554576063667176
B61636872747678808283
C59606465.56768.570707070
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Easterhegg - EH22
GarmentBrandModelMeas.XXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		Stanley/Stella + Stella Ella STTW174
+ Datasheet + 		A394245485155
B54.557.559.561.563.565.5
C1818.51919.52020.5
Shirt
Straight		Stanley/Stella + Creator 2.0 STTU169
+ Datasheet + 		A45.547.549.553.556.559.563.567.572.577.5
B62656973757779818384
C202122.52424.52525.5262626
HoodieStanley/Stella + Cruiser 2.0 STSU177
+ Datasheet + 		A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
ZipperStanley/Stella + Cultivator 2.0 STSU179
+ Datasheet + 		A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
Congress - 38C3
GarmentBrandModelMeas.XXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		Stanley/StellaStella Ella STTW174same as EH22 Shirt Fitted
Shirt
Straight
Black/Navy/Green		Stanley/StellaCreator 2.0 STTU169same as EH22 Shirt Straight
Shirt
Straight
Burgundy		stormtextilST102 Heavy LuxeA4345485256606366707478
B6469717476798285888889
HoodieStanley/StellaCruiser STSU822same as camp23 Hoodie
ZipperStanley/StellaConnector STSU820A46.54951.5545760636671
B636568727476788082
C60.561.56465.56768.5707070
Embroidered
Heavy Shirt		Stanley/StellaSparker 2.0 STTU171A47.549.551.555.558.561.565.569.5
B6467717577798183
C202122.52424.52525.526
Embroidered
Sweatshirt		Stanley/StellaChanger 2.0 STSU178A51535559626569737883
B64677174767880828485
C58.560.564.566.568.56969.569.569.569.5
DressStanley/StellaStella Spinner STDW144A46.54952555861
B868890929393
C191920202121
GPN - gpn22
GarmentBrandModelMeas.XXSXSSMLXL2XL3XL4XL5XL6XL
Shirt
Fitted		SOL'S Imperial WOMEN11502A414447505356
B616365676971
Shirt
Straight		SOL'S Imperial11500A485053565962656871
B647072747678808284
Zipper
Fitted		Russell Europe + Ladies' Authentic
Zipped Hood Jacket
0R266F0 + 		A4548515457
B65.567.569.571.573.5
Zipper
Straight		Russell Europe + Men's Authentic
Zipped Hood Jacket
0R266M0 + 		A5154576063666972
B6466.56971.57476.57983.5
Congress - 37C3
GarmentBrandModelMeas.XXSXSSMLXL2XL3XL4XL5XL6XL
Angelshirt
Fitted		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Angelshirt
Straight		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Shirt
Fitted
Black		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Shirt
Straight
Black		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Hoodie
Black		Stanley/StellaCruiser STSU822same as camp23 Hoodie
Zipper
Black		Stanley/StellaCultivator STSM566same as camp23 Zipper
Shirt
Fitted
Blue		KaribanK3026ICA43464952555861
B60626466687072
C15.7516.517.251818.7519.520.25
Shirt
Straight
Blue		KaribanK3032ICA44475053565962656871
B66687072747678808284
C15.51616.51717.51818.51919.520
Hoodie
Blue		KaribanK4027A5154576063666972
B6870727476788082
C6667686970717273
Zipper
Blue		KaribanK4030A4851545760636669
B6668707274767880
C6566676869707172
Camp - Camp23
GarmentBrandModelMeas.XXSXSSMLXL2XL3XL4XL5XL6XL
Angelshirt
Fitted		Stanley/StellaStella Expresser STTW032same as camp23 Shirt Fitted
Angelshirt
Straight		Stanley/StellaCreator STTU755same as camp23 Shirt Straight
Shirt
Fitted		Stanley/StellaStella Expresser STTW032A4244.547.550.553.556.5
B626466686969
C161617171818
Shirt
Straight		Stanley/StellaCreator STTU755A43.5464952555861646974
B64666972747678808284
C1919.520.521.522.522.523.524.524.525
HoodieStanley/StellaCruiser STSU822A46.54951.554576063667176
B63656872747678808283
C60.561.56465.56768.570707070
ZipperStanley/StellaCultivator STSM566A46.54951.554576063667176
B61636872747678808283
C59606465.56768.570707070
- - - \ No newline at end of file + + diff --git a/styleguide/typography/index.html b/styleguide/typography/index.html index 2939c41..a861b05 100644 --- a/styleguide/typography/index.html +++ b/styleguide/typography/index.html @@ -1,188 +1,265 @@ - + - - + - - - + + + Typography - + - +
- - Logo of Easterhegg 2025. In the style of a neon sign: + <a href= + Logo of Easterhegg 2025. In the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. - Logo of Easterhegg 2025. In the style of a unpowered neon sign: + The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. + Logo of Easterhegg 2025. In the style of a unpowered neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. - The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink. - + The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." + /> +
- -
+ +
+
+ +

+ Work in progress + This style guide is still under development.
+ Not all resources may be available yet, explanations and examples + may be missing and things may change without notice. +

+
-
- -

- Work in progress - This style guide is still under development.
- Not all resources may be available yet, explanations and examples may be missing and things may - change without notice. -

-
+

Typography

+

+ The design contains multiple typefaces, which are intended to be used + for different types of text. Below you'll find an explaination about + which typeface should be used for which context, as well as a table + containing specific font-sizes together with previews. If you want to + see the typography in action, head to the + demopage which includes examples of various text components. +

+
+
Paragraphs/Wildcard:
+
+ 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. +
-

Typography

-

The design contains multiple typefaces, which are intended to be used for different types of text. Below - you'll find an explaination about which typeface should be used for which context, as well as a table - containing specific font-sizes together with previews. If you want to see the typography in action, head - to the demopage which includes examples of various text components.

-
-
Paragraphs/Wildcard:
-
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.
+
Headings:
+
+ We believe that almost no one requires more than four levels of + headings. Therefore we only define font-sizes for this many. But you + can of course define your own additional levels. But be it slides, + webpages or whatever else; headings should always use our custom + made neon-sign font, Argon Glow. If you are curious about why we + created a custom font, we explained the decision further below. +
-
Headings:
-
We believe that almost no one requires more than four levels of headings. Therefore we only define - font-sizes for this many. But you can of course define your own additional levels. But be it slides, - webpages or whatever else; headings should always use our custom made neon-sign font, Argon Glow. If - you are curious about why we created a custom font, we explained the decision further below.
+
Subheadings:
+
+ This applies to secondary titles directly following a primary title, + as is typical on title-slides and similar. Use Athiti, but larger + than the text size of the main content. See the table below for a + size guide. +
-
Subheadings:
-
This applies to secondary titles directly following a primary title, as is typical on title-slides - and similar. Use Athiti, but larger than the text size of the main content. See the table below for - a size guide.
+
Code/monospace:
+
+ For monospace content, we think, Departure Mono is a fitting choice, + 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. +
+
-
Code/monospace:
-
For monospace content, we think, Departure Mono is a fitting choice, 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.
-
+

Font Table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeFont sizeFont family
Main Title72pxArgon Glow
Heading 148pxArgon Glow
Heading 232pxArgon Glow
Heading 324pxArgon Glow
Heading 418pxArgon Glow
Subheading24pxAthiti
Paragraph16pxAthiti
Code16pxDeparture Mono
+
    +
  • Main Title
    • +
  • Heading 1
    • +
  • Heading 2
    • +
  • Heading 3
    • +
  • Heading 4
    • +
  • Subheading
    • +
  • Paragraph
    • +
  • Code
    • +
+
-

Font Table

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeFont sizeFont family
Main Title72pxArgon Glow
Heading 148pxArgon Glow
Heading 232pxArgon Glow
Heading 324pxArgon Glow
Heading 418pxArgon Glow
Subheading24pxAthiti
Paragraph16pxAthiti
Code16pxDeparture Mono
-
    -
  • Main Title
    • -
  • Heading 1
    • -
  • Heading 2
    • -
  • Heading 3
    • -
  • Heading 4
    • -
  • Subheading
    • -
  • Paragraph
    • -
  • Code
    • -
-
- -

Our custom font: Argon Glow

-

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.

-

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.

-

When using multiple lines, some typefaces really likes the more is better approach, using - unnecessary gaps that one wouldn't do when creating physical signs, simply because it would be a useless - amount of additional work.

-

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.

-

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.

-
+

Our custom font: Argon Glow

+

+ 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. +

+

+ 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. +

+

+ When using multiple lines, some typefaces really likes the + more is better approach, using unnecessary gaps that one + wouldn't do when creating physical signs, simply because it would be a + useless amount of additional work. +

+

+ 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. +

+

+ 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. +

+
- - - - \ No newline at end of file + + +