defaults values title

src/components/PagedJsWrapper.vue

@@ -73,8 +73,8 @@
         <div v-if="item.intro" class="intro" v-html="item.intro"></div>
         <div v-if="item.markers && item.markers.length" class="markers">
           <div v-for="(marker, idx) in item.markers" :key="idx" class="marker">
-            <h5 class="marker-title">
-              <img
+            <div class="marker-title">
+               <img
                 v-if="marker.icon"
                 :src="marker.icon"
                 class="marker-icon"
@@ -86,8 +86,10 @@
                 class="marker-icon"
                 alt=""
               />
+            <h5>
               {{ marker.title }}
             </h5>
+            </div>
             <img v-if="marker.cover" :src="marker.cover" class="marker-cover" alt="" />
             <template v-if="marker.blocks">
               <component

src/stores/stylesheet.js

@@ -5,7 +5,7 @@ import * as cssComments from '../utils/css-comments';
 import prettier from 'prettier/standalone';
 import parserPostcss from 'prettier/plugins/postcss';
 import { getCsrfToken } from '../utils/kirby-auth';
-import { PAGE_DEFAULTS, TEXT_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS } from '../utils/defaults';
+import { PAGE_DEFAULTS, TEXT_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS, PARAGRAPH_CLASS_DEFAULTS } from '../utils/defaults';
 
 export const useStylesheetStore = defineStore('stylesheet', () => {
   // Base state
@@ -209,6 +209,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
       background: 'background',
       color: 'color',
       fontFamily: 'font-family',
+      fontWeight: 'font-weight',
       textAlign: 'text-align',
       borderStyle: 'border-style',
       borderColor: 'border-color',
@@ -235,6 +236,24 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
       }
     }
 
+    // Paragraph class defaults (p.author, ...)
+    for (const [className, props] of Object.entries(PARAGRAPH_CLASS_DEFAULTS)) {
+      const selector = `p.${className}`;
+      for (const [key, cssProp] of Object.entries(unitPropsMap)) {
+        if (props[key]) set(selector, cssProp, props[key].value, props[key].unit);
+      }
+      for (const [key, cssProp] of Object.entries(stringPropsMap)) {
+        if (props[key]) set(selector, cssProp, props[key]);
+      }
+      for (const prop of spacingProps) {
+        if (props[prop]) {
+          for (const side of ['top', 'right', 'bottom', 'left']) {
+            if (props[prop][side]) set(selector, `${prop}-${side}`, props[prop][side].value, props[prop][side].unit);
+          }
+        }
+      }
+    }
+
     // Inline element defaults (em, i, strong, b, a)
     for (const [tag, props] of Object.entries(INLINE_DEFAULTS)) {
       if (props.fontStyle) set(tag, 'font-style', props.fontStyle);

src/utils/defaults.js

@@ -44,8 +44,53 @@ export const ELEMENT_DEFAULTS = Object.freeze({
 });
 
 export const HEADING_DEFAULTS = Object.freeze({
+  h5: Object.freeze({
+    fontSize: Object.freeze({ value: 16, unit: 'px' }),
+    fontWeight: 'bold',
+    margin: Object.freeze({
+      top: Object.freeze({ value: 20, unit: 'px' }),
+      bottom: Object.freeze({ value: 10, unit: 'px' }),
+    }),
+  }),
+  h4: Object.freeze({
+    fontSize: Object.freeze({ value: 20, unit: 'px' }),
+    fontWeight: 'bold',
+    margin: Object.freeze({
+      bottom: Object.freeze({ value: 30, unit: 'px' }),
+    }),
+    background: '#dedede',
+    textAlign: 'center',
+  }),
+  h3: Object.freeze({
+    fontSize: Object.freeze({ value: 20, unit: 'px' }),
+    fontWeight: 'bold',
+    margin: Object.freeze({
+      top: Object.freeze({ value: 30, unit: 'px' }),
+      bottom: Object.freeze({ value: 20, unit: 'px' }),
+    }),
+    borderWidth: Object.freeze({ value: 2, unit: 'px' }),
+    borderStyle: 'dotted',
+    borderColor: '#000000',
+  }),
+  h2: Object.freeze({
+    fontSize: Object.freeze({ value: 38, unit: 'px' }),
+    fontWeight: 'bold',
+    margin: Object.freeze({
+      top: Object.freeze({ value: 36, unit: 'px' }),
+    }),
+    borderWidth: Object.freeze({ value: 2, unit: 'px' }),
+    borderStyle: 'solid',
+    borderColor: '#000000',
+    padding: Object.freeze({
+      top: Object.freeze({ value: 20, unit: 'px' }),
+      right: Object.freeze({ value: 20, unit: 'px' }),
+      bottom: Object.freeze({ value: 20, unit: 'px' }),
+      left: Object.freeze({ value: 20, unit: 'px' }),
+    }),
+  }),
   h1: Object.freeze({
     fontSize: Object.freeze({ value: 38, unit: 'px' }),
+    fontWeight: 'bold',
     lineHeight: Object.freeze({ value: 38, unit: 'px' }),
     background: 'rgba(255, 255, 255, 0.521)',
     padding: Object.freeze({
@@ -61,6 +106,26 @@ export const HEADING_DEFAULTS = Object.freeze({
   }),
 });
 
+export const PARAGRAPH_CLASS_DEFAULTS = Object.freeze({
+  author: Object.freeze({
+    fontSize: Object.freeze({ value: 24, unit: 'px' }),
+    fontWeight: 'bold',
+    background: 'rgba(255, 255, 255, 0.521)',
+    padding: Object.freeze({
+      top: Object.freeze({ value: 10, unit: 'px' }),
+      right: Object.freeze({ value: 20, unit: 'px' }),
+      bottom: Object.freeze({ value: 10, unit: 'px' }),
+      left: Object.freeze({ value: 20, unit: 'px' }),
+    }),
+    margin: Object.freeze({
+      top: Object.freeze({ value: 20, unit: 'px' }),
+      right: Object.freeze({ value: 0, unit: 'px' }),
+      bottom: Object.freeze({ value: 0, unit: 'px' }),
+      left: Object.freeze({ value: 0, unit: 'px' }),
+    }),
+  }),
+});
+
 export const INLINE_DEFAULTS = Object.freeze({
   em: Object.freeze({ fontStyle: 'italic' }),
   i: Object.freeze({ fontStyle: 'italic' }),