From 8ea57dbcb75989a02f918fadd8a79bae17df13ef Mon Sep 17 00:00:00 2001 From: Nico Verbruggen Date: Mon, 2 Mar 2026 22:50:38 +0100 Subject: [PATCH] Final style updates --- assets/app.js | 13 +++++++ assets/styles.css | 95 +++++++++++++++++++++++++++++++++++------------ index.php | 26 ++++++++++--- 3 files changed, 105 insertions(+), 29 deletions(-) diff --git a/assets/app.js b/assets/app.js index 07f93d5..491e539 100644 --- a/assets/app.js +++ b/assets/app.js @@ -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() { diff --git a/assets/styles.css b/assets/styles.css index 2e39c82..9aa2e82 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -2,10 +2,10 @@ color-scheme: light; --ink: #171717; --muted: #5b5b5b; - --accent: #a04c24; + --accent: #6e351b; --accent-soft: #f2d2c2; - --cta: #a04c24; - --cta-hover: #7f3b1b; + --cta: #5b5b5b; + --cta-hover: #171717; --surface: #fffdf8; --panel: #ffffff; --border: #e6ded6; @@ -20,6 +20,10 @@ box-sizing: border-box; } +.hidden { + display: none; +} + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; @@ -164,6 +168,32 @@ select { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; + display: flex; + align-items: center; + gap: 6px; +} + +.toggle-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + color: var(--muted); +} + +.screen-icon--moon { + display: none; +} + +.toggle-icon--text { + width: auto; + height: auto; + font-family: serif; + font-weight: bold; + font-style: italic; + font-size: 1rem; + line-height: 1; + text-transform: none; + font-variant-ligatures: common-ligatures; } .toggle-input { @@ -179,9 +209,9 @@ select { display: flex; align-items: center; justify-content: space-between; - gap: 6px; + gap: 2px; width: 170px; - padding: 15px 6px; + padding: 10px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); @@ -202,10 +232,10 @@ select { .toggle-thumb { position: absolute; - top: 6px; - bottom: 6px; - left: 6px; - width: calc(50% - 8px); + top: 3px; + bottom: 3px; + left: 3px; + width: calc(50% - 3px); border-radius: 999px; background: var(--accent); border: 1px solid var(--border); @@ -267,7 +297,6 @@ select { color: var(--ink); } - .badge { padding: 6px 10px; border-radius: 999px; @@ -312,6 +341,21 @@ select { padding-top: 16px; } +.sidebar-actions .button--primary { + border-color: var(--cta); + background: var(--cta); + color: #fff; +} + +.sidebar-actions .button--primary:hover { + background: var(--cta-hover); + border-color: var(--cta-hover); +} + +.sidebar-actions a:hover { + background-color: #EEE; +} + .sidebar-notice { display: flex; align-items: center; @@ -363,17 +407,6 @@ select { height: 16px; } -.button--primary { - border-color: var(--cta); - background: var(--cta); - color: #fff; -} - -.button--primary:hover { - background: var(--cta-hover); - border-color: var(--cta-hover); -} - .preview { display: flex; flex-direction: column; @@ -544,8 +577,8 @@ select { } .quick-title { - font-size: 1rem; - color: #3e3530; + font-size: 0.9rem; + color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; @@ -556,6 +589,14 @@ select { gap: 12px; } +.quick-disclaimer { + margin-top: -4px; + font-size: 0.9rem; + line-height: 1.3rem; + color: #999; + font-style: italic; +} + .quick-star { display: inline-block; width: 8px; @@ -736,6 +777,14 @@ details[open] .quick-title { .mobile-only { display: block; } + + .preview { + order: 1; + } + + .sidebar-column { + order: 2; + } } @media (max-height: 500px) and (orientation: landscape) { diff --git a/index.php b/index.php index db654d3..14a31f1 100644 --- a/index.php +++ b/index.php @@ -28,11 +28,12 @@ require __DIR__ . '/web/load_fonts.php';
-
★ Core Collection
+
★ Choose a font
+

This selection has been carefully curated, but there's more options available below, if you want.

- Extra Collection + Additional fonts
@@ -48,7 +49,7 @@ require __DIR__ . '/web/load_fonts.php';
- Screen + Screen
- Bezel + Bezel
+
@@ -105,7 +119,7 @@ require __DIR__ . '/web/load_fonts.php'; Prologue - 1 OF 58 + 1 OF 18
@@ -119,7 +133,7 @@ require __DIR__ . '/web/load_fonts.php';
-

Made with ♥ for digital reading by Nico Verbruggen.

+

Made with ♥ for digital reading by Nico Verbruggen.

Preview text from Warbreaker by Brandon Sanderson, used under Creative Commons.