fonts/font-showcase
1
0
Fork 0
mirror of https://github.com/nicoverbruggen/ebook-fonts-showcase.git synced 2026-03-22 21:10:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Final style updates

Browse Source
This commit is contained in:
Nico Verbruggen
2026-03-02 22:50:38 +01:00
parent 393c7551de
commit 8ea57dbcb7
3 changed files with 105 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/app.js
View File

@@ -7,6 +7,7 @@ const fontListExtra = document.getElementById("fontListExtra");
const extraFonts = document.getElementById("extraFonts");
const darkModeToggle = document.getElementById("darkModeToggle");
const bezelToggle = document.getElementById("bezelToggle");
const ligatureDisableToggle = document.getElementById("ligaturesToggle");
const reader = document.querySelector(".reader");
const sizeValue = document.getElementById("sizeValue");
const lineHeightValue = document.getElementById("lineHeightValue");
@@ -152,6 +153,7 @@ function renderPreview() {
sampleArea.style.lineHeight = lineHeightRange.value;
sampleArea.style.fontWeight = "400";
sampleArea.style.fontStyle = "normal";
sampleArea.style.fontVariantLigatures = ligatureDisableToggle.checked ? "none" : "common-ligatures";
updateValueDisplays();
if (sampleHtml) {
@@ -184,18 +186,29 @@ function setupInteractions() {
fontSelect.addEventListener("change", (e) => setActiveFont(e.target.value));
darkModeToggle.addEventListener("change", (e) => {
reader.classList.toggle("is-dark", e.target.checked);
updateScreenIcon();
});
bezelToggle.addEventListener("change", (e) => {
reader.classList.toggle("is-bezel-dark", !e.target.checked);
});
ligatureDisableToggle.addEventListener("change", renderPreview);
if (fontListExtra) {
setupScrollFade(fontListExtra);
}
}
function updateScreenIcon() {
const sun = document.querySelector(".screen-icon--sun");
const moon = document.querySelector(".screen-icon--moon");
sun.style.display = darkModeToggle.checked ? "none" : "inline-block";
moon.style.display = darkModeToggle.checked ? "inline-block" : "none";
}
function syncToggles() {
darkModeToggle.checked = reader.classList.contains("is-dark");
bezelToggle.checked = !reader.classList.contains("is-bezel-dark");
ligatureDisableToggle.checked = false;
updateScreenIcon();
}
function resetControls() {