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,158 @@
+<script setup>
+import { useSettings } from '../composables/useSettings.js'
+
+const {
+  headlineSizeScale,
+  contentSizeScale,
+  headlineFontKey,
+  contentFontKey,
+  SIZE_STEPS,
+  SIZE_LABELS,
+  HEADLINE_FONT_OPTIONS,
+  CONTENT_FONT_OPTIONS,
+  setHeadlineSize,
+  setContentSize,
+  setHeadlineFont,
+  setContentFont,
+} = useSettings()
+</script>
+
+<template>
+  <div class="settings">
+    <h1 class="settings__heading">Typography</h1>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Headline Size</h2>
+      <div class="settings__strip">
+        <button
+          v-for="(step, i) in SIZE_STEPS"
+          :key="step"
+          class="settings__btn"
+          :class="{ 'settings__btn--active': headlineSizeScale === step }"
+          type="button"
+          @click="setHeadlineSize(step)"
+        >{{ SIZE_LABELS[i] }}</button>
+      </div>
+    </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Article Text Size</h2>
+      <div class="settings__strip">
+        <button
+          v-for="(step, i) in SIZE_STEPS"
+          :key="step"
+          class="settings__btn"
+          :class="{ 'settings__btn--active': contentSizeScale === step }"
+          type="button"
+          @click="setContentSize(step)"
+        >{{ SIZE_LABELS[i] }}</button>
+      </div>
+    </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Headline Font</h2>
+      <select
+        class="settings__select"
+        :value="headlineFontKey"
+        @change="setHeadlineFont($event.target.value)"
+      >
+        <option
+          v-for="opt in HEADLINE_FONT_OPTIONS"
+          :key="opt.key"
+          :value="opt.key"
+        >{{ opt.label }}</option>
+      </select>
+    </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Article Text Font</h2>
+      <select
+        class="settings__select"
+        :value="contentFontKey"
+        @change="setContentFont($event.target.value)"
+      >
+        <option
+          v-for="opt in CONTENT_FONT_OPTIONS"
+          :key="opt.key"
+          :value="opt.key"
+        >{{ opt.label }}</option>
+      </select>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.settings {
+  padding: 1.5rem 1rem 0.5rem;
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.settings__heading {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 1.25rem;
+}
+
+.settings__section {
+  margin-bottom: 1.25rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-background-soft);
+}
+
+.settings__section-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.6;
+  margin-bottom: 0.6rem;
+}
+
+.settings__strip {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.settings__btn {
+  min-height: 36px;
+  padding: 0.3rem 0.9rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.settings__btn:hover {
+  border-color: var(--color-border-hover);
+}
+
+.settings__btn--active {
+  border-color: var(--color-accent);
+  background: var(--color-accent-hover);
+  color: var(--color-text);
+}
+
+.settings__select {
+  width: 100%;
+  min-height: 36px;
+  padding: 0.3rem 0.6rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font: inherit;
+  cursor: pointer;
+  appearance: auto;
+}
+
+.settings__select:hover {
+  border-color: var(--color-border-hover);
+}
+</style>