+ Content Padding
+
+
+
+
diff --git a/vue/src/components/RssFeeds.vue b/vue/src/components/RssFeeds.vue
index 3c3234f..e887c1b 100644
--- a/vue/src/components/RssFeeds.vue
+++ b/vue/src/components/RssFeeds.vue
@@ -357,7 +357,8 @@ onMounted(async () => {
}
.article-feature__content {
- padding: 0 1rem;
+ padding: 0 var(--content-padding);
+ text-align: var(--content-text-align);
font-family: var(--content-font-family);
font-size: calc(clamp(1rem, 3.5vw, 1.25rem) * var(--content-font-size-scale));
line-height: 1.75;
diff --git a/vue/src/composables/useSettings.js b/vue/src/composables/useSettings.js
index 1dccc55..5b53884 100644
--- a/vue/src/composables/useSettings.js
+++ b/vue/src/composables/useSettings.js
@@ -19,10 +19,20 @@ const CONTENT_FONT_OPTIONS = [
const SIZE_STEPS = [0.85, 1, 1.2, 1.45]
const SIZE_LABELS = ['S', 'M', 'L', 'XL']
+const TEXT_ALIGN_OPTIONS = [
+ { key: 'left', label: 'Left' },
+ { key: 'justify', label: 'Justified' },
+]
+
+const PADDING_STEPS = [1, 0.5, 0.15]
+const PADDING_LABELS = ['Default', 'Compact', 'Minimal']
+
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')
+const textAlignKey = ref(localStorage.getItem('s-text-align') ?? 'left')
+const contentPadding = ref(parseFloat(localStorage.getItem('s-content-padding') ?? '1'))
function fontValue(options, key) {
return (options.find(o => o.key === key) ?? options[0]).value
@@ -34,6 +44,8 @@ function applySettings() {
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))
+ s.setProperty('--content-text-align', textAlignKey.value)
+ s.setProperty('--content-padding', contentPadding.value + 'rem')
}
function setHeadlineSize(scale) {
@@ -60,6 +72,18 @@ function setContentFont(key) {
applySettings()
}
+function setTextAlign(key) {
+ textAlignKey.value = key
+ localStorage.setItem('s-text-align', key)
+ applySettings()
+}
+
+function setContentPadding(step) {
+ contentPadding.value = step
+ localStorage.setItem('s-content-padding', step)
+ applySettings()
+}
+
export function useSettings() {
return {
headlineSizeScale,
@@ -70,10 +94,17 @@ export function useSettings() {
SIZE_LABELS,
HEADLINE_FONT_OPTIONS,
CONTENT_FONT_OPTIONS,
+ TEXT_ALIGN_OPTIONS,
+ PADDING_STEPS,
+ PADDING_LABELS,
applySettings,
setHeadlineSize,
setContentSize,
setHeadlineFont,
setContentFont,
+ setTextAlign,
+ setContentPadding,
+ textAlignKey,
+ contentPadding,
}
}