Final style updates

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

assets/styles.css

@@ -2,10 +2,10 @@
   color-scheme: light;
   --ink: #171717;
   --muted: #5b5b5b;
-  --accent: #a04c24;
+  --accent: #6e351b;
   --accent-soft: #f2d2c2;
-  --cta: #a04c24;
+  --cta: #5b5b5b;
-  --cta-hover: #7f3b1b;
+  --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;
+  top: 3px;
-  bottom: 6px;
+  bottom: 3px;
-  left: 6px;
+  left: 3px;
-  width: calc(50% - 8px);
+  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;
+  font-size: 0.9rem;
-  color: #3e3530;
+  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) {

index.php

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