diff --git a/vue/src/assets/base.css b/vue/src/assets/base.css index f69a769..12fe2fd 100644 --- a/vue/src/assets/base.css +++ b/vue/src/assets/base.css @@ -27,6 +27,8 @@ --content-font-family: Merriweather, Georgia, 'Times New Roman', Times, serif; --headline-font-size-scale: 1; --content-font-size-scale: 1; + --content-text-align: left; + --content-padding: 1rem; --color-background: var(--vt-c-white); --color-background-soft: var(--vt-c-white-soft); diff --git a/vue/src/assets/main.css b/vue/src/assets/main.css index 7e7a708..a91a0c8 100644 --- a/vue/src/assets/main.css +++ b/vue/src/assets/main.css @@ -86,7 +86,8 @@ a, .feed-content { font-family: var(--content-font-family); font-size: calc(clamp(1rem, 3.5vw, 1.25rem) * var(--content-font-size-scale)); - padding: 0 1em 1em; + text-align: var(--content-text-align); + padding: 0 var(--content-padding) 1em; overflow-wrap: break-word; } diff --git a/vue/src/components/AdminSettings.vue b/vue/src/components/AdminSettings.vue index 6612d2a..e41b743 100644 --- a/vue/src/components/AdminSettings.vue +++ b/vue/src/components/AdminSettings.vue @@ -14,6 +14,13 @@ const { setContentSize, setHeadlineFont, setContentFont, + textAlignKey, + contentPadding, + TEXT_ALIGN_OPTIONS, + PADDING_STEPS, + PADDING_LABELS, + setTextAlign, + setContentPadding, } = useSettings() @@ -78,6 +85,34 @@ const { >{{ opt.label }} + +
+

Text Alignment

+
+ +
+
+ +
+

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, } }