fonts/font-showcase
1
0
Fork 0
mirror of https://github.com/nicoverbruggen/ebook-fonts-showcase.git synced 2026-03-27 07:00: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() {

95
assets/styles.css
View File

@@ -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) {

26
index.php
View File

@@ -28,11 +28,12 @@ require __DIR__ . '/web/load_fonts.php';
<div class="desktop-only">
<div class="font-sections">
<div class="quick-group">
<div class="quick-title"><span class="quick-star">&#9733;</span> Core Collection</div>
<div class="quick-title"><span class="quick-star">&#9733;</span> Choose a font</div>
<p class="quick-disclaimer">This selection has been carefully curated, but there's more options available below, if you want.</p>
<div class="font-list" id="fontListCore"></div>
</div>
<details class="quick-group" id="extraFonts">
<summary class="quick-title">Extra Collection</summary>
<summary class="quick-title">Additional fonts</summary>
<div class="font-list" id="fontListExtra"></div>
</details>
</div>
@@ -48,7 +49,7 @@ require __DIR__ . '/web/load_fonts.php';
</div>
<div class="control-group">
<div class="toggle-row">
<span class="toggle-label">Screen</span>
<span class="toggle-label"><svg class="toggle-icon screen-icon--sun" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg><svg class="toggle-icon screen-icon--moon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.641.045-.957A8.006 8.006 0 0 0 4 12z"/></svg> Screen</span>
<div class="toggle-group">
<input id="darkModeToggle" class="toggle-input" type="checkbox" />
<label for="darkModeToggle" class="toggle-track" aria-label="Screen mode">
@@ -61,7 +62,7 @@ require __DIR__ . '/web/load_fonts.php';
</div>
<div class="control-group">
<div class="toggle-row">
<span class="toggle-label">Bezel</span>
<span class="toggle-label"><svg class="toggle-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2v16h16V4H4zm2 2h12v12H6V6z"/></svg> Bezel</span>
<div class="toggle-group">
<input id="bezelToggle" class="toggle-input" type="checkbox" />
<label for="bezelToggle" class="toggle-track" aria-label="Bezel color">
@@ -72,6 +73,19 @@ require __DIR__ . '/web/load_fonts.php';
</div>
</div>
</div>
<div class="control-group hidden">
<div class="toggle-row">
<span class="toggle-label"><span class="toggle-icon toggle-icon--text" aria-hidden="true">fi</span> Ligatures</span>
<div class="toggle-group">
<input id="ligaturesToggle" class="toggle-input" type="checkbox" />
<label for="ligaturesToggle" class="toggle-track" aria-label="Ligatures">
<span class="toggle-option toggle-option--left">On</span>
<span class="toggle-option toggle-option--right">Off</span>
<span class="toggle-thumb"></span>
</label>
</div>
</div>
</div>
<div class="sidebar-actions-group">
<div class="sidebar-actions">
<a class="button button--primary" href="https://github.com/nicoverbruggen/ebook-fonts/releases" target="_blank" rel="noreferrer">
@@ -105,7 +119,7 @@ require __DIR__ . '/web/load_fonts.php';
<span class="reader-meta">
<span>Prologue</span>
<span class="reader-dot" aria-hidden="true"></span>
<span>1 OF 58</span>
<span>1 OF 18</span>
</span>
</div>
<div class="sample" id="sampleArea"></div>
@@ -119,7 +133,7 @@ require __DIR__ . '/web/load_fonts.php';
</div>
</div>
<div class="device-footer">
<p>Made with &hearts; for digital reading by <a href="https://nicoverbruggen.be" target="_blank" rel="noreferrer">Nico Verbruggen</a>.</p>
<p>Made with <span style="color: rgb(239, 68, 68);">&hearts;</span> for digital reading by <a href="https://nicoverbruggen.be" target="_blank" rel="noreferrer">Nico Verbruggen</a>.</p>
<p class="attribution">Preview text from <a href="https://www.brandonsanderson.com/blogs/blog/warbreaker-rights-explanation"><em>Warbreaker</em></a> by Brandon Sanderson, used under <a href="https://creativecommons.org/licenses/by-nc-nd/3.0/us/" target="_blank" rel="noreferrer">Creative Commons</a>.</p>
</div>
</section>