new textadjustment options

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);

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

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()
 </script>
 
@@ -78,6 +85,34 @@ const {
         >{{ opt.label }}</option>
       </select>
     </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Text Alignment</h2>
+      <div class="settings__strip">
+        <button
+          v-for="opt in TEXT_ALIGN_OPTIONS"
+          :key="opt.key"
+          class="settings__btn"
+          :class="{ 'settings__btn--active': textAlignKey === opt.key }"
+          type="button"
+          @click="setTextAlign(opt.key)"
+        >{{ opt.label }}</button>
+      </div>
+    </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Content Padding</h2>
+      <div class="settings__strip">
+        <button
+          v-for="(step, i) in PADDING_STEPS"
+          :key="step"
+          class="settings__btn"
+          :class="{ 'settings__btn--active': contentPadding === step }"
+          type="button"
+          @click="setContentPadding(step)"
+        >{{ PADDING_LABELS[i] }}</button>
+      </div>
+    </section>
   </div>
 </template>
 

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;

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