diff --git a/app.js b/app.js index f6e2129..b9c14b5 100644 --- a/app.js +++ b/app.js @@ -176,6 +176,7 @@ const DEFAULT_SETTINGS = { birthDate: "", tarotDeck: DEFAULT_TAROT_DECK, stellariumBackgroundEnabled: false, + detailTextScale: 1, hasExplicitLocation: false }; @@ -642,6 +643,11 @@ settingsUi.init?.({ onSettingsApplied: (settings) => { appRuntime.applySettings?.(settings); currentSettings = settings; + const detailTextScale = Number(settings?.detailTextScale); + document.documentElement.style.setProperty( + "--detail-text-scale", + Number.isFinite(detailTextScale) && detailTextScale > 0 ? String(detailTextScale) : "1" + ); }, onSyncSkyBackground: (geo, options) => homeUi.syncNowSkyBackground?.(geo, options), onStatus: (text) => setStatus(text), diff --git a/app/styles.css b/app/styles.css index 311147f..c0aa8f4 100644 --- a/app/styles.css +++ b/app/styles.css @@ -3,6 +3,7 @@ --font-script-display: "Noto Sans Hebrew", "Noto Serif", "Noto Sans Phoenician", "Segoe UI Symbol", serif; --font-script-arabic: "Amiri", "Noto Naskh Arabic", "Scheherazade New", "Arabic Typesetting", "Arial Unicode MS", serif; --font-script-enochian: "Enochian", "Petrus Enochian", "Segoe UI Historic", "Segoe UI Symbol", serif; + --detail-text-scale: 1; } body { @@ -829,6 +830,7 @@ grid-template-rows: auto auto auto; gap: 16px; background: #18181b; + font-size: calc(13px * var(--detail-text-scale)); } .tarot-detail-top { display: grid; @@ -855,11 +857,11 @@ .tarot-detail-type { margin-top: 4px; color: #a1a1aa; - font-size: 13px; + font-size: calc(13px * var(--detail-text-scale)); } .tarot-detail-summary { margin-top: 10px; - font-size: 14px; + font-size: calc(14px * var(--detail-text-scale)); line-height: 1.45; color: #e4e4e7; } @@ -876,14 +878,14 @@ } .tarot-meaning-card strong { display: block; - font-size: 12px; + font-size: calc(12px * var(--detail-text-scale)); text-transform: uppercase; letter-spacing: 0.04em; color: #a1a1aa; margin-bottom: 6px; } .tarot-meaning-card div { - font-size: 14px; + font-size: calc(14px * var(--detail-text-scale)); line-height: 1.45; color: #e4e4e7; } @@ -3296,6 +3298,7 @@ grid-template-rows: auto auto; gap: 16px; background: #18181b; + font-size: calc(13px * var(--detail-text-scale)); } .planet-detail-heading { position: relative; @@ -3309,11 +3312,11 @@ .planet-detail-type { margin-top: 4px; color: #a1a1aa; - font-size: 13px; + font-size: calc(13px * var(--detail-text-scale)); } .planet-detail-summary { margin-top: 10px; - font-size: 14px; + font-size: calc(14px * var(--detail-text-scale)); line-height: 1.45; color: #e4e4e7; } @@ -4405,6 +4408,7 @@ display: flex; flex-direction: column; gap: 16px; + font-size: calc(13px * var(--detail-text-scale)); } #kab-detail-body { @@ -4480,7 +4484,7 @@ background: #27272a; border: 1px solid #3f3f46; color: #c4c4d4; - font-size: 14px; + font-size: calc(14px * var(--detail-text-scale)); cursor: pointer; transition: background 0.1s; line-height: 1; @@ -4497,7 +4501,7 @@ color: #ef4444; } .kab-chip-sub { - font-size: 10px; + font-size: calc(10px * var(--detail-text-scale)); color: #71717a; } @@ -4514,7 +4518,7 @@ border: 1px solid #4a4a6a; background: #1e1e30; color: #c8b8f8; - font-size: 13px; + font-size: calc(13px * var(--detail-text-scale)); cursor: pointer; text-align: left; transition: background 0.1s, border-color 0.1s; @@ -4534,7 +4538,7 @@ .kab-god-meta { margin-top: 6px; color: #a1a1aa; - font-size: 12px; + font-size: calc(12px * var(--detail-text-scale)); } .kab-god-links { margin-top: 7px; @@ -4548,7 +4552,7 @@ border: 1px solid #4a4a6a; background: #1e1e30; color: #c8b8f8; - font-size: 12px; + font-size: calc(12px * var(--detail-text-scale)); cursor: pointer; transition: background 0.1s, border-color 0.1s; } @@ -4607,6 +4611,7 @@ box-sizing: border-box; display: grid; align-items: start; + font-size: calc(13px * var(--detail-text-scale)); } .alpha-special-top { @@ -4921,7 +4926,7 @@ gap: 8px; } .alpha-list-glyph { - font-size: 22px; + font-size: calc(22px * var(--detail-text-scale)); min-width: 34px; text-align: center; font-family: var(--font-script-display); @@ -4930,11 +4935,11 @@ } .alpha-list-glyph--arabic { font-family: var(--font-script-arabic); - font-size: 26px; + font-size: calc(26px * var(--detail-text-scale)); } .alpha-list-glyph--enochian { font-family: var(--font-script-enochian); - font-size: 24px; + font-size: calc(24px * var(--detail-text-scale)); } .alpha-enochian-glyph-img { display: inline-block; @@ -4971,14 +4976,14 @@ white-space: nowrap; } .alpha-list-sub { - font-size: 11px; + font-size: calc(11px * var(--detail-text-scale)); color: #71717a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alpha-detail-glyph { - font-size: 64px !important; + font-size: calc(64px * var(--detail-text-scale)) !important; font-family: var(--font-script-display); color: #e0d0ff; line-height: 1; @@ -4994,7 +4999,7 @@ display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; - font-size: 13px; + font-size: calc(13px * var(--detail-text-scale)); color: #d4d4d8; margin: 0; } @@ -5550,21 +5555,21 @@ background: #18181b; border: 1px solid #3f3f46; border-radius: 8px; - font-size: 11px; + font-size: calc(11px * var(--detail-text-scale)); color: #71717a; min-width: 56px; text-align: center; } .alpha-arabic-glyph { font-family: var(--font-script-arabic); - font-size: 28px; + font-size: calc(28px * var(--detail-text-scale)); color: #e0d0ff; line-height: 1.2; direction: rtl; } .alpha-arabic-inline { font-family: var(--font-script-arabic); - font-size: 16px; + font-size: calc(16px * var(--detail-text-scale)); direction: rtl; } .alpha-nav-btns { @@ -5647,7 +5652,7 @@ margin: 0 4px; } .alpha-sister-name { - font-size: 12px; + font-size: calc(12px * var(--detail-text-scale)); color: #a1a1aa; } @@ -5656,6 +5661,7 @@ background: #18181b; box-sizing: border-box; overflow: hidden; + font-size: calc(13px * var(--detail-text-scale)); } #alphabet-text-section[hidden] { @@ -5838,7 +5844,7 @@ } .alpha-text-source-meta { - font-size: 12px; + font-size: calc(12px * var(--detail-text-scale)); line-height: 1.4; color: #a1a1aa; } @@ -5847,6 +5853,7 @@ display: grid; gap: 12px; min-width: 0; + font-size: calc(13px * var(--detail-text-scale)); } .planet-layout.alpha-text-global-search-only.layout-sidebar-collapsed { @@ -5994,7 +6001,7 @@ .alpha-text-search-summary { margin: 0 0 10px; color: #a1a1aa; - font-size: 12px; + font-size: calc(12px * var(--detail-text-scale)); line-height: 1.5; } @@ -6038,14 +6045,14 @@ .alpha-text-search-reference { color: #eef2ff; - font-size: 13px; + font-size: calc(13px * var(--detail-text-scale)); font-weight: 700; letter-spacing: 0.01em; } .alpha-text-search-location { color: #a5b4fc; - font-size: 11px; + font-size: calc(11px * var(--detail-text-scale)); text-transform: uppercase; letter-spacing: 0.06em; } @@ -6053,7 +6060,7 @@ .alpha-text-search-preview { margin: 0; color: #e4e4e7; - font-size: 14px; + font-size: calc(14px * var(--detail-text-scale)); line-height: 1.6; } @@ -6104,14 +6111,14 @@ .alpha-text-verse-reference { color: #c4b5fd; - font-size: 12px; + font-size: calc(12px * var(--detail-text-scale)); font-weight: 700; letter-spacing: 0.03em; } .alpha-text-verse-counts { color: #a1a1aa; - font-size: 11px; + font-size: calc(11px * var(--detail-text-scale)); letter-spacing: 0.03em; text-transform: uppercase; } @@ -6119,7 +6126,7 @@ .alpha-text-verse-text { margin: 0; color: #e4e4e7; - font-size: 15px; + font-size: calc(15px * var(--detail-text-scale)); line-height: 1.65; } @@ -6163,21 +6170,21 @@ .alpha-text-token-gloss { color: #f4f4f5; - font-size: 12px; + font-size: calc(12px * var(--detail-text-scale)); font-weight: 600; line-height: 1.3; } .alpha-text-token-original { color: #c4b5fd; - font-size: 15px; + font-size: calc(15px * var(--detail-text-scale)); font-family: var(--font-script-display); line-height: 1.25; } .alpha-text-token-strongs { color: #a1a1aa; - font-size: 10px; + font-size: calc(10px * var(--detail-text-scale)); letter-spacing: 0.05em; text-transform: uppercase; } @@ -7413,7 +7420,7 @@ .settings-field-full { grid-column: 1 / -1; } - .settings-field input, + .settings-field input:not([type="range"]), .settings-field select { width: 100%; padding: 7px 8px; @@ -7447,6 +7454,27 @@ .settings-toggle-row:has(input:disabled) { opacity: 0.6; } + .settings-range-field { + gap: 8px; + } + .settings-range-row { + display: flex; + align-items: center; + gap: 12px; + } + .settings-range-input { + flex: 1 1 auto; + min-width: 0; + margin: 0; + accent-color: #818cf8; + } + .settings-range-value { + min-width: 52px; + text-align: right; + font-size: 13px; + color: #e0e7ff; + font-variant-numeric: tabular-nums; + } .settings-field-hint { color: #a1a1aa; font-size: 12px; diff --git a/app/ui-settings.js b/app/ui-settings.js index 5462373..90b9092 100644 --- a/app/ui-settings.js +++ b/app/ui-settings.js @@ -12,6 +12,7 @@ birthDate: "", tarotDeck: "ceremonial-magick", stellariumBackgroundEnabled: false, + detailTextScale: 1, hasExplicitLocation: false }, onSettingsApplied: null, @@ -40,6 +41,8 @@ tarotDeckCacheProgressEl: document.getElementById("tarot-deck-cache-progress"), tarotDeckCacheProgressLabelEl: document.getElementById("tarot-deck-cache-progress-label"), tarotDeckCacheStatusEl: document.getElementById("tarot-deck-cache-status"), + detailTextScaleEl: document.getElementById("detail-text-scale"), + detailTextScaleValueEl: document.getElementById("detail-text-scale-value"), stellariumBackgroundEl: document.getElementById("stellarium-background"), stellariumBackgroundHintEl: document.getElementById("stellarium-background-hint"), apiBaseUrlEl: document.getElementById("api-base-url"), @@ -376,6 +379,15 @@ } } + function syncDetailTextScaleLabel(detailTextScale) { + const { detailTextScaleValueEl } = getElements(); + if (!detailTextScaleValueEl) { + return; + } + + detailTextScaleValueEl.textContent = `${Math.round(normalizeDetailTextScale(detailTextScale) * 100)}%`; + } + function syncSky(geo, options) { if (typeof config.onSyncSkyBackground === "function") { config.onSyncSkyBackground(geo, options); @@ -394,6 +406,19 @@ return "minutes"; } + function clampNumber(value, min, max, fallback) { + const parsed = Number(value); + if (!Number.isFinite(parsed)) { + return fallback; + } + + return Math.min(max, Math.max(min, parsed)); + } + + function normalizeDetailTextScale(value) { + return clampNumber(value, 0.85, 1.35, 1); + } + function normalizeBirthDate(value) { const normalized = String(value || "").trim(); if (!normalized) { @@ -493,6 +518,7 @@ timeFormat: normalizeTimeFormat(settings?.timeFormat), birthDate: normalizeBirthDate(settings?.birthDate), tarotDeck: normalizeTarotDeck(settings?.tarotDeck), + detailTextScale: normalizeDetailTextScale(settings?.detailTextScale), stellariumBackgroundEnabled: parseStoredBoolean(settings?.stellariumBackgroundEnabled, false) && hasExplicitLocation, hasExplicitLocation }; @@ -649,7 +675,7 @@ } function applySettingsToInputs(settings) { - const { latEl, lngEl, timeFormatEl, birthDateEl, tarotDeckEl, stellariumBackgroundEl } = getElements(); + const { latEl, lngEl, timeFormatEl, birthDateEl, tarotDeckEl, detailTextScaleEl, stellariumBackgroundEl } = getElements(); syncTarotDeckInputOptions(); syncConnectionInputs(); const normalized = normalizeSettings(settings); @@ -657,6 +683,10 @@ lngEl.value = String(normalized.longitude); timeFormatEl.value = normalized.timeFormat; birthDateEl.value = normalized.birthDate; + if (detailTextScaleEl) { + detailTextScaleEl.value = String(Math.round(normalized.detailTextScale * 100)); + } + syncDetailTextScaleLabel(normalized.detailTextScale); if (tarotDeckEl) { tarotDeckEl.value = normalized.tarotDeck; } @@ -671,7 +701,7 @@ } function getSettingsFromInputs() { - const { latEl, lngEl, timeFormatEl, birthDateEl, tarotDeckEl, stellariumBackgroundEl } = getElements(); + const { latEl, lngEl, timeFormatEl, birthDateEl, tarotDeckEl, detailTextScaleEl, stellariumBackgroundEl } = getElements(); const latitudeText = String(latEl?.value || "").trim(); const longitudeText = String(lngEl?.value || "").trim(); @@ -692,6 +722,7 @@ timeFormat: normalizeTimeFormat(timeFormatEl.value), birthDate: normalizeBirthDate(birthDateEl.value), tarotDeck: normalizeTarotDeck(tarotDeckEl?.value), + detailTextScale: normalizeDetailTextScale(Number(detailTextScaleEl?.value || 100) / 100), stellariumBackgroundEnabled: Boolean(stellariumBackgroundEl?.checked), hasExplicitLocation: hasExplicitLocationEntry() }); @@ -839,6 +870,7 @@ useLocationEl, openSettingsEl, closeSettingsEl, + detailTextScaleEl, latEl, lngEl } = getElements(); @@ -853,6 +885,12 @@ useLocationEl.addEventListener("click", requestGeoLocation); } + if (detailTextScaleEl) { + detailTextScaleEl.addEventListener("input", () => { + syncDetailTextScaleLabel(Number(detailTextScaleEl.value) / 100); + }); + } + [latEl, lngEl].forEach((inputEl) => { if (!inputEl) { return; diff --git a/index.html b/index.html index 182f8d3..810c51e 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ - +
@@ -166,6 +166,21 @@
+
+
+ Detail Text + Adjust the font size used by tarot detail panes and alphabet readers. +
+
+ +
+
API Connection @@ -1378,7 +1393,7 @@ - + @@ -1386,7 +1401,7 @@ - +