better running

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

@@ -3,12 +3,13 @@
   @page {
     size: 165mm 240mm;
     margin-top: 22mm;
-    margin-bottom: 24mm;
+    margin-bottom: 18mm;
     bleed: 6mm;
     marks: crop;
     --symbol-top: 1px;
     --running-top: 8mm;
-    --running-bottom: 10mm;
+    --running-bottom: 6mm;
+    --running-left: var(--running-left);
   }
 
   @page:left {
@@ -25,7 +26,7 @@
       vertical-align: top;
       padding-top: var(--running-top);
       text-align: left;
-      padding-left: 19px;
+      padding-left: var(--running-left);
 
     }
 
@@ -48,8 +49,6 @@
       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);
       font-family: var(--sign-family);
@@ -68,19 +67,21 @@
       padding-top: var(--running-top);
       width: 100%;
       white-space: nowrap;
+      text-align: left;
+      padding-left: 5px;
 
     }
-
+/* 
     @bottom-left {
       content: counter(page);
-      vertical-align: top;
+      vertical-align: bottom;
-      padding-top: var(--running-bottom);
+      padding-bottom: var(--running-bottom);
       white-space: nowrap;
       font-size: var(--font-size);
       color: var(--sign-color);
       z-index: 100;
 
-    }
+    } */
 
 
 
@@ -103,7 +104,7 @@
       vertical-align: top;
       padding-top: var(--running-top);
       text-align: left;
-    padding-left: 19px;
+      padding-left: var(--running-left);
 
     }
 
@@ -132,17 +133,17 @@
     }
 
 
-    @bottom-right {
+    /* @bottom-right {
       content: counter(page);
-      vertical-align: top;
+      vertical-align: bottom;
-      padding-top: var(--running-bottom);
+      padding-bottom: var(--running-bottom);
       text-align: right;
       white-space: nowrap;
       font-size: var(--font-size);
       color: var(--sign-color);
       z-index: 100;
 
-    }
+    } */
 
 
 
@@ -207,10 +208,11 @@
   letter-spacing: var(--sign-spacing);
   font-family: var(--sign-family);
   line-height: var(--sign-baseline);
-  padding-left: 1ch;
+  /* padding-left: 1ch; */
   width: calc(var(--unit) + var(--sub-unit));
   position: relative;
   top: var(--symbol-top);
+  padding-left: 11px;
 }
 
 .pagedjs_left_page .pagedjs_margin-top {

maquette-tests/assets/css/running-page.css

@@ -5,14 +5,15 @@
       letter-spacing: var(--sign-spacing);
       font-family: var(--sign-family);
       line-height: var(--sign-baseline);
-      vertical-align: top;
+      vertical-align: bottom;
-      padding-top: var(--running-bottom);
+      padding-bottom: var(--running-bottom);
       width: 100%;
 
 
       position: absolute; 
-      left: calc(var(--pagedjs-margin-top)*-1 + 0px);
+      left: 0px;
-        left: calc(var(--pagedjs-margin-left)*-1);
+
+        bottom: 0px;
       width: var( --w-container);
       overflow: hidden;
       /* background-color: red; */
@@ -22,19 +23,22 @@
 
 .running-page{
     width: calc(var(--w-container)*2);
-    padding-left: 11px;
+    padding-left: 19px;
     padding-right: 6px;
     display: flex;
 }
 
 .running-page .symbols{
     flex-shrink: 0;
+    /* background-color: white; */
+      z-index: 20;
 
 }
 .running-page .dots{
-    position: relative;
+    position: absolute;
     top: -5px;
-    left: -5px;
+    left: 19px;
+    z-index: 10;
 }
 
 .pagedjs_right_page .running-page_container .running-page{

maquette-tests/assets/css/subtitles.css

@@ -58,7 +58,7 @@ h3, h4{
 /* LEFT PAGE */
 
 .decor-h3_small{
-     left: -13.5mm;
+    left: -49px;
     top: calc(var(--baseline)*-2.5 + 9px);
 }
 
@@ -66,7 +66,7 @@ h3, h4{
 
 
 .decor-h3_big{
-    right: -92px;
+    right: -81px;
     text-align: right;
      top: calc(var(--baseline) * -3.5 - 9px);
 }
@@ -80,7 +80,7 @@ h3, h4{
 
 .pagedjs_right_page .decor-h3_small{
     left: auto;
-   right: -62px;
+   right: -53px;
     top: calc(var(--baseline)*-2.5 + 9px);
    text-align: right;
 }
@@ -90,9 +90,9 @@ h3, h4{
 
 .pagedjs_right_page .decor-h3_big{
     right: 0;
-    left: -87px;
+    left: -80px;
     text-align: left;
-     top: calc(var(--baseline) * -3.5 - 9px);
+    top: calc(var(--baseline) * -3.5 - 9px);
 }
 
 

maquette-tests/assets/css/text.css

@@ -11,7 +11,7 @@
 
 
 p::before {
-    content: "...........";
+    content: ".........";
     font-size: var(--sign-size);
     color: var(--sign-color);
     letter-spacing: var(--sign-spacing);
@@ -19,8 +19,9 @@ p::before {
     line-height: 0px;
     position: relative;
     top: -3px;
-    padding-left: 2px;
+    padding-left: 0px;
     padding-right: 0px;
+    margin-right: -4px;
 }
 
 .following-title::before,

maquette-tests/js/decor-num-pages.js

@@ -35,7 +35,7 @@ export default class itemsDecor extends Handler {
         runningPage.appendChild(symbols);
         runningPage.appendChild(dots);
         container.appendChild(runningPage);
-        area.appendChild(container);
+        area.after(container);
 
         symbols.textContent = this.symbol;
         const baseHeight = symbols.offsetHeight;