This commit is contained in:
parent
246417a553
commit
155d47222e
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
20 changed files with 5172 additions and 4003 deletions
|
|
@ -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);
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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', `<label>
|
||||
const filterTypeElement = document.querySelector("#filterType");
|
||||
typeList.forEach((type) => {
|
||||
filterTypeElement.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<label>
|
||||
<input type="checkbox" value="${type}" checked>
|
||||
${type}
|
||||
</label>`)
|
||||
})
|
||||
const filterFitElement = document.querySelector('#filterFit');
|
||||
fitList.forEach(fit => {
|
||||
filterFitElement.insertAdjacentHTML('beforeend', `<label>
|
||||
</label>`,
|
||||
);
|
||||
});
|
||||
const filterFitElement = document.querySelector("#filterFit");
|
||||
fitList.forEach((fit) => {
|
||||
filterFitElement.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<label>
|
||||
<input type="checkbox" value="${fit}" checked>
|
||||
${fit}
|
||||
</label>`)
|
||||
})
|
||||
</label>`,
|
||||
);
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
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");
|
||||
});
|
||||
});
|
||||
|
|
@ -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');
|
||||
})
|
||||
document.querySelector("#themeLight").addEventListener("change", (e) => {
|
||||
setTheme(e.target.checked ? "light" : "system");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
filter: url("glows.svg#textBlur160Secondary");
|
||||
}
|
||||
|
|
@ -1,374 +1,650 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../assets/style/styleguide.css"
|
||||
/>
|
||||
<title>Color Guide</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" id="backToWiki">
|
||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
<a href="/" id="backToWiki">
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
|
||||
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
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."/>
|
||||
</a>
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||
<ul>
|
||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||
<li class="active"><a href=""><i data-icon="info"></i>Colors</a></li>
|
||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
|
||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br>
|
||||
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||
change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Color Guide</h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
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.
|
||||
</li>
|
||||
<li>
|
||||
For more subtle text, e.g. in a footer, subtitle, etc. one can use the foreground shades to achieve
|
||||
this effect. To ensure a high enough contrast between fore- and background, these colors should not
|
||||
be used in front of the background shades mentioned above, other than for very small amounts of
|
||||
texts like headings and alike.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Additionally, there are also colors for various design elements. The accent colors can be used for
|
||||
whatever one desires, but are especially intended for use in hyperlinks like this:
|
||||
</p>
|
||||
<table>
|
||||
<caption>Overview of link highlighting</caption>
|
||||
<tr>
|
||||
<th scope="row">Regular Link:</th>
|
||||
<td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Hover/Focus/Active Link:</th>
|
||||
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Visited Link:</th>
|
||||
<td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
Other than that, there are two more colors: the error and the success color. Intended for anything
|
||||
regarding user-feedback, they should tell someone that something is a critical action, has some positive
|
||||
or negativ meaning or progresses something in some way or form.
|
||||
</p>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu-small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../"><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href=""><i data-icon="info"></i>Colors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../typography"><i data-icon="info"></i>Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../logo"><i data-icon="info"></i>Logo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../glow"><i data-icon="info"></i>Glow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../demopage"><i data-icon="info"></i>Demopage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../generator"><i data-icon="info"></i>Image Generator</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br />
|
||||
Not all resources may be available yet, explanations and examples
|
||||
may be missing and things may change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Color Guide</h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
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.
|
||||
</li>
|
||||
<li>
|
||||
For more subtle text, e.g. in a footer, subtitle, etc. one can use
|
||||
the foreground shades to achieve this effect. To ensure a high
|
||||
enough contrast between fore- and background, these colors should
|
||||
not be used in front of the background shades mentioned above, other
|
||||
than for very small amounts of texts like headings and alike.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Additionally, there are also colors for various design elements. The
|
||||
accent colors can be used for whatever one desires, but are especially
|
||||
intended for use in hyperlinks like this:
|
||||
</p>
|
||||
<table>
|
||||
<caption>
|
||||
Overview of link highlighting
|
||||
</caption>
|
||||
<tr>
|
||||
<th scope="row">Regular Link:</th>
|
||||
<td>
|
||||
<a class="a-regular" href="">https://eh22.easterhegg.eu/</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Hover/Focus/Active Link:</th>
|
||||
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Visited Link:</th>
|
||||
<td>
|
||||
<a class="a-visited" href="">https://eh22.easterhegg.eu/</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
Other than that, there are two more colors: the error and the success
|
||||
color. Intended for anything regarding user-feedback, they should tell
|
||||
someone that something is a critical action, has some positive or
|
||||
negativ meaning or progresses something in some way or form.
|
||||
</p>
|
||||
|
||||
<h2>Digital Media</h2>
|
||||
<div class="layout-column">
|
||||
<div class="dark swatch-grid">
|
||||
<h3>Darkmode</h3>
|
||||
<h2>Digital Media</h2>
|
||||
<div class="layout-column">
|
||||
<div class="dark swatch-grid">
|
||||
<h3>Darkmode</h3>
|
||||
|
||||
<section aria-labelledby="label-dark-fore-background">
|
||||
<span id="label-dark-fore-background">Fore- & Background</span>
|
||||
<section aria-labelledby="label-dark-fore-background">
|
||||
<span id="label-dark-fore-background"
|
||||
>Fore- & Background</span
|
||||
>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-foreground" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div>
|
||||
<span id="label-dark-swatch-foreground">#f2f0f5</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-foreground"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-foreground)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-foreground">#f2f0f5</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-background" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-background)"></div>
|
||||
<span id="label-dark-swatch-background">#0c011f</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-background"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-background)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-background">#0c011f</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-dark-shades">
|
||||
<span id="label-dark-shades">Background Shades</span>
|
||||
<section aria-labelledby="label-dark-shades">
|
||||
<span id="label-dark-shades">Background Shades</span>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
|
||||
<span id="label-dark-swatch-shade-1">#180736</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-shade-1"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-shade-1)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-shade-1">#180736</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div>
|
||||
<span id="label-dark-swatch-shade-2">#26114B</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-shade-2"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-shade-2)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-shade-2">#26114B</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div>
|
||||
<span id="label-dark-swatch-shade-3">#371F60</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-shade-3"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-shade-3)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-shade-3">#371F60</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div>
|
||||
<span id="label-dark-swatch-shade-4">#4B3176</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-shade-4"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-shade-4)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-shade-4">#4B3176</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-dark-texts">
|
||||
<span id="label-dark-texts">Text Shades</span>
|
||||
<section aria-labelledby="label-dark-texts">
|
||||
<span id="label-dark-texts">Text Shades</span>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-text-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-text-1)"></div>
|
||||
<span id="label-dark-swatch-text-1">#b2a0cb</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-text-1"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-text-1)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-text-1">#b2a0cb</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-text-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-text-2)"></div>
|
||||
<span id="label-dark-swatch-text-2">#957eb5</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-text-2"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-text-2)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-text-2">#957eb5</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-text-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-text-3)"></div>
|
||||
<span id="label-dark-swatch-text-3">#7a60a0</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-text-3"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-text-3)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-text-3">#7a60a0</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-text-4" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-text-4)"></div>
|
||||
<span id="label-dark-swatch-text-4">#61468b</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-text-4"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-text-4)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-text-4">#61468b</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-dark-primary-secondary">
|
||||
<span id="label-dark-primary-secondary">Primary & Secondary</span>
|
||||
<section aria-labelledby="label-dark-primary-secondary">
|
||||
<span id="label-dark-primary-secondary"
|
||||
>Primary & Secondary</span
|
||||
>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-primary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div>
|
||||
<span id="label-dark-swatch-primary">#c6257d</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-primary"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-primary)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-primary">#c6257d</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-secondary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div>
|
||||
<span id="label-dark-swatch-secondary">#4dadd8</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-secondary"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-secondary)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-secondary">#4dadd8</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-dark-error-success">
|
||||
<span id="label-dark-error-success">Error & Success</span>
|
||||
<section aria-labelledby="label-dark-error-success">
|
||||
<span id="label-dark-error-success">Error & Success</span>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-error" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-error)"></div>
|
||||
<span id="label-dark-swatch-error">#bb2626</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-error"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-error)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-error">#bb2626</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-success" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-success)"></div>
|
||||
<span id="label-dark-swatch-success">#54aa18</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-success"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-success)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-success">#54aa18</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-dark-accents">
|
||||
<span id="label-dark-accents">Accents</span>
|
||||
<section aria-labelledby="label-dark-accents">
|
||||
<span id="label-dark-accents">Accents</span>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div>
|
||||
<span id="label-dark-swatch-accent-1">#60a5f9</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-accent-1"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-accent-1)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-accent-1">#60a5f9</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div>
|
||||
<span id="label-dark-swatch-accent-2">#d381f7</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-accent-2"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-accent-2)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-accent-2">#d381f7</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div>
|
||||
<span id="label-dark-swatch-accent-3">#ff7975</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-dark-swatch-accent-3"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-dark-accent-3)"
|
||||
></div>
|
||||
<span id="label-dark-swatch-accent-3">#ff7975</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="light swatch-grid">
|
||||
<h3>Lightmode</h3>
|
||||
<div class="light swatch-grid">
|
||||
<h3>Lightmode</h3>
|
||||
|
||||
<section aria-labelledby="label-light-fore-background">
|
||||
<span id="label-light-fore-background">Fore- & Background</span>
|
||||
<section aria-labelledby="label-light-fore-background">
|
||||
<span id="label-light-fore-background"
|
||||
>Fore- & Background</span
|
||||
>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-foreground" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div>
|
||||
<span id="label-light-swatch-foreground">#0c011f</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-foreground"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-foreground)"
|
||||
></div>
|
||||
<span id="label-light-swatch-foreground">#0c011f</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-background" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-background)"></div>
|
||||
<span id="label-light-swatch-background">#f2f0f5</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-background"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-background)"
|
||||
></div>
|
||||
<span id="label-light-swatch-background">#f2f0f5</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-shades">
|
||||
<span id="label-light-shades">Background Shades</span>
|
||||
<section aria-labelledby="label-light-shades">
|
||||
<span id="label-light-shades">Background Shades</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-shade-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div>
|
||||
<span id="label-light-swatch-shade-1">#d1c6e0</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-shade-1"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-shade-1)"
|
||||
></div>
|
||||
<span id="label-light-swatch-shade-1">#d1c6e0</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-shade-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div>
|
||||
<span id="label-light-swatch-shade-2">#b2a0cb</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-shade-2"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-shade-2)"
|
||||
></div>
|
||||
<span id="label-light-swatch-shade-2">#b2a0cb</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-shade-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div>
|
||||
<span id="label-light-swatch-shade-3">#957eb5</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-shade-3"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-shade-3)"
|
||||
></div>
|
||||
<span id="label-light-swatch-shade-3">#957eb5</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-shade-4" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div>
|
||||
<span id="label-light-swatch-shade-4">#7a60a0</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-shade-4"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-shade-4)"
|
||||
></div>
|
||||
<span id="label-light-swatch-shade-4">#7a60a0</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-texts">
|
||||
<span id="label-light-texts">Text Shades</span>
|
||||
<section aria-labelledby="label-light-texts">
|
||||
<span id="label-light-texts">Text Shades</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-text-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-text-1)"></div>
|
||||
<span id="label-light-swatch-text-1">#26114b</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-text-1"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-text-1)"
|
||||
></div>
|
||||
<span id="label-light-swatch-text-1">#26114b</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-text-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-text-2)"></div>
|
||||
<span id="label-light-swatch-text-2">#371f60</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-text-2"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-text-2)"
|
||||
></div>
|
||||
<span id="label-light-swatch-text-2">#371f60</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-text-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-text-3)"></div>
|
||||
<span id="label-light-swatch-text-3">#4b3176</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-text-3"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-text-3)"
|
||||
></div>
|
||||
<span id="label-light-swatch-text-3">#4b3176</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-text-4" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-text-4)"></div>
|
||||
<span id="label-light-swatch-text-4">#61468b</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-text-4"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-text-4)"
|
||||
></div>
|
||||
<span id="label-light-swatch-text-4">#61468b</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-primary-secondary">
|
||||
<span id="label-light-primary-secondary">Primary & Secondary</span>
|
||||
<section aria-labelledby="label-light-primary-secondary">
|
||||
<span id="label-light-primary-secondary"
|
||||
>Primary & Secondary</span
|
||||
>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-primary)"></div>
|
||||
<span id="label-light-swatch-primary">#9a0a61</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-primary"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-primary)"
|
||||
></div>
|
||||
<span id="label-light-swatch-primary">#9a0a61</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div>
|
||||
<span id="label-light-swatch-secondary">#167fac</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-secondary"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-secondary)"
|
||||
></div>
|
||||
<span id="label-light-swatch-secondary">#167fac</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-error-success">
|
||||
<span id="label-light-error-success">Error & Success</span>
|
||||
<section aria-labelledby="label-light-error-success">
|
||||
<span id="label-light-error-success">Error & Success</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-error" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-error)"></div>
|
||||
<span id="label-light-swatch-error">#b21010</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-error"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-error)"
|
||||
></div>
|
||||
<span id="label-light-swatch-error">#b21010</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-success" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-success)"></div>
|
||||
<span id="label-light-swatch-success">#47990f</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-success"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-success)"
|
||||
></div>
|
||||
<span id="label-light-swatch-success">#47990f</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-accents">
|
||||
<span id="label-light-accents">Accents</span>
|
||||
<section aria-labelledby="label-light-accents">
|
||||
<span id="label-light-accents">Accents</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-accent-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-accent-1)"></div>
|
||||
<span id="label-light-swatch-accent-1">#303ec0</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-accent-1"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-accent-1)"
|
||||
></div>
|
||||
<span id="label-light-swatch-accent-1">#303ec0</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-accent-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-accent-2)"></div>
|
||||
<span id="label-light-swatch-accent-2">#6c366c</span>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-accent-2"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-accent-2)"
|
||||
></div>
|
||||
<span id="label-light-swatch-accent-2">#6c366c</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-accent-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-accent-3)"></div>
|
||||
<span id="label-light-swatch-accent-3">#932f0a</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-accent-3"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-light-accent-3)"
|
||||
></div>
|
||||
<span id="label-light-swatch-accent-3">#932f0a</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Printing</h2>
|
||||
<p>
|
||||
Our primary and secondary colors are also defined for CMYK printing:
|
||||
</p>
|
||||
|
||||
<div class="swatch-grid">
|
||||
<section aria-labelledby="label-light-primary-secondary">
|
||||
<span id="label-cmyk-primary-secondary">CMYK Colors</span>
|
||||
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-primary"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-cmyk-primary)"
|
||||
></div>
|
||||
<span id="label-cmyk-swatch-primary">0/94/6/0</span>
|
||||
</div>
|
||||
|
||||
<h2>Printing</h2>
|
||||
<p>
|
||||
Our primary and secondary colors are also defined for CMYK printing:
|
||||
</p>
|
||||
|
||||
<div class="swatch-grid">
|
||||
<section aria-labelledby="label-light-primary-secondary">
|
||||
<span id="label-cmyk-primary-secondary">CMYK Colors</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-cmyk-primary)"></div>
|
||||
<span id="label-cmyk-swatch-primary">0/94/6/0</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-cmyk-secondary)"></div>
|
||||
<span id="label-cmyk-swatch-secondary">81/0/10/0</span>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
aria-labelledby="label-light-swatch-secondary"
|
||||
class="swatch-container"
|
||||
>
|
||||
<div
|
||||
class="swatch"
|
||||
style="--swatch-color: var(--color-cmyk-secondary)"
|
||||
></div>
|
||||
<span id="label-cmyk-swatch-secondary">81/0/10/0</span>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,125 +1,196 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../assets/style/styleguide.css"
|
||||
/>
|
||||
<title>Demopage</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" id="backToWiki">
|
||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
<a href="/" id="backToWiki">
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
||||
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
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." />
|
||||
</a>
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||
<ul>
|
||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
|
||||
<li class="active"><a href=""><i data-icon="info"></i>Demopage</a></li>
|
||||
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br>
|
||||
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||
change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Demopage</h1>
|
||||
<p>This page contains examples for various text-components and fonts, as well as colorpalettes, images, and
|
||||
so on. Use can use it to get familiar with the design and as a reference for styling your own content.
|
||||
</p>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu-small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../"><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../colors"><i data-icon="info"></i>Colors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../typography"><i data-icon="info"></i>Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../logo"><i data-icon="info"></i>Logo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../glow"><i data-icon="info"></i>Glow</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href=""><i data-icon="info"></i>Demopage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../generator"><i data-icon="info"></i>Image Generator</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br />
|
||||
Not all resources may be available yet, explanations and examples
|
||||
may be missing and things may change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Demopage</h1>
|
||||
<p>
|
||||
This page contains examples for various text-components and fonts, as
|
||||
well as colorpalettes, images, and so on. Use can use it to get
|
||||
familiar with the design and as a reference for styling your own
|
||||
content.
|
||||
</p>
|
||||
|
||||
<section>
|
||||
<h2>Overview of Link-Highlighting</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th scope="row">Regular Link:</th>
|
||||
<td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Hover/Focus/Active Link:</th>
|
||||
<td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Visited Link:</th>
|
||||
<td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Overview of Link-Highlighting</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th scope="row">Regular Link:</th>
|
||||
<td>
|
||||
<a class="a-regular" href="">https://eh22.easterhegg.eu/</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Hover/Focus/Active Link:</th>
|
||||
<td>
|
||||
<a class="a-hover" href="">https://eh22.easterhegg.eu/</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Visited Link:</th>
|
||||
<td>
|
||||
<a class="a-visited" href="">https://eh22.easterhegg.eu/</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Ordered and Unordered Lists</h2>
|
||||
<p>This is just a simple section containing plain text as well as some lists. This way you can get a
|
||||
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.</p>
|
||||
<ol>
|
||||
<li>Short item no. 1.</li>
|
||||
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
|
||||
into the next line and therefore moves the next item further down.</li>
|
||||
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the
|
||||
next line, but there is no next item to move.</li>
|
||||
</ol>
|
||||
<p>But sometimes, the order of items doesn't matter, in that case, we instead put a basic bullet point
|
||||
infront of each item:</p>
|
||||
<ul>
|
||||
<li>Short item no. 1.</li>
|
||||
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
|
||||
into the next line and therefore moves the next item further down.</li>
|
||||
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the
|
||||
next line, but there is no next item to move.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Ordered and Unordered Lists</h2>
|
||||
<p>
|
||||
This is just a simple section containing plain text as well as some
|
||||
lists. This way you can get a 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.
|
||||
</p>
|
||||
<ol>
|
||||
<li>Short item no. 1.</li>
|
||||
<li>
|
||||
Long item in the middle. This item is longer then one visual line,
|
||||
which is why it wraps over into the next line and therefore moves
|
||||
the next item further down.
|
||||
</li>
|
||||
<li>
|
||||
Long item at the end, which is also longer than one visual line.
|
||||
It also wraps over into the next line, but there is no next item
|
||||
to move.
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
But sometimes, the order of items doesn't matter, in that case, we
|
||||
instead put a basic bullet point infront of each item:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Short item no. 1.</li>
|
||||
<li>
|
||||
Long item in the middle. This item is longer then one visual line,
|
||||
which is why it wraps over into the next line and therefore moves
|
||||
the next item further down.
|
||||
</li>
|
||||
<li>
|
||||
Long item at the end, which is also longer than one visual line.
|
||||
It also wraps over into the next line, but there is no next item
|
||||
to move.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Preformatted Text</h2>
|
||||
<!-- TODO: custom highlighting theme -->
|
||||
<p>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.</p>
|
||||
<pre area-labelledby="code-positives-description"><code>#include <stdlib.h>
|
||||
<section>
|
||||
<h2>Preformatted Text</h2>
|
||||
<!-- TODO: custom highlighting theme -->
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<pre
|
||||
area-labelledby="code-positives-description"
|
||||
><code>#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);
|
||||
}</code></pre>
|
||||
<p>This is a simple function written in C, which removes all negative integers from an array and updates
|
||||
its element count.</p>
|
||||
</section>
|
||||
<p>
|
||||
This is a simple function written in C, which removes all negative
|
||||
integers from an array and updates its element count.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<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="../assets/image/example_cat.jpg" alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
|
||||
<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="../assets/image/example_cat.jpg"
|
||||
alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
|
||||
of leopard-print fabric and looking at something behind the camera. The background is dark and
|
||||
plain." />
|
||||
<figcaption>Example image without any distortion applied.</figcaption>
|
||||
</figure>
|
||||
<p>Now, in HTML you could simply specify <code>class="glitch"</code> 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 href="../generator">a simple web-tool to apply the
|
||||
filter</a> to an image and export it as a PNG. The tool also scales the image down to ensure
|
||||
that the filter looks similar across all images.</p>
|
||||
<figure>
|
||||
<img class="glitch" src="../assets/image/example_cat.jpg" alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
|
||||
plain."
|
||||
/>
|
||||
<figcaption>
|
||||
Example image without any distortion applied.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>
|
||||
Now, in HTML you could simply specify <code>class="glitch"</code> 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 href="../generator">a simple web-tool to apply the filter</a> to
|
||||
an image and export it as a PNG. The tool also scales the image down
|
||||
to ensure that the filter looks similar across all images.
|
||||
</p>
|
||||
<figure>
|
||||
<img
|
||||
class="glitch"
|
||||
src="../assets/image/example_cat.jpg"
|
||||
alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
|
||||
bright edges, which get surrounded by pink and blue to their left and right hand side. The second
|
||||
one distorts the image by offsetting parts of the image horizontally by seemingly random yet
|
||||
somewhat osscilating amounts." />
|
||||
<figcaption>Example image with visual glitches applied.</figcaption>
|
||||
</figure>
|
||||
<p>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.</p>
|
||||
<p>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.)</p>
|
||||
</section>
|
||||
</main>
|
||||
somewhat osscilating amounts."
|
||||
/>
|
||||
<figcaption>Example image with visual glitches applied.</figcaption>
|
||||
</figure>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
<script
|
||||
src="../assets/script/styleguide.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,137 +1,199 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../assets/style/styleguide.css"
|
||||
/>
|
||||
<title>Document</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body style="height: 100vh;">
|
||||
<body style="height: 100vh">
|
||||
<header>
|
||||
<a href="/" id="backToWiki">
|
||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
<a href="/" id="backToWiki">
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
||||
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
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." />
|
||||
</a>
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||
<ul>
|
||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
|
||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||
<li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br>
|
||||
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||
change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<div class="generator">
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu-small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../"><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../colors"><i data-icon="info"></i>Colors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../typography"><i data-icon="info"></i>Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../logo"><i data-icon="info"></i>Logo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../glow"><i data-icon="info"></i>Glow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../demopage"><i data-icon="info"></i>Demopage</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href=""><i data-icon="info"></i>Image Generator</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br />
|
||||
Not all resources may be available yet, explanations and examples
|
||||
may be missing and things may change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<div class="generator">
|
||||
<div>
|
||||
<input id="file_input" type="file" name="image" accept="image/*" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input id="file_input" type="file" name="image" accept="image/*">
|
||||
</div>
|
||||
<img id="source_img" src="" />
|
||||
<i data-icon="arrow-down"></i>
|
||||
<img id="result_img" src="" />
|
||||
|
||||
<img id="source_img" src="" />
|
||||
<i data-icon="arrow-down"></i>
|
||||
<img id="result_img" src="" />
|
||||
<div style="display: none">
|
||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<filter
|
||||
id="filter0"
|
||||
color-interpolation-filters="linearRGB"
|
||||
filterUnits="objectBoundingBox"
|
||||
primitiveUnits="objectBoundingBox"
|
||||
>
|
||||
<feColorMatrix
|
||||
in="SourceGraphic"
|
||||
type="saturate"
|
||||
values="0"
|
||||
result="bw"
|
||||
/>
|
||||
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
|
||||
<feComponentTransfer in="ltoa" result="ltoa_inverse">
|
||||
<feFuncA type="table" tableValues="0 1" />
|
||||
</feComponentTransfer>
|
||||
|
||||
<div style="display: none;">
|
||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
|
||||
primitiveUnits="objectBoundingBox">
|
||||
<feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" />
|
||||
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
|
||||
<feComponentTransfer in="ltoa" result="ltoa_inverse">
|
||||
<feFuncA type="table" tableValues="0 1" />
|
||||
</feComponentTransfer>
|
||||
<feConvolveMatrix
|
||||
in="ltoa_inverse"
|
||||
result="pink_edges"
|
||||
kernelMatrix="-4 0 4 0 0 0 -4 0 4"
|
||||
/>
|
||||
<feComponentTransfer in="pink_edges" result="pink">
|
||||
<feFuncR type="table" tableValues="0.7765 0" />
|
||||
<feFuncG type="table" tableValues="0.1451 0" />
|
||||
<feFuncB type="table" tableValues="0.4902 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="pink" result="pink_shift" dx="-0.002" />
|
||||
|
||||
<feConvolveMatrix in="ltoa_inverse" result="pink_edges"
|
||||
kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
|
||||
<feComponentTransfer in="pink_edges" result="pink">
|
||||
<feFuncR type="table" tableValues="0.7765 0" />
|
||||
<feFuncG type="table" tableValues="0.1451 0" />
|
||||
<feFuncB type="table" tableValues="0.4902 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="pink" result="pink_shift" dx="-0.002" />
|
||||
<feConvolveMatrix
|
||||
in="ltoa_inverse"
|
||||
result="cyan_edges"
|
||||
kernelMatrix="4 0 -4 0 0 0 4 0 -4"
|
||||
/>
|
||||
<feComponentTransfer in="cyan_edges" result="cyan">
|
||||
<feFuncR type="table" tableValues="0.2941 0" />
|
||||
<feFuncG type="table" tableValues="0.6784 0" />
|
||||
<feFuncB type="table" tableValues="0.8471 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
|
||||
|
||||
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges"
|
||||
kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
|
||||
<feComponentTransfer in="cyan_edges" result="cyan">
|
||||
<feFuncR type="table" tableValues="0.2941 0" />
|
||||
<feFuncG type="table" tableValues="0.6784 0" />
|
||||
<feFuncB type="table" tableValues="0.8471 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
|
||||
<feMerge result="pink_cyan_shift">
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
<feMergeNode in="pink_shift" />
|
||||
<feMergeNode in="cyan_shift" />
|
||||
</feMerge>
|
||||
|
||||
<feMerge result="pink_cyan_shift">
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
<feMergeNode in="pink_shift" />
|
||||
<feMergeNode in="cyan_shift" />
|
||||
</feMerge>
|
||||
<feTurbulence
|
||||
type="fractalNoise"
|
||||
baseFrequency="0 0.2"
|
||||
numOctaves="1"
|
||||
result="noise"
|
||||
/>
|
||||
<feDisplacementMap
|
||||
in="pink_cyan_shift"
|
||||
in2="noise"
|
||||
result="distorted_raw"
|
||||
scale="0.02"
|
||||
/>
|
||||
<feOffset in="distorted_raw" result="distorted" />
|
||||
</filter>
|
||||
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" />
|
||||
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" />
|
||||
<feOffset in="distorted_raw" result="distorted" />
|
||||
</filter>
|
||||
<g filter="url(#filter0)">
|
||||
<image href="" width="100%" height="100%" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<g filter="url(#filter0)">
|
||||
<image href="" width="100%" height="100%" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<button id="download" disabled>
|
||||
Download Result
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<button id="download" disabled>Download Result</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="../assets/script/generator.js" type="text/javascript"></script>
|
||||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
<script
|
||||
src="../assets/script/styleguide.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,79 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../assets/style/styleguide.css"
|
||||
/>
|
||||
<title>Glow</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" id="backToWiki">
|
||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
<a href="/" id="backToWiki">
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
||||
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
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." />
|
||||
</a>
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||
<ul>
|
||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||
<li class="active"><a href=""><i data-icon="info"></i>Glow</a></li>
|
||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu-small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../"><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../colors"><i data-icon="info"></i>Colors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../typography"><i data-icon="info"></i>Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../logo"><i data-icon="info"></i>Logo</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href=""><i data-icon="info"></i>Glow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../demopage"><i data-icon="info"></i>Demopage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../generator"><i data-icon="info"></i>Image Generator</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br />
|
||||
Not all resources may be available yet, explanations and examples
|
||||
may be missing and things may change without notice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br>
|
||||
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||
change without notice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h1>Glow</h1>
|
||||
<!-- TODO -->
|
||||
</main>
|
||||
<h1>Glow</h1>
|
||||
<!-- TODO -->
|
||||
</main>
|
||||
</div>
|
||||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
<script
|
||||
src="../assets/script/styleguide.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,135 +1,211 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../assets/style/styleguide.css"
|
||||
/>
|
||||
<title>Iconography</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" id="backToWiki">
|
||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
<a href="/" id="backToWiki">
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
||||
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
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." />
|
||||
</a>
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||
<ul>
|
||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||
<li class="active"><a href=""><i data-icon="info"></i>Iconography</a></li>
|
||||
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
|
||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu-small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../"><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../colors"><i data-icon="info"></i>Colors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../typography"><i data-icon="info"></i>Typography</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href=""><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../logo"><i data-icon="info"></i>Logo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../glow"><i data-icon="info"></i>Glow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../demopage"><i data-icon="info"></i>Demopage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../generator"><i data-icon="info"></i>Image Generator</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br />
|
||||
Not all resources may be available yet, explanations and examples
|
||||
may be missing and things may change without notice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br>
|
||||
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||
change without notice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h1>Iconography</h1>
|
||||
<p>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 <a
|
||||
href="../logo/">logo, about which you can read more here</a>, and our font, <a
|
||||
href="../typography/">Argon Glow, which we talk about more in the typography</a>.</p>
|
||||
<p>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).</p>
|
||||
<!-- TODO: Link to repository or other form of icon collection -->
|
||||
<p>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.</p>
|
||||
<figure>
|
||||
<svg height="20rem" viewBox="0 0 600 600" version="1.1" id="svg" xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style>
|
||||
g {
|
||||
fill: var(--color-foreground);
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g>
|
||||
<path
|
||||
d="M 213.37856,242.00777 C 227.32944,264.08838 251.97907,278.75 280,278.75 c 1.62235,0 3.23375,-0.0492 4.83265,-0.14613 v -7.5149 C 283.23611,271.19575 281.62471,271.25 280,271.25 c -25.69487,0 -48.1643,-13.57397 -60.70703,-33.93164 l -0.46709,-0.75791 z" />
|
||||
<path
|
||||
d="m 277.18801,72.132287 c 15.38784,6.470687 32.9424,8.121551 50.32371,3.594275 4.76947,-1.242294 9.3272,-2.898256 13.6409,-4.918946 l -5.67991,-5.67991 c -3.15163,1.331329 -6.43925,2.45223 -9.85162,3.341044 -14.67629,3.822705 -29.46101,2.785261 -42.66223,-2.107307 z" />
|
||||
<g aria-label="α=135°, r=75 px">
|
||||
<path
|
||||
d="m 196.15111,292.57293 -0.45833,-2.40625 q -0.46875,-2.46875 -2.32292,-2.46875 -1.39583,0 -2.03124,1.14583 -0.80209,1.4375 -0.80209,3.33333 0,2.29167 0.78125,3.38541 0.79167,1.11459 2.05208,1.11459 1.39583,0 2.14583,-2.21875 z m 1.07291,-3.1875 1.03125,-3.05208 h 1.70833 l -2.13541,6.32291 0.41667,2.28124 q 0.0937,0.51042 0.45833,0.9375 0.42708,0.5 0.76041,0.5 h 0.91667 V 298 h -1.14583 q -0.97917,0 -1.85417,-0.875 -0.42708,-0.4375 -0.60416,-1.35416 -0.47917,1.15625 -1.45833,2.06249 -0.45834,0.42709 -1.94792,0.42709 -2.44791,0 -3.63541,-1.58333 -1.21875,-1.63542 -1.21875,-4.5 0,-3.06249 1.32292,-4.49999 1.46875,-1.60416 3.53124,-1.60416 3.23958,0 3.85416,3.31249 z m 6.43749,-1.07291 h 13.35415 v 1.74999 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 18.26039,3.66666 h 3.4375 V 284.3646 l -3.73958,0.75 v -1.91666 l 3.71874,-0.75 h 2.10417 v 13.78123 h 3.43749 V 298 h -8.95832 z m 19.5833,-6.61457 q 1.51042,0.32291 2.35417,1.34374 0.85416,1.02084 0.85416,2.52083 0,2.30208 -1.58333,3.5625 -1.58333,1.26041 -4.49999,1.26041 -0.97917,0 -2.02083,-0.19791 -1.03125,-0.1875 -2.13541,-0.57292 V 295.5 q 0.87499,0.51042 1.91666,0.77084 1.04166,0.26041 2.17708,0.26041 1.97916,0 3.01041,-0.78125 1.04167,-0.78125 1.04167,-2.27083 0,-1.37499 -0.96875,-2.14583 -0.95833,-0.78124 -2.67708,-0.78124 h -1.8125 v -1.72917 h 1.89583 q 1.55208,0 2.375,-0.61458 0.82291,-0.625 0.82291,-1.79167 0,-1.19791 -0.85416,-1.83333 -0.84375,-0.64583 -2.42708,-0.64583 -0.86458,0 -1.85417,0.1875 -0.98958,0.1875 -2.17708,0.58333 v -1.87499 q 1.19792,-0.33334 2.23958,-0.5 1.05209,-0.16667 1.97917,-0.16667 2.39583,0 3.79166,1.09375 1.39583,1.08333 1.39583,2.9375 0,1.29166 -0.73958,2.18749 -0.73958,0.88542 -2.10417,1.22917 z m 7.21874,-7.16666 h 8.26041 v 1.77083 h -6.33333 v 3.8125 q 0.45834,-0.15625 0.91667,-0.22917 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42708 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16666 -1.01041,-0.16667 -2.09375,-0.5 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05208,-0.94792 1.05208,-2.57292 0,-1.62499 -1.05208,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 16.60414,1.0625 q -0.83333,0 -1.40624,0.58333 -0.57292,0.57292 -0.57292,1.40625 0,0.82292 0.57292,1.39583 0.57291,0.5625 1.40624,0.5625 0.83334,0 1.40625,-0.5625 0.57292,-0.57291 0.57292,-1.39583 0,-0.82292 -0.58334,-1.40625 -0.57291,-0.58333 -1.39583,-0.58333 z m 0,-1.34375 q 0.66667,0 1.28125,0.26042 0.61458,0.25 1.0625,0.72916 0.47917,0.46875 0.71875,1.0625 0.23958,0.59375 0.23958,1.28125 0,1.375 -0.96875,2.33333 -0.95833,0.94791 -2.35416,0.94791 -1.40625,0 -2.34375,-0.93749 -0.93749,-0.9375 -0.93749,-2.34375 0,-1.39583 0.95833,-2.36458 0.95833,-0.96875 2.34374,-0.96875 z" />
|
||||
<path
|
||||
d="m 194.40111,314.79164 q -0.32291,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83333,-0.0937 -1.625,0 -2.5,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60417,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35417,-0.52083 0.19791,0 0.4375,0.0312 0.23958,0.0208 0.53124,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 17.36456,-10.11456 h 9.99998 v 0.89583 l -5.64582,14.65622 h -2.19791 l 5.31249,-13.78122 h -7.46874 z m 14.12498,0 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.5625,3.90624 -1.56249,1.38542 -4.40624,1.38542 -0.97916,0 -2,-0.16667 -1.01041,-0.16667 -2.09374,-0.5 v -2.11458 q 0.9375,0.51042 1.93749,0.76042 1,0.25 2.11458,0.25 1.80209,0 2.85417,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85417,-0.94792 -0.84374,0 -1.68749,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 21.91663,13.80206 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33334,1.6875 1.33334,4.4375 0,2.74999 -1.33334,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.87499,-3.3125 -0.86459,-1.20833 -2.38542,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38542,-1.19791 0.87499,-1.20833 0.87499,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98957 h -2.26041 l -3.39583,-4.58332 -3.39583,4.58332 h -2.26041 l 4.53124,-6.10415 -4.14583,-5.56249 h 2.26042 l 3.09374,4.15624 3.09375,-4.15624 z" />
|
||||
</g>
|
||||
<path
|
||||
d="m 187.79306,570.26801 h 8.26041 v 1.77083 h -6.33333 v 3.81249 q 0.45834,-0.15625 0.91667,-0.22916 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42709 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16667 -1.01041,-0.16666 -2.09375,-0.49999 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05209,-0.94792 1.05209,-2.57292 0,-1.62499 -1.05209,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.18749 -0.83333,0.1875 -1.70833,0.58334 z m 18.05206,1.38541 q -1.625,0 -2.44791,1.60417 -0.8125,1.59375 -0.8125,4.80207 0,3.19792 0.8125,4.80208 0.82291,1.59375 2.44791,1.59375 1.63541,0 2.44791,-1.59375 0.82292,-1.60416 0.82292,-4.80208 0,-3.20832 -0.82292,-4.80207 -0.8125,-1.60417 -2.44791,-1.60417 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -4,-2.0625 -1.37499,-2.07291 -1.37499,-5.99999 0,-3.93749 1.37499,-5.99999 1.38542,-2.07291 4,-2.07291 z m 17.43747,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04166 1.52083,-1.54166 0.92708,-0.51042 2.20833,-0.51042 2.125,0 3.44791,1.6875 1.33333,1.6875 1.33333,4.43749 0,2.75 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51041 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.31249 -0.86458,-1.20834 -2.38541,-1.20834 -1.52083,0 -2.39583,1.20834 -0.86458,1.19791 -0.86458,3.31249 0,2.11458 0.86458,3.32291 0.875,1.19792 2.39583,1.19792 1.52083,0 2.38541,-1.19792 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98958 h -2.26041 l -3.39583,-4.58333 -3.39583,4.58333 h -2.26041 l 4.53124,-6.10416 -4.14582,-5.56249 h 2.26041 l 3.09374,4.15624 3.09375,-4.15624 z"
|
||||
transform="rotate(-45)" aria-label="50 px" />
|
||||
<g aria-label="α=90°, r=50 px">
|
||||
<path
|
||||
d="m 281.87513,91.958416 -0.45833,-2.406247 q -0.46875,-2.468746 -2.32291,-2.468746 -1.39583,0 -2.03125,1.145832 -0.80208,1.437498 -0.80208,3.333328 0,2.291663 0.78125,3.385411 0.79166,1.114582 2.05208,1.114582 1.39583,0 2.14583,-2.218747 z m 1.07292,-3.187495 1.03125,-3.052079 h 1.70833 l -2.13542,6.322907 0.41667,2.281246 q 0.0937,0.510416 0.45833,0.937499 0.42708,0.499999 0.76042,0.499999 h 0.91666 v 1.624997 h -1.14583 q -0.97916,0 -1.85416,-0.874998 -0.42709,-0.4375 -0.60417,-1.354165 -0.47916,1.156248 -1.45833,2.062497 -0.45833,0.427083 -1.94791,0.427083 -2.44792,0 -3.63541,-1.583331 -1.21875,-1.635414 -1.21875,-4.499993 0,-3.062495 1.32291,-4.499993 1.46875,-1.604164 3.53125,-1.604164 3.23958,0 3.85416,3.312495 z m 6.43749,-1.072915 h 13.35414 v 1.749997 h -13.35414 z m 0,4.249993 h 13.35414 v 1.770831 h -13.35414 z m 17.9583,5.114575 v -1.916663 q 0.79167,0.374999 1.60417,0.572915 0.8125,0.197917 1.59374,0.197917 2.08334,0 3.17708,-1.395831 1.10417,-1.406248 1.26042,-4.26041 -0.60417,0.895832 -1.53125,1.374997 -0.92708,0.479166 -2.05208,0.479166 -2.33333,0 -3.69791,-1.406247 -1.35417,-1.416665 -1.35417,-3.864578 0,-2.395829 1.41667,-3.843744 1.41666,-1.447914 3.77083,-1.447914 2.69791,0 4.11457,2.072913 1.42708,2.062497 1.42708,5.999991 0,3.677078 -1.74999,5.874991 -1.73958,2.187496 -4.6875,2.187496 -0.79166,0 -1.60416,-0.156249 -0.8125,-0.15625 -1.6875,-0.46875 z m 4.1875,-6.593739 q 1.41666,0 2.23958,-0.968749 0.83333,-0.968748 0.83333,-2.656246 0,-1.67708 -0.83333,-2.645829 -0.82292,-0.979165 -2.23958,-0.979165 -1.41667,0 -2.25,0.979165 -0.82292,0.968749 -0.82292,2.645829 0,1.687498 0.82292,2.656246 0.83333,0.968749 2.25,0.968749 z m 13.82289,-7.249989 q -1.625,0 -2.44791,1.604164 -0.8125,1.593748 -0.8125,4.802076 0,3.197912 0.8125,4.802076 0.82291,1.593747 2.44791,1.593747 1.63542,0 2.44791,-1.593747 0.82292,-1.604164 0.82292,-4.802076 0,-3.208328 -0.82292,-4.802076 -0.81249,-1.604164 -2.44791,-1.604164 z m 0,-1.666664 q 2.61458,0 3.98958,2.072913 1.38541,2.062497 1.38541,5.999991 0,3.927077 -1.38541,5.999991 -1.375,2.062496 -3.98958,2.062496 -2.61458,0 -3.99999,-2.062496 -1.375,-2.072914 -1.375,-5.999991 0,-3.937494 1.375,-5.999991 1.38541,-2.072913 3.99999,-2.072913 z m 12.12498,1.343748 q -0.83333,0 -1.40625,0.583332 -0.57291,0.572916 -0.57291,1.406248 0,0.822916 0.57291,1.395831 0.57292,0.562499 1.40625,0.562499 0.83333,0 1.40625,-0.562499 0.57292,-0.572915 0.57292,-1.395831 0,-0.822915 -0.58334,-1.406248 -0.57291,-0.583332 -1.39583,-0.583332 z m 0,-1.343748 q 0.66667,0 1.28125,0.260416 0.61458,0.25 1.0625,0.729166 0.47916,0.468749 0.71875,1.062498 0.23958,0.593749 0.23958,1.281248 0,1.374998 -0.96875,2.33333 -0.95833,0.947915 -2.35416,0.947915 -1.40625,0 -2.34375,-0.937499 -0.9375,-0.937498 -0.9375,-2.343746 0,-1.395831 0.95834,-2.364579 0.95833,-0.968749 2.34374,-0.968749 z" />
|
||||
<path
|
||||
d="m 273.33869,114.17713 q -0.32292,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83334,-0.0937 -1.62499,0 -2.49999,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60416,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35416,-0.52083 0.19792,0 0.4375,0.0312 0.23959,0.0208 0.53125,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 H 275.5991 Z m 0,4.24999 h 13.35415 v 1.77083 H 275.5991 Z m 17.91664,-10.11456 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.56249,3.90624 -1.5625,1.38542 -4.40625,1.38542 -0.97916,0 -1.99999,-0.16667 -1.01042,-0.16666 -2.09375,-0.5 v -2.11458 q 0.9375,0.51042 1.9375,0.76042 0.99999,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85416,-0.94792 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 18.05205,1.38541 q -1.62499,0 -2.44791,1.60416 -0.8125,1.59375 -0.8125,4.80208 0,3.19791 0.8125,4.80208 0.82292,1.59374 2.44791,1.59374 1.63542,0 2.44792,-1.59374 0.82291,-1.60417 0.82291,-4.80208 0,-3.20833 -0.82291,-4.80208 -0.8125,-1.60416 -2.44792,-1.60416 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -3.99999,-2.0625 -1.375,-2.07291 -1.375,-5.99999 0,-3.93749 1.375,-5.99999 1.38541,-2.07291 3.99999,-2.07291 z m 17.43748,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60416,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33333,1.6875 1.33333,4.4375 0,2.74999 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91667,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.3125 -0.86458,-1.20833 -2.38541,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38541,-1.19791 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21875,5.67707 4.4375,5.98957 h -2.26042 l -3.39582,-4.58332 -3.39583,4.58332 h -2.26042 l 4.53125,-6.10415 -4.14583,-5.56249 h 2.26041 l 3.09375,4.15624 3.09374,-4.15624 z" />
|
||||
</g>
|
||||
<path
|
||||
d="m 557.29687,216.24219 -5.30273,5.30273 5.05078,5.05078 -24.74805,24.74805 -5.05273,-5.05078 -5.30273,5.30273 10.35546,10.35547 35.35547,-35.35547 z" />
|
||||
</g>
|
||||
<path style="fill:#808080;"
|
||||
d="m 71.185431,207.42553 c -24.198406,24.1984 -24.198409,64.19342 1e-6,88.39183 24.198409,24.1984 64.188198,24.19318 88.386608,-0.005 L 274.47515,180.90903 c 2.66087,-2.66088 4.20734,-2.30988 6.60826,-1.31541 2.4009,0.99451 3.74779,1.84302 3.7478,5.60606 l -10e-6,389.80306 a 25.000064,25.000064 0 0 0 24.99756,24.99756 25.000064,25.000064 0 0 0 25.00277,-25.00277 V 185.19446 c -10e-6,-23.9138 -15.38944,-43.83349 -34.6124,-51.79591 -19.22297,-7.96242 -44.18796,-4.75275 -61.09758,12.15688 L 124.21844,260.45854 c -5.09092,5.09091 -12.58327,5.09091 -17.67419,0 -5.09091,-5.09092 -5.09613,-12.5885 -0.005,-17.67941 L 292.15457,57.163588 c 9.97246,-9.972464 25.38634,-9.972456 35.35881,1e-5 L 504.29182,233.94204 a 25.000064,25.000064 0 0 0 35.34837,0 25.000064,25.000064 0 0 0 0.005,-35.35361 L 362.86699,21.809987 c -29.07996,-29.07996 -76.98606,-29.0799534 -106.06602,2e-6 z" />
|
||||
</svg>
|
||||
<figcaption>Example icon depicting an arrow pointing up, which follows the design rules outlined above.
|
||||
Two bends are given an angle-marker and values that describe one as a 90° angle with a 50 px bend
|
||||
radius, and the other as a 135° angle with a a 75 px bend. At one end of the only line, the
|
||||
line-width is marked as 50 px.</figcaption>
|
||||
</figure>
|
||||
</main>
|
||||
<h1>Iconography</h1>
|
||||
<p>
|
||||
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
|
||||
<a href="../logo/">logo, about which you can read more here</a>, and
|
||||
our font,
|
||||
<a href="../typography/"
|
||||
>Argon Glow, which we talk about more in the typography</a
|
||||
>.
|
||||
</p>
|
||||
<p>
|
||||
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).
|
||||
</p>
|
||||
<!-- TODO: Link to repository or other form of icon collection -->
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<figure>
|
||||
<svg
|
||||
height="20rem"
|
||||
viewBox="0 0 600 600"
|
||||
version="1.1"
|
||||
id="svg"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<style>
|
||||
g {
|
||||
fill: var(--color-foreground);
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g>
|
||||
<path
|
||||
d="M 213.37856,242.00777 C 227.32944,264.08838 251.97907,278.75 280,278.75 c 1.62235,0 3.23375,-0.0492 4.83265,-0.14613 v -7.5149 C 283.23611,271.19575 281.62471,271.25 280,271.25 c -25.69487,0 -48.1643,-13.57397 -60.70703,-33.93164 l -0.46709,-0.75791 z"
|
||||
/>
|
||||
<path
|
||||
d="m 277.18801,72.132287 c 15.38784,6.470687 32.9424,8.121551 50.32371,3.594275 4.76947,-1.242294 9.3272,-2.898256 13.6409,-4.918946 l -5.67991,-5.67991 c -3.15163,1.331329 -6.43925,2.45223 -9.85162,3.341044 -14.67629,3.822705 -29.46101,2.785261 -42.66223,-2.107307 z"
|
||||
/>
|
||||
<g aria-label="α=135°, r=75 px">
|
||||
<path
|
||||
d="m 196.15111,292.57293 -0.45833,-2.40625 q -0.46875,-2.46875 -2.32292,-2.46875 -1.39583,0 -2.03124,1.14583 -0.80209,1.4375 -0.80209,3.33333 0,2.29167 0.78125,3.38541 0.79167,1.11459 2.05208,1.11459 1.39583,0 2.14583,-2.21875 z m 1.07291,-3.1875 1.03125,-3.05208 h 1.70833 l -2.13541,6.32291 0.41667,2.28124 q 0.0937,0.51042 0.45833,0.9375 0.42708,0.5 0.76041,0.5 h 0.91667 V 298 h -1.14583 q -0.97917,0 -1.85417,-0.875 -0.42708,-0.4375 -0.60416,-1.35416 -0.47917,1.15625 -1.45833,2.06249 -0.45834,0.42709 -1.94792,0.42709 -2.44791,0 -3.63541,-1.58333 -1.21875,-1.63542 -1.21875,-4.5 0,-3.06249 1.32292,-4.49999 1.46875,-1.60416 3.53124,-1.60416 3.23958,0 3.85416,3.31249 z m 6.43749,-1.07291 h 13.35415 v 1.74999 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 18.26039,3.66666 h 3.4375 V 284.3646 l -3.73958,0.75 v -1.91666 l 3.71874,-0.75 h 2.10417 v 13.78123 h 3.43749 V 298 h -8.95832 z m 19.5833,-6.61457 q 1.51042,0.32291 2.35417,1.34374 0.85416,1.02084 0.85416,2.52083 0,2.30208 -1.58333,3.5625 -1.58333,1.26041 -4.49999,1.26041 -0.97917,0 -2.02083,-0.19791 -1.03125,-0.1875 -2.13541,-0.57292 V 295.5 q 0.87499,0.51042 1.91666,0.77084 1.04166,0.26041 2.17708,0.26041 1.97916,0 3.01041,-0.78125 1.04167,-0.78125 1.04167,-2.27083 0,-1.37499 -0.96875,-2.14583 -0.95833,-0.78124 -2.67708,-0.78124 h -1.8125 v -1.72917 h 1.89583 q 1.55208,0 2.375,-0.61458 0.82291,-0.625 0.82291,-1.79167 0,-1.19791 -0.85416,-1.83333 -0.84375,-0.64583 -2.42708,-0.64583 -0.86458,0 -1.85417,0.1875 -0.98958,0.1875 -2.17708,0.58333 v -1.87499 q 1.19792,-0.33334 2.23958,-0.5 1.05209,-0.16667 1.97917,-0.16667 2.39583,0 3.79166,1.09375 1.39583,1.08333 1.39583,2.9375 0,1.29166 -0.73958,2.18749 -0.73958,0.88542 -2.10417,1.22917 z m 7.21874,-7.16666 h 8.26041 v 1.77083 h -6.33333 v 3.8125 q 0.45834,-0.15625 0.91667,-0.22917 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42708 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16666 -1.01041,-0.16667 -2.09375,-0.5 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05208,-0.94792 1.05208,-2.57292 0,-1.62499 -1.05208,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 16.60414,1.0625 q -0.83333,0 -1.40624,0.58333 -0.57292,0.57292 -0.57292,1.40625 0,0.82292 0.57292,1.39583 0.57291,0.5625 1.40624,0.5625 0.83334,0 1.40625,-0.5625 0.57292,-0.57291 0.57292,-1.39583 0,-0.82292 -0.58334,-1.40625 -0.57291,-0.58333 -1.39583,-0.58333 z m 0,-1.34375 q 0.66667,0 1.28125,0.26042 0.61458,0.25 1.0625,0.72916 0.47917,0.46875 0.71875,1.0625 0.23958,0.59375 0.23958,1.28125 0,1.375 -0.96875,2.33333 -0.95833,0.94791 -2.35416,0.94791 -1.40625,0 -2.34375,-0.93749 -0.93749,-0.9375 -0.93749,-2.34375 0,-1.39583 0.95833,-2.36458 0.95833,-0.96875 2.34374,-0.96875 z"
|
||||
/>
|
||||
<path
|
||||
d="m 194.40111,314.79164 q -0.32291,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83333,-0.0937 -1.625,0 -2.5,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60417,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35417,-0.52083 0.19791,0 0.4375,0.0312 0.23958,0.0208 0.53124,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 17.36456,-10.11456 h 9.99998 v 0.89583 l -5.64582,14.65622 h -2.19791 l 5.31249,-13.78122 h -7.46874 z m 14.12498,0 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.5625,3.90624 -1.56249,1.38542 -4.40624,1.38542 -0.97916,0 -2,-0.16667 -1.01041,-0.16667 -2.09374,-0.5 v -2.11458 q 0.9375,0.51042 1.93749,0.76042 1,0.25 2.11458,0.25 1.80209,0 2.85417,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85417,-0.94792 -0.84374,0 -1.68749,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 21.91663,13.80206 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33334,1.6875 1.33334,4.4375 0,2.74999 -1.33334,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.87499,-3.3125 -0.86459,-1.20833 -2.38542,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38542,-1.19791 0.87499,-1.20833 0.87499,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98957 h -2.26041 l -3.39583,-4.58332 -3.39583,4.58332 h -2.26041 l 4.53124,-6.10415 -4.14583,-5.56249 h 2.26042 l 3.09374,4.15624 3.09375,-4.15624 z"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="m 187.79306,570.26801 h 8.26041 v 1.77083 h -6.33333 v 3.81249 q 0.45834,-0.15625 0.91667,-0.22916 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42709 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16667 -1.01041,-0.16666 -2.09375,-0.49999 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05209,-0.94792 1.05209,-2.57292 0,-1.62499 -1.05209,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.18749 -0.83333,0.1875 -1.70833,0.58334 z m 18.05206,1.38541 q -1.625,0 -2.44791,1.60417 -0.8125,1.59375 -0.8125,4.80207 0,3.19792 0.8125,4.80208 0.82291,1.59375 2.44791,1.59375 1.63541,0 2.44791,-1.59375 0.82292,-1.60416 0.82292,-4.80208 0,-3.20832 -0.82292,-4.80207 -0.8125,-1.60417 -2.44791,-1.60417 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -4,-2.0625 -1.37499,-2.07291 -1.37499,-5.99999 0,-3.93749 1.37499,-5.99999 1.38542,-2.07291 4,-2.07291 z m 17.43747,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04166 1.52083,-1.54166 0.92708,-0.51042 2.20833,-0.51042 2.125,0 3.44791,1.6875 1.33333,1.6875 1.33333,4.43749 0,2.75 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51041 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.31249 -0.86458,-1.20834 -2.38541,-1.20834 -1.52083,0 -2.39583,1.20834 -0.86458,1.19791 -0.86458,3.31249 0,2.11458 0.86458,3.32291 0.875,1.19792 2.39583,1.19792 1.52083,0 2.38541,-1.19792 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98958 h -2.26041 l -3.39583,-4.58333 -3.39583,4.58333 h -2.26041 l 4.53124,-6.10416 -4.14582,-5.56249 h 2.26041 l 3.09374,4.15624 3.09375,-4.15624 z"
|
||||
transform="rotate(-45)"
|
||||
aria-label="50 px"
|
||||
/>
|
||||
<g aria-label="α=90°, r=50 px">
|
||||
<path
|
||||
d="m 281.87513,91.958416 -0.45833,-2.406247 q -0.46875,-2.468746 -2.32291,-2.468746 -1.39583,0 -2.03125,1.145832 -0.80208,1.437498 -0.80208,3.333328 0,2.291663 0.78125,3.385411 0.79166,1.114582 2.05208,1.114582 1.39583,0 2.14583,-2.218747 z m 1.07292,-3.187495 1.03125,-3.052079 h 1.70833 l -2.13542,6.322907 0.41667,2.281246 q 0.0937,0.510416 0.45833,0.937499 0.42708,0.499999 0.76042,0.499999 h 0.91666 v 1.624997 h -1.14583 q -0.97916,0 -1.85416,-0.874998 -0.42709,-0.4375 -0.60417,-1.354165 -0.47916,1.156248 -1.45833,2.062497 -0.45833,0.427083 -1.94791,0.427083 -2.44792,0 -3.63541,-1.583331 -1.21875,-1.635414 -1.21875,-4.499993 0,-3.062495 1.32291,-4.499993 1.46875,-1.604164 3.53125,-1.604164 3.23958,0 3.85416,3.312495 z m 6.43749,-1.072915 h 13.35414 v 1.749997 h -13.35414 z m 0,4.249993 h 13.35414 v 1.770831 h -13.35414 z m 17.9583,5.114575 v -1.916663 q 0.79167,0.374999 1.60417,0.572915 0.8125,0.197917 1.59374,0.197917 2.08334,0 3.17708,-1.395831 1.10417,-1.406248 1.26042,-4.26041 -0.60417,0.895832 -1.53125,1.374997 -0.92708,0.479166 -2.05208,0.479166 -2.33333,0 -3.69791,-1.406247 -1.35417,-1.416665 -1.35417,-3.864578 0,-2.395829 1.41667,-3.843744 1.41666,-1.447914 3.77083,-1.447914 2.69791,0 4.11457,2.072913 1.42708,2.062497 1.42708,5.999991 0,3.677078 -1.74999,5.874991 -1.73958,2.187496 -4.6875,2.187496 -0.79166,0 -1.60416,-0.156249 -0.8125,-0.15625 -1.6875,-0.46875 z m 4.1875,-6.593739 q 1.41666,0 2.23958,-0.968749 0.83333,-0.968748 0.83333,-2.656246 0,-1.67708 -0.83333,-2.645829 -0.82292,-0.979165 -2.23958,-0.979165 -1.41667,0 -2.25,0.979165 -0.82292,0.968749 -0.82292,2.645829 0,1.687498 0.82292,2.656246 0.83333,0.968749 2.25,0.968749 z m 13.82289,-7.249989 q -1.625,0 -2.44791,1.604164 -0.8125,1.593748 -0.8125,4.802076 0,3.197912 0.8125,4.802076 0.82291,1.593747 2.44791,1.593747 1.63542,0 2.44791,-1.593747 0.82292,-1.604164 0.82292,-4.802076 0,-3.208328 -0.82292,-4.802076 -0.81249,-1.604164 -2.44791,-1.604164 z m 0,-1.666664 q 2.61458,0 3.98958,2.072913 1.38541,2.062497 1.38541,5.999991 0,3.927077 -1.38541,5.999991 -1.375,2.062496 -3.98958,2.062496 -2.61458,0 -3.99999,-2.062496 -1.375,-2.072914 -1.375,-5.999991 0,-3.937494 1.375,-5.999991 1.38541,-2.072913 3.99999,-2.072913 z m 12.12498,1.343748 q -0.83333,0 -1.40625,0.583332 -0.57291,0.572916 -0.57291,1.406248 0,0.822916 0.57291,1.395831 0.57292,0.562499 1.40625,0.562499 0.83333,0 1.40625,-0.562499 0.57292,-0.572915 0.57292,-1.395831 0,-0.822915 -0.58334,-1.406248 -0.57291,-0.583332 -1.39583,-0.583332 z m 0,-1.343748 q 0.66667,0 1.28125,0.260416 0.61458,0.25 1.0625,0.729166 0.47916,0.468749 0.71875,1.062498 0.23958,0.593749 0.23958,1.281248 0,1.374998 -0.96875,2.33333 -0.95833,0.947915 -2.35416,0.947915 -1.40625,0 -2.34375,-0.937499 -0.9375,-0.937498 -0.9375,-2.343746 0,-1.395831 0.95834,-2.364579 0.95833,-0.968749 2.34374,-0.968749 z"
|
||||
/>
|
||||
<path
|
||||
d="m 273.33869,114.17713 q -0.32292,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83334,-0.0937 -1.62499,0 -2.49999,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60416,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35416,-0.52083 0.19792,0 0.4375,0.0312 0.23959,0.0208 0.53125,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 H 275.5991 Z m 0,4.24999 h 13.35415 v 1.77083 H 275.5991 Z m 17.91664,-10.11456 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.56249,3.90624 -1.5625,1.38542 -4.40625,1.38542 -0.97916,0 -1.99999,-0.16667 -1.01042,-0.16666 -2.09375,-0.5 v -2.11458 q 0.9375,0.51042 1.9375,0.76042 0.99999,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85416,-0.94792 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 18.05205,1.38541 q -1.62499,0 -2.44791,1.60416 -0.8125,1.59375 -0.8125,4.80208 0,3.19791 0.8125,4.80208 0.82292,1.59374 2.44791,1.59374 1.63542,0 2.44792,-1.59374 0.82291,-1.60417 0.82291,-4.80208 0,-3.20833 -0.82291,-4.80208 -0.8125,-1.60416 -2.44792,-1.60416 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -3.99999,-2.0625 -1.375,-2.07291 -1.375,-5.99999 0,-3.93749 1.375,-5.99999 1.38541,-2.07291 3.99999,-2.07291 z m 17.43748,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60416,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33333,1.6875 1.33333,4.4375 0,2.74999 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91667,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.3125 -0.86458,-1.20833 -2.38541,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38541,-1.19791 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21875,5.67707 4.4375,5.98957 h -2.26042 l -3.39582,-4.58332 -3.39583,4.58332 h -2.26042 l 4.53125,-6.10415 -4.14583,-5.56249 h 2.26041 l 3.09375,4.15624 3.09374,-4.15624 z"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="m 557.29687,216.24219 -5.30273,5.30273 5.05078,5.05078 -24.74805,24.74805 -5.05273,-5.05078 -5.30273,5.30273 10.35546,10.35547 35.35547,-35.35547 z"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
style="fill: #808080"
|
||||
d="m 71.185431,207.42553 c -24.198406,24.1984 -24.198409,64.19342 1e-6,88.39183 24.198409,24.1984 64.188198,24.19318 88.386608,-0.005 L 274.47515,180.90903 c 2.66087,-2.66088 4.20734,-2.30988 6.60826,-1.31541 2.4009,0.99451 3.74779,1.84302 3.7478,5.60606 l -10e-6,389.80306 a 25.000064,25.000064 0 0 0 24.99756,24.99756 25.000064,25.000064 0 0 0 25.00277,-25.00277 V 185.19446 c -10e-6,-23.9138 -15.38944,-43.83349 -34.6124,-51.79591 -19.22297,-7.96242 -44.18796,-4.75275 -61.09758,12.15688 L 124.21844,260.45854 c -5.09092,5.09091 -12.58327,5.09091 -17.67419,0 -5.09091,-5.09092 -5.09613,-12.5885 -0.005,-17.67941 L 292.15457,57.163588 c 9.97246,-9.972464 25.38634,-9.972456 35.35881,1e-5 L 504.29182,233.94204 a 25.000064,25.000064 0 0 0 35.34837,0 25.000064,25.000064 0 0 0 0.005,-35.35361 L 362.86699,21.809987 c -29.07996,-29.07996 -76.98606,-29.0799534 -106.06602,2e-6 z"
|
||||
/>
|
||||
</svg>
|
||||
<figcaption>
|
||||
Example icon depicting an arrow pointing up, which follows the
|
||||
design rules outlined above. Two bends are given an angle-marker and
|
||||
values that describe one as a 90° angle with a 50 px bend radius,
|
||||
and the other as a 135° angle with a a 75 px bend. At one end of the
|
||||
only line, the line-width is marked as 50 px.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
<script
|
||||
src="../assets/script/styleguide.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,78 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css" />
|
||||
<title>Color Guide</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" id="backToWiki">
|
||||
<img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
<a href="/" id="backToWiki">
|
||||
<img
|
||||
src="assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
|
||||
<img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
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."/>
|
||||
</a>
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||
<ul>
|
||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||
<li class="active"><a href=""><i data-icon="home"></i>Overview</a></li>
|
||||
<li><a href="colors"><i data-icon="info"></i>Colors</a></li>
|
||||
<li><a href="typography"><i data-icon="info"></i>Typography</a></li>
|
||||
<li><a href="iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||
<li><a href="logo"><i data-icon="info"></i>Logo</a></li>
|
||||
<li><a href="glow"><i data-icon="info"></i>Glow</a></li>
|
||||
<li><a href="demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<h1>Styleguide Easterhegg 2025</h1>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu-small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href=""><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="colors"><i data-icon="info"></i>Colors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="typography"><i data-icon="info"></i>Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="iconography"><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="logo"><i data-icon="info"></i>Logo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glow"><i data-icon="info"></i>Glow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="demopage"><i data-icon="info"></i>Demopage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="generator"><i data-icon="info"></i>Image Generator</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<h1>Styleguide Easterhegg 2025</h1>
|
||||
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br>
|
||||
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||
change without notice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script src="assets/script/styleguide.js" type="text/javascript"></script>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br />
|
||||
Not all resources may be available yet, explanations and examples
|
||||
may be missing and things may change without notice.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script src="assets/script/styleguide.js" type="text/javascript"></script>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,136 +1,225 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../assets/style/styleguide.css"
|
||||
/>
|
||||
<title>Logo</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" id="backToWiki">
|
||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
<a href="/" id="backToWiki">
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
||||
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
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." />
|
||||
</a>
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||
<ul>
|
||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||||
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||
<li class="active"><a href=""><i data-icon="info"></i>Logo</a></li>
|
||||
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
|
||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu-small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../"><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../colors"><i data-icon="info"></i>Colors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../typography"><i data-icon="info"></i>Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href=""><i data-icon="info"></i>Logo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../glow"><i data-icon="info"></i>Glow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../demopage"><i data-icon="info"></i>Demopage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../generator"><i data-icon="info"></i>Image Generator</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br />
|
||||
Not all resources may be available yet, explanations and examples
|
||||
may be missing and things may change without notice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br>
|
||||
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||
change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Logo</h1>
|
||||
<p>
|
||||
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).
|
||||
</p>
|
||||
<!-- TODO: Link to repository or other form of logo collection -->
|
||||
|
||||
<h1>Logo</h1>
|
||||
<p>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).</p>
|
||||
<!-- TODO: Link to repository or other form of logo collection -->
|
||||
<h2>Full Logo</h2>
|
||||
<p>
|
||||
The most present logo consists of the hare and egg, as well as the
|
||||
motto <i>Unhandled Eggception</i> and the eventname
|
||||
<i>Easterhegg 2025</i>. 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.
|
||||
</p>
|
||||
<div class="layout-column">
|
||||
<img
|
||||
src="../assets/image/logos_dark/logo_eventname.png"
|
||||
class="dark background"
|
||||
alt="Full logo of Easterhegg 2025 in the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg with cracks. The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logos_light/logo_eventname.png"
|
||||
class="light background"
|
||||
alt="The same logo as the previous one, but instead in the style of an unpowered neon sign, only glowing dimly."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2>Full Logo</h2>
|
||||
<p>The most present logo consists of the hare and egg, as well as the motto <i>Unhandled Eggception</i> and
|
||||
the eventname <i>Easterhegg 2025</i>. 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.</p>
|
||||
<div class="layout-column">
|
||||
<img src="../assets/image/logos_dark/logo_eventname.png" class="dark background"
|
||||
alt="Full logo of Easterhegg 2025 in the style of a neon sign: The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg with cracks. The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
||||
<img src="../assets/image/logos_light/logo_eventname.png" class="light background"
|
||||
alt="The same logo as the previous one, but instead in the style of an unpowered neon sign, only glowing dimly." />
|
||||
</div>
|
||||
<h2>EH22 Logo</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="layout-column">
|
||||
<img
|
||||
src="../assets/image/logos_dark/logo_eh22.png"
|
||||
class="dark background"
|
||||
alt="EH22 logo of Easterhegg 2025 in the style of a neon sign: It features the text 'EH22' spanning two lines. The '22' spans across the same width as 'EH' by spacing the two digits slighty further apart from one another than the two letters, giving it a rectangular appearance. The entire text features the blue neon effect from previous logos."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logos_light/logo_eh22.png"
|
||||
class="light background"
|
||||
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2>EH22 Logo</h2>
|
||||
<p>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.</p>
|
||||
<div class="layout-column">
|
||||
<img src="../assets/image/logos_dark/logo_eh22.png" class="dark background"
|
||||
alt="EH22 logo of Easterhegg 2025 in the style of a neon sign: It features the text 'EH22' spanning two lines. The '22' spans across the same width as 'EH' by spacing the two digits slighty further apart from one another than the two letters, giving it a rectangular appearance. The entire text features the blue neon effect from previous logos." />
|
||||
<img src="../assets/image/logos_light/logo_eh22.png" class="light background"
|
||||
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
|
||||
</div>
|
||||
<h2>Icon Logos</h2>
|
||||
<p>
|
||||
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
|
||||
<a href="https://chaos.social/@easterhegg2025"
|
||||
>Easterhegg 2025 mastodon account</a
|
||||
>) or the association is clear e.g. because it's a channel icon inside
|
||||
the EH22 matrix space. But this is not a super strict policy. They can
|
||||
of course also be used as simple design elements.
|
||||
</p>
|
||||
<div class="layout-column">
|
||||
<img
|
||||
src="../assets/image/logos_dark/logo_icons.png"
|
||||
class="dark background"
|
||||
alt="Icon logo of Easterhegg 2025 in the style of a neon sign: It features the same hare and egg as before, horizontally next to one another, but the egg is a bit lower than the hare."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logos_light/logo_icons.png"
|
||||
class="light background"
|
||||
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2>Icon Logos</h2>
|
||||
<p>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 <a
|
||||
href="https://chaos.social/@easterhegg2025">Easterhegg 2025 mastodon account</a>) or the association
|
||||
is clear e.g. because it's a channel icon inside the EH22 matrix space. But this is not a super strict
|
||||
policy. They can of course also be used as simple design elements.</p>
|
||||
<div class="layout-column">
|
||||
<img src="../assets/image/logos_dark/logo_icons.png" class="dark background"
|
||||
alt="Icon logo of Easterhegg 2025 in the style of a neon sign: It features the same hare and egg as before, horizontally next to one another, but the egg is a bit lower than the hare." />
|
||||
<img src="../assets/image/logos_light/logo_icons.png" class="light background"
|
||||
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
|
||||
</div>
|
||||
<div class="layout-column">
|
||||
<img
|
||||
src="../assets/image/logos_dark/logo_egg.png"
|
||||
class="dark background"
|
||||
alt="Egg-only logo of Easterhegg 2025 in the style of a neon sign: It only features the egg from before."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logos_light/logo_egg.png"
|
||||
class="light background"
|
||||
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="layout-column">
|
||||
<img src="../assets/image/logos_dark/logo_egg.png" class="dark background"
|
||||
alt="Egg-only logo of Easterhegg 2025 in the style of a neon sign: It only features the egg from before." />
|
||||
<img src="../assets/image/logos_light/logo_egg.png" class="light background"
|
||||
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
|
||||
</div>
|
||||
|
||||
<div class="layout-column">
|
||||
<img src="../assets/image/logos_dark/logo_hare.png" class="dark background"
|
||||
alt="Hare-only logo of Easterhegg 2025 in the style of a neon sign: It only features the hare from before." />
|
||||
<img src="../assets/image/logos_light/logo_hare.png" class="light background"
|
||||
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
|
||||
</div>
|
||||
</main>
|
||||
<div class="layout-column">
|
||||
<img
|
||||
src="../assets/image/logos_dark/logo_hare.png"
|
||||
class="dark background"
|
||||
alt="Hare-only logo of Easterhegg 2025 in the style of a neon sign: It only features the hare from before."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logos_light/logo_hare.png"
|
||||
class="light background"
|
||||
alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly."
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
<script
|
||||
src="../assets/script/styleguide.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,188 +1,265 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../assets/style/styleguide.css"
|
||||
/>
|
||||
<title>Typography</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" id="backToWiki">
|
||||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
<a href="/" id="backToWiki">
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
||||
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="../assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
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." />
|
||||
</a>
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||||
<ul>
|
||||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||||
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||||
<li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
|
||||
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
||||
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||||
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
|
||||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||||
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu-small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../"><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../colors"><i data-icon="info"></i>Colors</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href=""><i data-icon="info"></i>Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../logo"><i data-icon="info"></i>Logo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../glow"><i data-icon="info"></i>Glow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../demopage"><i data-icon="info"></i>Demopage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../generator"><i data-icon="info"></i>Image Generator</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="light"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br />
|
||||
Not all resources may be available yet, explanations and examples
|
||||
may be missing and things may change without notice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
<strong>Work in progress</strong>
|
||||
This style guide is still under development.<br>
|
||||
Not all resources may be available yet, explanations and examples may be missing and things may
|
||||
change without notice.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Typography</h1>
|
||||
<p>
|
||||
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
|
||||
<a href="../demopage/"
|
||||
>demopage which includes examples of various text components</a
|
||||
>.
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Paragraphs/Wildcard:</dt>
|
||||
<dd>
|
||||
In general, everything that doesn't fall under the following
|
||||
categories, should use the Athiti typeface, unless your use-case
|
||||
calls for something else. This is just a guide and design
|
||||
recommendation after all.
|
||||
</dd>
|
||||
|
||||
<h1>Typography</h1>
|
||||
<p>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 <a href="../demopage/">demopage which includes examples of various text components</a>.</p>
|
||||
<dl>
|
||||
<dt>Paragraphs/Wildcard:</dt>
|
||||
<dd>In general, everything that doesn't fall under the following categories, should use the Athiti
|
||||
typeface, unless your use-case calls for something else. This is just a guide and design
|
||||
recommendation after all.</dd>
|
||||
<dt>Headings:</dt>
|
||||
<dd>
|
||||
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.
|
||||
</dd>
|
||||
|
||||
<dt>Headings:</dt>
|
||||
<dd>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.</dd>
|
||||
<dt>Subheadings:</dt>
|
||||
<dd>
|
||||
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.
|
||||
</dd>
|
||||
|
||||
<dt>Subheadings:</dt>
|
||||
<dd>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.</dd>
|
||||
<dt>Code/monospace:</dt>
|
||||
<dd>
|
||||
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.
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dt>Code/monospace:</dt>
|
||||
<dd>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.</dd>
|
||||
</dl>
|
||||
<h2>Font Table</h2>
|
||||
<div class="layout-column">
|
||||
<table class="row-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Font size</th>
|
||||
<th>Font family</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<th scope="row">Main Title</th>
|
||||
<td>72px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 1</th>
|
||||
<td>48px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 2</th>
|
||||
<td>32px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 3</th>
|
||||
<td>24px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 4</th>
|
||||
<td>18px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Subheading</th>
|
||||
<td>24px</td>
|
||||
<td>Athiti</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Paragraph</th>
|
||||
<td>16px</td>
|
||||
<td>Athiti</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Code</th>
|
||||
<td>16px</td>
|
||||
<td>Departure Mono</td>
|
||||
</tr>
|
||||
</table>
|
||||
<ul>
|
||||
<li><span class="main-title">Main Title</span></li>
|
||||
<li><span class="h1">Heading 1</span></li>
|
||||
<li><span class="h2">Heading 2</span></li>
|
||||
<li><span class="h3">Heading 3</span></li>
|
||||
<li><span class="h4">Heading 4</span></li>
|
||||
<li><span class="subheading">Subheading</span></li>
|
||||
<li><span class="p">Paragraph</span></li>
|
||||
<li><span class="code">Code</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Font Table</h2>
|
||||
<div class="layout-column">
|
||||
<table class="row-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Font size</th>
|
||||
<th>Font family</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<th scope="row">Main Title</th>
|
||||
<td>72px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 1</th>
|
||||
<td>48px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 2</th>
|
||||
<td>32px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 3</th>
|
||||
<td>24px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 4</th>
|
||||
<td>18px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Subheading</th>
|
||||
<td>24px</td>
|
||||
<td>Athiti</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Paragraph</th>
|
||||
<td>16px</td>
|
||||
<td>Athiti</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Code</th>
|
||||
<td>16px</td>
|
||||
<td>Departure Mono</td>
|
||||
</tr>
|
||||
</table>
|
||||
<ul>
|
||||
<li><span class="main-title">Main Title</span></li>
|
||||
<li><span class="h1">Heading 1</span></li>
|
||||
<li><span class="h2">Heading 2</span></li>
|
||||
<li><span class="h3">Heading 3</span></li>
|
||||
<li><span class="h4">Heading 4</span></li>
|
||||
<li><span class="subheading">Subheading</span></li>
|
||||
<li><span class="p">Paragraph</span></li>
|
||||
<li><span class="code">Code</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Our custom font: Argon Glow</h2>
|
||||
<p>As mentioned above, we created Argon Glow ourselves. While researching libre typefaces (OFL or similarly
|
||||
licenced) with a neon-sign look, we found quite a few candidates. But each of them made some sort of
|
||||
design choice we didn't like.</p>
|
||||
<p>Major issues were gaps and line lengths. Neon signs are made using bent tubes. Some shapes would require
|
||||
either multiple tubes or involve very tight bends and layering in the third dimension. Some typefaces
|
||||
did try to imitate layering, but because typefaces are usually two-dimensional, this didn't really look
|
||||
satisfactory.</p>
|
||||
<p>When using multiple lines, some typefaces really likes the <i>more is better</i> approach, using
|
||||
unnecessary gaps that one wouldn't do when creating physical signs, simply because it would be a useless
|
||||
amount of additional work.</p>
|
||||
<p>Bending tubes is difficult, requiring a minimum radius to not damage the pipe or cause flattening. So all
|
||||
typefaces using corners on the inside of bends were a no-go. Some typefaces on the other hand liked
|
||||
bends so much, they added extra bends to the end of lines, which did a full 180. Maybe to try and
|
||||
imitate serifs? Either way, we didn't like that.</p>
|
||||
<p>So in the end, and over the course of multiple months, we made our own custom typeface that meets all of
|
||||
our desired properties and is freely available under the OFL version 1.1. We hope y'all like it. And who
|
||||
knows, maybe someone will use it for completely unrelated projects than this Easterhegg.</p>
|
||||
</main>
|
||||
<h2>Our custom font: Argon Glow</h2>
|
||||
<p>
|
||||
As mentioned above, we created Argon Glow ourselves. While researching
|
||||
libre typefaces (OFL or similarly licenced) with a neon-sign look, we
|
||||
found quite a few candidates. But each of them made some sort of
|
||||
design choice we didn't like.
|
||||
</p>
|
||||
<p>
|
||||
Major issues were gaps and line lengths. Neon signs are made using
|
||||
bent tubes. Some shapes would require either multiple tubes or involve
|
||||
very tight bends and layering in the third dimension. Some typefaces
|
||||
did try to imitate layering, but because typefaces are usually
|
||||
two-dimensional, this didn't really look satisfactory.
|
||||
</p>
|
||||
<p>
|
||||
When using multiple lines, some typefaces really likes the
|
||||
<i>more is better</i> approach, using unnecessary gaps that one
|
||||
wouldn't do when creating physical signs, simply because it would be a
|
||||
useless amount of additional work.
|
||||
</p>
|
||||
<p>
|
||||
Bending tubes is difficult, requiring a minimum radius to not damage
|
||||
the pipe or cause flattening. So all typefaces using corners on the
|
||||
inside of bends were a no-go. Some typefaces on the other hand liked
|
||||
bends so much, they added extra bends to the end of lines, which did a
|
||||
full 180. Maybe to try and imitate serifs? Either way, we didn't like
|
||||
that.
|
||||
</p>
|
||||
<p>
|
||||
So in the end, and over the course of multiple months, we made our own
|
||||
custom typeface that meets all of our desired properties and is freely
|
||||
available under the OFL version 1.1. We hope y'all like it. And who
|
||||
knows, maybe someone will use it for completely unrelated projects
|
||||
than this Easterhegg.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
<script
|
||||
src="../assets/script/styleguide.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue