New feauter, change font family and font size

2026-06-19 13:42:57 +02:00
parent 5417176dd4
commit a90d10368e
10 changed files with 264 additions and 11 deletions
@@ -0,0 +1,79 @@
+import { ref } from 'vue'
+
+const HEADLINE_FONT_OPTIONS = [
+  { key: 'default',  label: 'Default (Glook)',      value: "Glook, 'Courier New'" },
+  { key: 'playfair', label: 'Playfair Display',     value: "'Playfair Display', Georgia, serif" },
+  { key: 'lora',     label: 'Lora',                 value: "Lora, Georgia, serif" },
+  { key: 'raleway',  label: 'Raleway',              value: "Raleway, -apple-system, sans-serif" },
+  { key: 'inter',    label: 'Inter',                value: "Inter, -apple-system, sans-serif" },
+]
+
+const CONTENT_FONT_OPTIONS = [
+  { key: 'default',      label: 'Default (Merriweather)', value: "Merriweather, Georgia, 'Times New Roman', Times, serif" },
+  { key: 'lora',         label: 'Lora',                   value: "Lora, Georgia, serif" },
+  { key: 'source-serif', label: 'Source Serif 4',         value: "'Source Serif 4', Georgia, serif" },
+  { key: 'inter',        label: 'Inter',                  value: "Inter, -apple-system, sans-serif" },
+  { key: 'playfair',     label: 'Playfair Display',       value: "'Playfair Display', Georgia, serif" },
+]
+
+const SIZE_STEPS = [0.85, 1, 1.2, 1.45]
+const SIZE_LABELS = ['S', 'M', 'L', 'XL']
+
+const headlineSizeScale = ref(parseFloat(localStorage.getItem('s-headline-size') ?? '1'))
+const contentSizeScale  = ref(parseFloat(localStorage.getItem('s-content-size')  ?? '1'))
+const headlineFontKey   = ref(localStorage.getItem('s-headline-font') ?? 'default')
+const contentFontKey    = ref(localStorage.getItem('s-content-font')  ?? 'default')
+
+function fontValue(options, key) {
+  return (options.find(o => o.key === key) ?? options[0]).value
+}
+
+function applySettings() {
+  const s = document.documentElement.style
+  s.setProperty('--headline-font-size-scale', headlineSizeScale.value)
+  s.setProperty('--content-font-size-scale',  contentSizeScale.value)
+  s.setProperty('--headline-font-family',     fontValue(HEADLINE_FONT_OPTIONS, headlineFontKey.value))
+  s.setProperty('--content-font-family',      fontValue(CONTENT_FONT_OPTIONS,  contentFontKey.value))
+}
+
+function setHeadlineSize(scale) {
+  headlineSizeScale.value = scale
+  localStorage.setItem('s-headline-size', scale)
+  applySettings()
+}
+
+function setContentSize(scale) {
+  contentSizeScale.value = scale
+  localStorage.setItem('s-content-size', scale)
+  applySettings()
+}
+
+function setHeadlineFont(key) {
+  headlineFontKey.value = key
+  localStorage.setItem('s-headline-font', key)
+  applySettings()
+}
+
+function setContentFont(key) {
+  contentFontKey.value = key
+  localStorage.setItem('s-content-font', key)
+  applySettings()
+}
+
+export function useSettings() {
+  return {
+    headlineSizeScale,
+    contentSizeScale,
+    headlineFontKey,
+    contentFontKey,
+    SIZE_STEPS,
+    SIZE_LABELS,
+    HEADLINE_FONT_OPTIONS,
+    CONTENT_FONT_OPTIONS,
+    applySettings,
+    setHeadlineSize,
+    setContentSize,
+    setHeadlineFont,
+    setContentFont,
+  }
+}