adjust header entretiens

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

@@ -233,20 +233,6 @@
   overflow: hidden;
 }
 
-/* DELETE BEFORE PRINT */
-/* .pagedjs_margin-top-right-corner-holder{
-  background-color: white;
-  width: 40px;
-  position: absolute;
-  right: -41px;
-} */
-
-
-
-/* DELETE BEFORE PRINT */
-
-
-
 
 .pagedjs_left_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after {
   padding-left: 0.25ch;
@@ -264,4 +250,40 @@
   display: inline-block;
   background-color: white;
   min-width: 2ch;
+}
+
+
+
+
+
+
+[data-chapter="essai"]{
+    --sign-color: var(--blue);
+   page: essai;
+   break-before: right;
+}
+
+
+@page essai{
+     --sign-color: var(--blue);
+}
+
+[data-chapter="entretien"]{
+   --sign-color: var(--red);
+   page: entretien;
+      break-before: right;
+}
+
+@page entretien{
+     --sign-color: var(--red);
+}
+
+[data-chapter="portfolio"]{
+   --sign-color: var(--green);
+   page: portfolio;
+      break-before: right;
+}
+
+@page portfolio{
+     --sign-color: var(--green);
 }

maquette-tests/assets/css/chapter-header.css

@@ -142,4 +142,26 @@
   /* left: calc(var(--pagedjs-margin-left)*-1);
   padding-left: 19px;
     top: -36px; */
+}
+
+
+
+
+
+/* SPECIFIC ----------------------------------------------- */
+
+#charlie-aubry .hgroup{
+  top: calc(var(--baseline)*0.5);
+}
+#charlie-aubry .chapter-header .title-before{
+      top: calc(var(--baseline) * -1.5);
+
+}
+
+#charlie-aubry .chapter-header .title-after {
+    bottom: calc(var(--baseline) * -1.75 + 1px);
+}
+
+#charlie-aubry .hgroup-after{
+  bottom: calc(var(--baseline)*-12 - 4px);
 }

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

@@ -48,73 +48,14 @@
 }
 
 
-[data-chapter="entretiens"]{
-    color: red;
-}
 
 
 
-.chapter {
-  break-before: right;
-  page: chapter;
-}
-
-
-@page chapter:first {
-
-  @top-left-corner {
-    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
-  }
-
-  @top-left {
-    content: none;
-  }
-
-  @top-center {
-    content: none;
-  }
-
-  @top-right {
-    content: none;
-  }
-
-}
-
-
-
-[data-chapter="essai"]{
-    --sign-color: var(--blue);
-   page: essai;
-}
-
-
-@page essai{
-     --sign-color: var(--blue);
-}
-
-[data-chapter="entretien"]{
-   --sign-color: var(--red);
-   page: entretien;
-}
-
-@page entretien{
-     --sign-color: var(--red);
-}
-
-[data-chapter="portfolio"]{
-   --sign-color: var(--green);
-   page: portfolio;
-}
-
-@page portfolio{
-     --sign-color: var(--green);
-}
-
 
 @page essai:first {
 
   @top-left-corner {
-    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
+    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
   }
 
   @top-left {
@@ -136,7 +77,7 @@
 @page entretien:first {
 
   @top-left-corner {
-    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
+    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
   }
 
   @top-left {
@@ -158,7 +99,7 @@
 @page portfolio:first {
 
   @top-left-corner {
-    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
+    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
   }
 
   @top-left {

maquette-tests/index.html

@@ -558,7 +558,7 @@
 
 
 
-    <section class="chapter" data-chapter="entretien">
+    <section class="chapter" data-chapter="entretien" id="charlie-aubry">
 
         <span class="nav-decor">D6cor</span>
     <span class="nav-author">Charlie Aubry</span>