decor subtitles finish js

maquette-tests/assets/css/01_var.css

@@ -1,6 +1,6 @@
 :root{
 
-  --symbol: "=";
+  --symbol: "+";
   --unit: 70px;
   --sub-unit: 17.5px;
   
@@ -71,7 +71,7 @@
     --sign-spacing: 0.45rem;
     --sign-spacing: 7.2px;
     --sign-color: var(--red);
-    --sign-color: black;
+    /* --sign-color: black; */
   
 
 

maquette-tests/assets/css/02_body.css

@@ -20,4 +20,16 @@ body {
     font-size: var(--font-size);
     line-height: var(--baseline);
 
-}
+}
+
+
+
+.pagedjs_left_page .pagedjs_sheet{
+    --grid-position-x: 21px!important;
+}
+
+.pagedjs_right_page .pagedjs_sheet{
+    --grid-position-x: 16px!important;
+}
+
+

maquette-tests/assets/css/03_layout.css

@@ -2,102 +2,118 @@
 
   @page {
     size: 165mm 240mm;
-    margin-top: 25mm;
+    margin-top: 22mm;
     margin-bottom: 14mm;
     bleed: 6mm;
     marks: crop;
     --symbol-top: 1px;
+    --running-top: 8mm;
   }
 
   @page:left {
     margin-left: 18mm;
     margin-right: 26mm;
 
-    @top-left {
-      content: element(decor);
-      vertical-align: top;
-      padding-top: calc(8mm - var(--symbol-top));
-      width: calc(var(--unit)*2);
-      font-size: var(--fs-subtitle);
-      color: var(--sign-color);
-    }
-
-    @top-center{
-      content: element(author);
-      vertical-align: top;
-      padding-top: calc(8mm - var(--symbol-top));
-      text-align: left;
-      white-space: nowrap;
-      padding-right: 1.5ch;
-      padding-left: 0.5ch;
-      font-size: var(--fs-subtitle);
-       color: var(--sign-color);
-
-    }
-
-
-    @top-right {
-     content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
-      font-size: var(--sign-size);
-      color: var(--sign-color);
-      letter-spacing: var(--sign-spacing);
-      line-height: var(--sign-baseline);
-            vertical-align: top;
-      padding-top: 8mm;
-      width: 100%;
- 
-    }
-
-
-
     @top-left-corner {
       content: var(--symbol) var(--symbol) var(--symbol);
       font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      line-height: var(--sign-baseline);
-
-     
       vertical-align: top;
-      padding-top: 8mm;
+      padding-top: var(--running-top);
       text-align: left;
       margin-left: 3mm;
 
     }
 
 
+    @top-left {
+      content: element(decor);
+      vertical-align: top;
+      padding-top: calc(var(--running-top) - var(--symbol-top));
+      width: calc(var(--unit)*2);
+      font-size: var(--font-size);
+      color: var(--sign-color);
+    }
+
+ 
+
+    @top-center{
+      content: element(author);
+      vertical-align: top;
+      padding-top: calc(var(--running-top) - var(--symbol-top));
+      text-align: left;
+      white-space: nowrap;
+      padding-right: 1.5ch;
+      padding-left: 0.5ch;
+        font-size: var(--font-size);
+       color: var(--sign-color);
+
+    }
+
+
+    @top-right {
+     content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
+      font-size: var(--sign-size);
+      color: var(--sign-color);
+      letter-spacing: var(--sign-spacing);
+      line-height: var(--sign-baseline);
+      vertical-align: top;
+      padding-top: var(--running-top);
+      width: 100%;
+      white-space: nowrap;
+ 
+    }
+
+
+
+    
+
+
   }
 
   @page:right {
        margin-left: 26mm;
     margin-right: 18mm;
 
-    @top-left {
+    @top-left-corner {
-      content: element(type);
+      content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
-      width: 0px;
+      font-size: var(--sign-size);
+     color: var(--sign-color);
+     letter-spacing: var(--sign-spacing);
+     line-height: var(--sign-baseline);
       vertical-align: top;
-      padding-top: 8mm;
+      padding-top: var(--running-top);
+      text-align: left;
+      margin-left: 3mm;
+
+    }
+
+    @top-left {
+        content: element(title);
+      vertical-align: top;
+      padding-top: var(--running-top);
+        white-space: nowrap;
+      padding-right: 1.5ch;
+        font-size: var(--font-size);
+       color: var(--sign-color);
     }
 
     @top-right {
-      content: element(title);
+     content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
+      font-size: var(--sign-size);
+      color: var(--sign-color);
+      letter-spacing: var(--sign-spacing);
+      line-height: var(--sign-baseline);
       vertical-align: top;
-      padding-top: calc(8mm + 20px);
+      padding-top: var(--running-top);
-      /* padding-right: 11mm; */
-      text-align: left;
-      position: relative;
-      left: -11mm;
       width: 100%;
+      white-space: nowrap;
     }
 
     @top-right-corner {
-      content: counter(page);
+ 
-      width: 40px;
-      position: relative;
-      left: -40px;
-      text-align: right;
-      vertical-align: top;
-      padding-top: 8mm;
     }
 
   }
@@ -159,7 +175,7 @@
 
 
 .pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after{
-  content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
+      content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
       font-size: var(--sign-size);
       color: var(--sign-color);
       letter-spacing: var(--sign-spacing);
@@ -170,12 +186,22 @@
       top: var(--symbol-top);
 }
 
+ .pagedjs_left_page   .pagedjs_margin-top{
+      width: calc(100% + var(--pagedjs-margin-right));
+      overflow: hidden;
+    }
 
 
 /* DELETE BEFORE PRINT */
-.pagedjs_margin-top-right-corner-holder{
+/* .pagedjs_margin-top-right-corner-holder{
   background-color: white;
   width: 40px;
   position: absolute;
   right: -41px;
-}
+} */
+
+
+
+/* DELETE BEFORE PRINT */
+
+

maquette-tests/assets/css/subtitles.css

@@ -6,10 +6,15 @@ h3, h4{
    margin-top: calc(var(--baseline)*1);
     margin-bottom: calc(var(--baseline)*1);
     position: relative;
-   font-size: var(--fs-subtitle);
+   font-size: var(--font-size);
      color: var(--sign-color);
 }
 
+.h3_container, 
+.h4_container{
+    position: relative;
+
+}
 
 .h3-before,
 .h3-after{
@@ -50,24 +55,53 @@ h3, h4{
 
 
 
+/* LEFT PAGE */
+
 .decor-h3_small{
      left: -13.5mm;
-    padding-top: 9px;
+    top: calc(var(--baseline)*-2.5 + 9px);
 }
 
 
- .decor-h3_small div{
+
-        position: relative;
-        top: calc(var(--baseline)*-1.5);
-}
 
 .decor-h3_big{
-    right: -93px;
+    right: -92px;
     text-align: right;
+     top: calc(var(--baseline) * -3.5 - 9px);
 }
 
 
- .decor-h3_big div{
+
-        position: relative;
+
-        top: calc(var(--baseline) * -2.5 - 9px);
+
-}
+/* RIGHT PAGE */
+
+
+.pagedjs_right_page .decor-h3_small{
+    left: auto;
+   right: -62px;
+    top: calc(var(--baseline)*-2.5 + 9px);
+   text-align: right;
+}
+
+
+
+
+.pagedjs_right_page .decor-h3_big{
+    right: 0;
+    left: -87px;
+    text-align: left;
+     top: calc(var(--baseline) * -3.5 - 9px);
+}
+
+
+
+.pagedjs_right_page .chapter > .h3_container h3 {
+    margin-top: 0px; 
+} 
+
+
+.pagedjs_right_page .chapter > .h3_container .decor-h3_big [data-count="2"]{
+    color: transparent
+}

maquette-tests/csspageweaver/manifest.json

@@ -33,7 +33,7 @@
         "assets/css/subtitles.css"
     ],
     "hook": [
-        "/js/items-decor.js"
+        "/js/decor-subtitles.js"
         
     ]
 }

maquette-tests/js/decor-subtitles.js

@@ -4,14 +4,17 @@ import { Handler } from '/csspageweaver/lib/paged.esm.js';
 export default class itemsDecor extends Handler {
     constructor(chunker, polisher, caller) {
         super(chunker, polisher, caller);
-        this.symbol = "=";
+        this.symbol = "+";
       }
 
+
+
     createDecor(symbol, sizes, sizeClass) {
       const div = document.createElement("div");
       div.className = `decor-h3 ${sizeClass}`;
-      sizes.forEach(n => {
+      sizes.forEach((n, i) => {
         const line = document.createElement("div");
+        line.dataset.count = i + 1;
         line.textContent = symbol.repeat(n);
         div.appendChild(line);
       });
@@ -89,25 +92,46 @@ export default class itemsDecor extends Handler {
           firstDecor  = this.createDecor(symbol, bigSizes,   "decor-h3_big");
           secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
         }
-        subtitle.parentNode.insertBefore(firstDecor, subtitle);
+        const container = document.createElement("div");
-        subtitle.parentNode.insertBefore(secondDecor, subtitle);
+        container.className = "h3_container";
+        subtitle.parentNode.insertBefore(container, subtitle);
+        container.appendChild(firstDecor);
+        container.appendChild(secondDecor);
+        container.appendChild(subtitle);
       }
     }
 
+
+
+    beforeParsed(content){
+      content.querySelectorAll("h3").forEach(subtitle => {
+           const next = subtitle.nextElementSibling;
+          if (next) next.classList.add("following-h3");
+      });
+      content.querySelectorAll("h4").forEach(subtitle => {
+           const next = subtitle.nextElementSibling;
+          if (next) next.classList.add("following-h4");
+      });
+    }
+
+   
+
     afterPageLayout(pageElement, page, breakToken) {
       const symbol = this.symbol;
       const isLeft = pageElement.classList.contains("pagedjs_left_page");
 
       pageElement.querySelectorAll("h3").forEach(subtitle => {
         this.processTitle(subtitle, symbol, true, isLeft);
-        const next = subtitle.nextElementSibling;
-        if (next) next.classList.add("following-h3");
       });
 
       pageElement.querySelectorAll("h4").forEach(subtitle => {
         this.processTitle(subtitle, symbol, false, isLeft);
-        const next = subtitle.nextElementSibling;
+        const container = document.createElement("div");
-        if (next) next.classList.add("following-h4");
+        container.className = "h4_container";
+        subtitle.parentNode.insertBefore(container, subtitle);
+        container.appendChild(subtitle);
       });
     }
+
+     
 }