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

More tweaks, Kobo like appearance

Browse Source
This commit is contained in:
Nico Verbruggen
2026-03-02 17:00:08 +01:00
parent a6a4e80809
commit ae5818dd62
1 changed files with 106 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
index.php
View File

@@ -62,6 +62,8 @@ if ($fontFilesJson === false) {
--shadow: 0 18px 40px rgba(29, 18, 10, 0.12); --shadow: 0 18px 40px rgba(29, 18, 10, 0.12);
--screen-width: 632px; --screen-width: 632px;
--screen-height: 840px; --screen-height: 840px;
--screen-bg: #f4efe6;
--screen-bg-dark: #1d1a17;
} }
* { * {
@@ -106,7 +108,7 @@ if ($fontFilesJson === false) {
display: grid; display: grid;
grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
gap: 28px; gap: 28px;
align-items: start; align-items: center;
} }
.panel { .panel {
@@ -153,6 +155,7 @@ if ($fontFilesJson === false) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
align-self: center;
} }
.sidebar-controls { .sidebar-controls {
@@ -270,6 +273,16 @@ if ($fontFilesJson === false) {
font-size: 0.95rem; font-size: 0.95rem;
} }
.device-footer a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
.device-footer a:hover {
color: var(--cta-hover);
}
.sidebar-actions { .sidebar-actions {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -317,6 +330,13 @@ if ($fontFilesJson === false) {
padding: 0; padding: 0;
} }
@media (min-width: 1051px) {
.preview {
min-height: calc(100vh - 68px);
justify-content: center;
}
}
.reader { .reader {
align-self: center; align-self: center;
width: min(100%, calc(var(--screen-width) + 56px)); width: min(100%, calc(var(--screen-width) + 56px));
@@ -336,7 +356,7 @@ if ($fontFilesJson === false) {
} }
.reader-screen { .reader-screen {
background: #f4efe6; background: var(--screen-bg);
border-radius: 0; border-radius: 0;
padding: 22px; padding: 22px;
width: 100%; width: 100%;
@@ -350,7 +370,7 @@ if ($fontFilesJson === false) {
} }
.reader.is-dark .reader-screen { .reader.is-dark .reader-screen {
background: #1d1a17; background: var(--screen-bg-dark);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
} }
@@ -369,15 +389,28 @@ if ($fontFilesJson === false) {
.reader-toolbar { .reader-toolbar {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center; align-items: center;
font-size: 0.85rem; font-size: 0.85rem;
color: #6b6158; color: #6b6158;
text-transform: uppercase;
letter-spacing: 0.12em;
} }
.reader-title { .reader-meta {
font-weight: 600; font-weight: 600;
letter-spacing: 0.03em; letter-spacing: 0.03em;
display: flex;
align-items: center;
gap: 10px;
}
.reader-dot {
width: 4px;
height: 4px;
border-radius: 999px;
background: currentColor;
opacity: 0.7;
} }
.sample { .sample {
@@ -389,10 +422,27 @@ if ($fontFilesJson === false) {
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
overflow-wrap: anywhere; overflow-wrap: anywhere;
position: relative;
}
.sample::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 56px;
background: linear-gradient(to bottom, rgba(244, 239, 230, 0), rgba(244, 239, 230, 1));
pointer-events: none;
}
.reader.is-dark .sample::after {
background: linear-gradient(to bottom, rgba(29, 26, 23, 0), rgba(29, 26, 23, 1));
} }
.chapter-title { .chapter-title {
margin: 0 0 0.6em; margin: 0 0 2em;
padding-top: 0.5em;
text-align: center; text-align: center;
font-size: 1.4em; font-size: 1.4em;
letter-spacing: 0.1em; letter-spacing: 0.1em;
@@ -411,12 +461,14 @@ if ($fontFilesJson === false) {
.reader-footer { .reader-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center; align-items: center;
font-size: 0.8rem; font-size: 0.8rem;
color: #8a7f74; color: #8a7f74;
padding-top: 4px; padding-top: 4px;
margin-top: auto; margin-top: auto;
text-transform: uppercase;
letter-spacing: 0.12em;
} }
.font-list { .font-list {
@@ -509,9 +561,13 @@ if ($fontFilesJson === false) {
} }
.font-card { .font-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
border-radius: 14px; border-radius: 14px;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 10px; padding: 4px 8px;
background: #fff; background: #fff;
cursor: pointer; cursor: pointer;
} }
@@ -522,13 +578,23 @@ if ($fontFilesJson === false) {
.font-card.is-active { .font-card.is-active {
border-color: var(--accent); border-color: var(--accent);
background: var(--accent);
color: #fff;
box-shadow: inset 0 0 0 1px var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
} }
.font-card p { .font-card p {
margin: 0; margin: 0;
font-size: 1.02rem; font-size: 1.02rem;
line-height: 1.25; line-height: 1;
}
.font-card.is-ninepoint p {
transform: translateY(1px);
}
.font-card.is-charis p {
transform: translateY(-1px);
} }
@media (max-width: 1050px) { @media (max-width: 1050px) {
@@ -539,6 +605,7 @@ if ($fontFilesJson === false) {
.layout { .layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;
align-items: start;
} }
.reader { .reader {
@@ -666,17 +733,23 @@ if ($fontFilesJson === false) {
<div class="reader"> <div class="reader">
<div class="reader-screen"> <div class="reader-screen">
<div class="reader-toolbar"> <div class="reader-toolbar">
<span class="reader-title">Pride and Prejudice</span> <span class="reader-meta">
<span id="readerClock">9:00</span> <span id="readerChapter">Chapter 1</span>
<span class="reader-dot" aria-hidden="true"></span>
<span id="readerChapterProgress">1 OF 17</span>
</span>
</div> </div>
<div class="sample" id="sampleArea"></div> <div class="sample" id="sampleArea"></div>
<div class="reader-footer"> <div class="reader-footer">
<span id="readerPage">Page 1</span> <span class="reader-meta">
<span id="readerProgress">1%</span> <span id="readerBook">Pride and Prejudice</span>
<span class="reader-dot" aria-hidden="true"></span>
<span id="readerBookProgress">1 OF 256</span>
</span>
</div> </div>
</div> </div>
</div> </div>
<div class="device-footer">This curated collection of fonts is available on GitHub.</div> <div class="device-footer">Made with &hearts; for digital reading by <a href="https://nicoverbruggen.be" target="_blank" rel="noreferrer">Nico Verbruggen</a>.</div>
</section> </section>
</div> </div>
</div> </div>
@@ -692,9 +765,10 @@ if ($fontFilesJson === false) {
const darkModeToggle = document.getElementById("darkModeToggle"); const darkModeToggle = document.getElementById("darkModeToggle");
const bezelToggle = document.getElementById("bezelToggle"); const bezelToggle = document.getElementById("bezelToggle");
const reader = document.querySelector(".reader"); const reader = document.querySelector(".reader");
const readerClock = document.getElementById("readerClock"); const readerChapter = document.getElementById("readerChapter");
const readerPage = document.getElementById("readerPage"); const readerChapterProgress = document.getElementById("readerChapterProgress");
const readerProgress = document.getElementById("readerProgress"); const readerBook = document.getElementById("readerBook");
const readerBookProgress = document.getElementById("readerBookProgress");
const fonts = new Map(); const fonts = new Map();
const sampleText = `Chapter 1 const sampleText = `Chapter 1
@@ -816,6 +890,12 @@ This was invitation enough.
const card = document.createElement("button"); const card = document.createElement("button");
card.type = "button"; card.type = "button";
card.className = "font-card"; card.className = "font-card";
if (font.family === "NV NinePoint") {
card.classList.add("is-ninepoint");
}
if (font.family === "NV Charis") {
card.classList.add("is-charis");
}
card.style.fontFamily = `"${font.family}", serif`; card.style.fontFamily = `"${font.family}", serif`;
card.innerHTML = `<p>${font.family}</p>`; card.innerHTML = `<p>${font.family}</p>`;
card.addEventListener("click", () => { card.addEventListener("click", () => {
@@ -878,13 +958,11 @@ This was invitation enough.
sampleArea.innerHTML = rendered; sampleArea.innerHTML = rendered;
const now = new Date();
readerClock.textContent = now.toLocaleTimeString([], { readerChapter.textContent = "Chapter 1";
hour: "2-digit", readerChapterProgress.textContent = "1 OF 17";
minute: "2-digit" readerBook.textContent = "Pride and Prejudice";
}); readerBookProgress.textContent = "1 OF 256";
readerPage.textContent = "Page 1";
readerProgress.textContent = "1%";
} }
function setupInteractions() { function setupInteractions() {
@@ -898,6 +976,7 @@ This was invitation enough.
bezelToggle.addEventListener("change", (event) => { bezelToggle.addEventListener("change", (event) => {
reader.classList.toggle("is-bezel-dark", event.target.checked); reader.classList.toggle("is-bezel-dark", event.target.checked);
}); });
window.addEventListener("resize", renderPreview);
} }
function syncToggles() { function syncToggles() {
@@ -909,6 +988,9 @@ This was invitation enough.
buildFontFaces(); buildFontFaces();
updateFontList(""); updateFontList("");
setupInteractions(); setupInteractions();
if (window.matchMedia("(min-width: 1051px)").matches) {
sizeRange.value = "22";
}
syncToggles(); syncToggles();
if (extraFonts) { if (extraFonts) {
extraFonts.open = window.matchMedia("(max-width: 1050px)").matches; extraFonts.open = window.matchMedia("(max-width: 1050px)").matches;
@@ -917,13 +999,6 @@ This was invitation enough.
if (fontSelect.value !== activeFamily) { if (fontSelect.value !== activeFamily) {
fontSelect.value = activeFamily; fontSelect.value = activeFamily;
} }
setInterval(() => {
const now = new Date();
readerClock.textContent = now.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit"
});
}, 60000);
</script> </script>
</body> </body>
</html> </html>