defaults values title

public/assets/css/stylesheet.print.css

@@ -30,23 +30,6 @@ figure, img{
   z-index: -1;
 }
 
-
-/* p.author{
-    font-size: 24px;
-    font-weight: bold;
-      background: rgba(255, 255, 255, 0.521);
-  padding: 10px 20px;
-  margin: 0;
-    margin-top: 20px;
-}
-
-.introduction{
-      font-size: 26px;
-        background: rgba(255, 255, 255, 0.521);
-  padding: 10px 20px;
-  margin: 0;
-    margin-top: 60px;
-} */
 .figure-backgroung-cover img{
   width: 100%;
   height: 100%;
@@ -54,6 +37,16 @@ figure, img{
 }
 
 
+/* 
+.introduction{
+      font-size: 26px;
+        background: rgba(255, 255, 255, 0.521);
+  padding: 10px 20px;
+  margin: 0;
+    margin-top: 60px;
+} 
+ */
+
 
 
 /* ───────────────────────────────────────────
@@ -64,53 +57,52 @@ figure, img{
   break-before: right;
 }
 
-/* 
+
 h2{
-  font-size: 38px;
-  margin-top: 36px;
-  background-color: #cfcfcf;
-  padding: 20px;
   break-after: avoid;
 }
- */
+ 
-
-
 
 /* ───────────────────────────────────────────
    CHAPITRES
 ─────────────────────────────────────────── */
 
 
-/* h3{
+h3{
-  margin-top: 30px;
+   break-after: avoid;
-  break-after: avoid;
+}
-} */
 
 
 /* ───────────────────────────────────────────
    CARTES
 ─────────────────────────────────────────── */
 
-/* h4{
+h4{
   break-after: avoid;
-    margin-top: 30px;
+}
-    text-decoration: underline;
-
-} */
 
 
 /* ───────────────────────────────────────────
    MARKERS
 ─────────────────────────────────────────── */
 
-/* 
+ 
-h5{
+.marker-title{
   display: flex;
   align-items: center;
-}*/
+  
+}
 .marker-title img{
-  width: 40px;
+  width: 30px;
 } 
 
 
+h5{
+  font-weight: bold;
+  font-size: 16px;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+
 

public/content/cohesion-des-mondes/5_test-avec-geoformat/narrative.txt

@@ -31,7 +31,7 @@ body {
 }
 
 p {
-  font-size: 12px;
+  font-size: 14px;
   line-height: 18px;
 }
 
@@ -45,9 +45,7 @@ h1 {
   padding-left: 20px;
   margin-top: 60px;
   margin-bottom: 30px;
-  font-family: "Source Code Pro";
+  font-family: "Montserrat";
-  font-style: normal;
-  color: rgb(237, 13, 13);
 }
 
 em {

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">
+            <div class="marker-title">
-              <img
+               <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' }),