mirror of
https://github.com/nicoverbruggen/ebook-fonts-showcase.git
synced 2026-03-22 21:10:08 +01:00
Additional settings
This commit is contained in:
316
index.php
316
index.php
@@ -40,6 +40,12 @@ if ($fontFilesJson === false) {
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="description" content="Preview and compare curated eBook fonts in a device-style reading view." />
|
||||||
|
<meta name="theme-color" content="#f6e9de" />
|
||||||
|
<meta property="og:title" content="eBook Fonts Showcase" />
|
||||||
|
<meta property="og:description" content="Preview and compare curated eBook fonts in a device-style reading view." />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23a04c24'/%3E%3Ctext x='50%25' y='56%25' font-size='34' text-anchor='middle' fill='white' font-family='Georgia,serif'%3EAa%3C/text%3E%3C/svg%3E" />
|
||||||
<title>eBook Fonts Showcase</title>
|
<title>eBook Fonts Showcase</title>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
@@ -48,8 +54,8 @@ if ($fontFilesJson === false) {
|
|||||||
--muted: #5b5b5b;
|
--muted: #5b5b5b;
|
||||||
--accent: #a04c24;
|
--accent: #a04c24;
|
||||||
--accent-soft: #f2d2c2;
|
--accent-soft: #f2d2c2;
|
||||||
--cta: #1e6bd6;
|
--cta: #a04c24;
|
||||||
--cta-hover: #1757af;
|
--cta-hover: #7f3b1b;
|
||||||
--surface: #fffdf8;
|
--surface: #fffdf8;
|
||||||
--panel: #ffffff;
|
--panel: #ffffff;
|
||||||
--border: #e6ded6;
|
--border: #e6ded6;
|
||||||
@@ -112,12 +118,14 @@ if ($fontFilesJson === false) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 0.9rem;
|
font-size: 1rem;
|
||||||
color: var(--muted);
|
color: #3e3530;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 6px;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="range"] {
|
input[type="range"] {
|
||||||
@@ -125,9 +133,10 @@ if ($fontFilesJson === false) {
|
|||||||
font: inherit;
|
font: inherit;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
padding: 10px 12px;
|
padding: 6px 10px;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
|
accent-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
@@ -149,7 +158,7 @@ if ($fontFilesJson === false) {
|
|||||||
.sidebar-controls {
|
.sidebar-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 14px;
|
gap: 10px;
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
}
|
}
|
||||||
@@ -158,6 +167,91 @@ if ($fontFilesJson === false) {
|
|||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-controls .control-group {
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
padding-top: 14px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-actions-group {
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
padding-top: 20px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-label {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-track {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 6px;
|
||||||
|
width: 170px;
|
||||||
|
padding: 9px 6px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-option {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-thumb {
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
bottom: 6px;
|
||||||
|
left: 6px;
|
||||||
|
width: calc(50% - 8px);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--accent);
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-input:not(:checked) + .toggle-track .toggle-option--left {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-input:checked + .toggle-track .toggle-option--right {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-input:checked + .toggle-track .toggle-thumb {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
@@ -181,13 +275,14 @@ if ($fontFilesJson === false) {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
padding-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 8px 14px;
|
padding: 10px 18px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@@ -196,6 +291,12 @@ if ($fontFilesJson === false) {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--primary {
|
.button--primary {
|
||||||
@@ -219,12 +320,19 @@ if ($fontFilesJson === false) {
|
|||||||
.reader {
|
.reader {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
width: min(100%, calc(var(--screen-width) + 56px));
|
width: min(100%, calc(var(--screen-width) + 56px));
|
||||||
background: #0f0f0f;
|
background: #ffffff;
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
padding: 36px 30px 54px;
|
padding: 36px 30px 54px;
|
||||||
box-shadow: 0 22px 50px rgba(15, 10, 8, 0.28);
|
box-shadow: 0 22px 50px rgba(15, 10, 8, 0.28);
|
||||||
border: 2px solid #111;
|
border: 2px solid #e7e1da;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reader.is-bezel-dark {
|
||||||
|
background: #0f0f0f;
|
||||||
|
border-color: #111;
|
||||||
|
box-shadow: 0 22px 50px rgba(15, 10, 8, 0.32);
|
||||||
}
|
}
|
||||||
|
|
||||||
.reader-screen {
|
.reader-screen {
|
||||||
@@ -233,11 +341,30 @@ if ($fontFilesJson === false) {
|
|||||||
padding: 22px;
|
padding: 22px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 520px;
|
min-height: 520px;
|
||||||
height: var(--screen-height);
|
height: min(var(--screen-height), calc(100vh - 140px));
|
||||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 18px;
|
gap: 18px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reader.is-dark .reader-screen {
|
||||||
|
background: #1d1a17;
|
||||||
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reader.is-dark .reader-toolbar,
|
||||||
|
.reader.is-dark .reader-footer {
|
||||||
|
color: #b8ada3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reader.is-dark .sample {
|
||||||
|
color: #f3ede7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reader.is-dark .chapter-title {
|
||||||
|
color: #d2c4b6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reader-toolbar {
|
.reader-toolbar {
|
||||||
@@ -260,6 +387,8 @@ if ($fontFilesJson === false) {
|
|||||||
color: #1f1a16;
|
color: #1f1a16;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapter-title {
|
.chapter-title {
|
||||||
@@ -323,10 +452,60 @@ if ($fontFilesJson === false) {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
summary.quick-title {
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary.quick-title::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
details .quick-title::after {
|
||||||
|
content: "Show";
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
details .quick-title::before {
|
||||||
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 6px solid transparent;
|
||||||
|
border-bottom: 6px solid transparent;
|
||||||
|
border-left: 8px solid var(--muted);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] .quick-title::after {
|
||||||
|
content: "Hide";
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] .quick-title::before {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
.quick-group + .quick-group {
|
.quick-group + .quick-group {
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
padding-top: 18px;
|
padding-top: 14px;
|
||||||
margin-top: 12px;
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#extraFonts {
|
||||||
|
padding: 20px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-group > .font-list {
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-card {
|
.font-card {
|
||||||
@@ -348,27 +527,27 @@ if ($fontFilesJson === false) {
|
|||||||
|
|
||||||
.font-card p {
|
.font-card p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0.95rem;
|
font-size: 1.02rem;
|
||||||
}
|
line-height: 1.25;
|
||||||
|
|
||||||
@media (max-width: 1250px) {
|
|
||||||
:root {
|
|
||||||
--screen-width: 520px;
|
|
||||||
--screen-height: 692px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1050px) {
|
@media (max-width: 1050px) {
|
||||||
|
:root {
|
||||||
|
--screen-width: 480px;
|
||||||
|
--screen-height: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
.layout {
|
.layout {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reader {
|
.reader {
|
||||||
width: min(100%, 520px);
|
width: min(100%, 520px);
|
||||||
|
max-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reader-screen {
|
.reader-screen {
|
||||||
height: auto;
|
height: min(var(--screen-height), calc(100vh - 120px));
|
||||||
min-height: 420px;
|
min-height: 420px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -391,7 +570,7 @@ if ($fontFilesJson === false) {
|
|||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
:root {
|
:root {
|
||||||
--screen-width: 320px;
|
--screen-width: 320px;
|
||||||
--screen-height: 520px;
|
--screen-height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
@@ -402,12 +581,13 @@ if ($fontFilesJson === false) {
|
|||||||
width: min(100%, 360px);
|
width: min(100%, 360px);
|
||||||
padding: 20px 16px 28px;
|
padding: 20px 16px 28px;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
|
max-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reader-screen {
|
.reader-screen {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
min-height: 520px;
|
min-height: 500px;
|
||||||
height: 520px;
|
height: min(var(--screen-height), calc(100vh - 120px));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -426,10 +606,10 @@ if ($fontFilesJson === false) {
|
|||||||
<div class="quick-title">Core Collection</div>
|
<div class="quick-title">Core Collection</div>
|
||||||
<div class="font-list" id="fontListCore"></div>
|
<div class="font-list" id="fontListCore"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="quick-group">
|
<details class="quick-group" id="extraFonts">
|
||||||
<div class="quick-title">Extra Collection</div>
|
<summary class="quick-title">Extra Collection</summary>
|
||||||
<div class="font-list" id="fontListExtra"></div>
|
<div class="font-list" id="fontListExtra"></div>
|
||||||
</div>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-controls">
|
<div class="sidebar-controls">
|
||||||
@@ -437,10 +617,46 @@ if ($fontFilesJson === false) {
|
|||||||
<label for="sizeRange">Preview size</label>
|
<label for="sizeRange">Preview size</label>
|
||||||
<input id="sizeRange" type="range" min="14" max="42" value="20" />
|
<input id="sizeRange" type="range" min="14" max="42" value="20" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="control-group">
|
||||||
|
<div class="toggle-row">
|
||||||
|
<span class="toggle-label">Screen</span>
|
||||||
|
<div class="toggle-group">
|
||||||
|
<input id="darkModeToggle" class="toggle-input" type="checkbox" />
|
||||||
|
<label for="darkModeToggle" class="toggle-track" aria-label="Screen mode">
|
||||||
|
<span class="toggle-option toggle-option--left">Light</span>
|
||||||
|
<span class="toggle-option toggle-option--right">Dark</span>
|
||||||
|
<span class="toggle-thumb"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<div class="toggle-row">
|
||||||
|
<span class="toggle-label">Bezel</span>
|
||||||
|
<div class="toggle-group">
|
||||||
|
<input id="bezelToggle" class="toggle-input" type="checkbox" />
|
||||||
|
<label for="bezelToggle" class="toggle-track" aria-label="Bezel color">
|
||||||
|
<span class="toggle-option toggle-option--left">White</span>
|
||||||
|
<span class="toggle-option toggle-option--right">Black</span>
|
||||||
|
<span class="toggle-thumb"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-actions-group">
|
||||||
<div class="sidebar-actions">
|
<div class="sidebar-actions">
|
||||||
<a class="button button--primary" href="https://github.com/nicoverbruggen/ebook-fonts/releases" target="_blank" rel="noreferrer">Download</a>
|
<a class="button button--primary" href="https://github.com/nicoverbruggen/ebook-fonts/releases" target="_blank" rel="noreferrer">
|
||||||
<a class="button" href="https://github.com/nicoverbruggen/ebook-fonts" target="_blank" rel="noreferrer">GitHub</a>
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||||
|
<path fill="currentColor" d="M12 3a1 1 0 0 1 1 1v9.17l2.59-2.58a1 1 0 1 1 1.41 1.42l-4.3 4.29a1 1 0 0 1-1.4 0l-4.3-4.29a1 1 0 1 1 1.41-1.42L11 13.17V4a1 1 0 0 1 1-1zm-6 15a1 1 0 0 1 1 1v1h10v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1z" />
|
||||||
|
</svg>
|
||||||
|
Download
|
||||||
|
</a>
|
||||||
|
<a class="button" href="https://github.com/nicoverbruggen/ebook-fonts" target="_blank" rel="noreferrer">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||||
|
<path fill="currentColor" d="M12 2C6.48 2 2 6.58 2 12.24c0 4.52 2.87 8.35 6.84 9.71.5.1.68-.22.68-.48 0-.24-.01-.86-.01-1.69-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.49-1.11-1.49-.91-.63.07-.62.07-.62 1 .07 1.53 1.06 1.53 1.06.9 1.57 2.36 1.12 2.94.86.09-.67.35-1.12.63-1.38-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.32.1-2.75 0 0 .84-.27 2.75 1.05A9.3 9.3 0 0 1 12 7.07c.83 0 1.67.11 2.45.33 1.91-1.32 2.75-1.05 2.75-1.05.55 1.43.2 2.49.1 2.75.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.8-4.58 5.05.36.32.68.95.68 1.92 0 1.38-.01 2.5-.01 2.84 0 .26.18.59.69.48A10.24 10.24 0 0 0 22 12.24C22 6.58 17.52 2 12 2z" />
|
||||||
|
</svg>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -472,6 +688,10 @@ if ($fontFilesJson === false) {
|
|||||||
const fontSelect = document.getElementById("fontSelect");
|
const fontSelect = document.getElementById("fontSelect");
|
||||||
const fontListCore = document.getElementById("fontListCore");
|
const fontListCore = document.getElementById("fontListCore");
|
||||||
const fontListExtra = document.getElementById("fontListExtra");
|
const fontListExtra = document.getElementById("fontListExtra");
|
||||||
|
const extraFonts = document.getElementById("extraFonts");
|
||||||
|
const darkModeToggle = document.getElementById("darkModeToggle");
|
||||||
|
const bezelToggle = document.getElementById("bezelToggle");
|
||||||
|
const reader = document.querySelector(".reader");
|
||||||
const readerClock = document.getElementById("readerClock");
|
const readerClock = document.getElementById("readerClock");
|
||||||
const readerPage = document.getElementById("readerPage");
|
const readerPage = document.getElementById("readerPage");
|
||||||
const readerProgress = document.getElementById("readerProgress");
|
const readerProgress = document.getElementById("readerProgress");
|
||||||
@@ -568,9 +788,24 @@ This was invitation enough.
|
|||||||
fontListCore.innerHTML = "";
|
fontListCore.innerHTML = "";
|
||||||
fontListExtra.innerHTML = "";
|
fontListExtra.innerHTML = "";
|
||||||
fontSelect.innerHTML = "";
|
fontSelect.innerHTML = "";
|
||||||
|
const preferredOrder = [
|
||||||
|
"NV NinePoint",
|
||||||
|
"NV Charis",
|
||||||
|
"NV Garamond",
|
||||||
|
"NV Jost"
|
||||||
|
];
|
||||||
const items = [...fonts.values()]
|
const items = [...fonts.values()]
|
||||||
.filter((font) => font.family.toLowerCase().includes(filter.toLowerCase()))
|
.filter((font) => font.family.toLowerCase().includes(filter.toLowerCase()))
|
||||||
.sort((a, b) => a.family.localeCompare(b.family));
|
.sort((a, b) => {
|
||||||
|
const aIndex = preferredOrder.indexOf(a.family);
|
||||||
|
const bIndex = preferredOrder.indexOf(b.family);
|
||||||
|
if (aIndex !== -1 || bIndex !== -1) {
|
||||||
|
if (aIndex === -1) return 1;
|
||||||
|
if (bIndex === -1) return -1;
|
||||||
|
return aIndex - bIndex;
|
||||||
|
}
|
||||||
|
return a.family.localeCompare(b.family);
|
||||||
|
});
|
||||||
|
|
||||||
const coreGroup = document.createElement("optgroup");
|
const coreGroup = document.createElement("optgroup");
|
||||||
coreGroup.label = "Core Collection";
|
coreGroup.label = "Core Collection";
|
||||||
@@ -657,12 +892,27 @@ This was invitation enough.
|
|||||||
fontSelect.addEventListener("change", (event) => {
|
fontSelect.addEventListener("change", (event) => {
|
||||||
setActiveFont(event.target.value);
|
setActiveFont(event.target.value);
|
||||||
});
|
});
|
||||||
|
darkModeToggle.addEventListener("change", (event) => {
|
||||||
|
reader.classList.toggle("is-dark", event.target.checked);
|
||||||
|
});
|
||||||
|
bezelToggle.addEventListener("change", (event) => {
|
||||||
|
reader.classList.toggle("is-bezel-dark", event.target.checked);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let activeFamily = "NV Charis";
|
function syncToggles() {
|
||||||
|
darkModeToggle.checked = reader.classList.contains("is-dark");
|
||||||
|
bezelToggle.checked = reader.classList.contains("is-bezel-dark");
|
||||||
|
}
|
||||||
|
|
||||||
|
let activeFamily = "NV NinePoint";
|
||||||
buildFontFaces();
|
buildFontFaces();
|
||||||
updateFontList("");
|
updateFontList("");
|
||||||
setupInteractions();
|
setupInteractions();
|
||||||
|
syncToggles();
|
||||||
|
if (extraFonts) {
|
||||||
|
extraFonts.open = window.matchMedia("(max-width: 1050px)").matches;
|
||||||
|
}
|
||||||
setActiveFont(activeFamily);
|
setActiveFont(activeFamily);
|
||||||
if (fontSelect.value !== activeFamily) {
|
if (fontSelect.value !== activeFamily) {
|
||||||
fontSelect.value = activeFamily;
|
fontSelect.value = activeFamily;
|
||||||
|
|||||||
Reference in New Issue
Block a user