toc

assets/css/chapter-header.css

@@ -8,15 +8,11 @@
 }
 
 .chapter-header .hgroup {
-  font-size: 22px;
+  font-size: var(--fs-title);
   line-height: 1;
   font-weight: normal;
   position: relative;
   top: calc(var(--baseline)*-0.25 - 2px); 
-  /* margin-bottom: calc(var(--baseline)*3 + 13px);  */
-  /*padding-right: calc(var(--unit)*2);*/
-  position: relative;
-  /* padding-left: 15px; */
 }
 
 

assets/css/figures.css

@@ -9,13 +9,15 @@ figcaption{
 }
 
 figcaption::before{
-  content: "*";
+  content: "(>)";
-   font-family: var(--sign-family);
+  /* font-family: var(--sign-family); */
+  font-size: var(--fs-notes);
+   /* font-family: var(--sign-family);
      font-size: var(--sign-size);
   color: var(--sign-color);
   letter-spacing: var(--sign-spacing);
   font-family: var(--sign-family);
-  line-height: var(--sign-baseline);
+  line-height: var(--sign-baseline); */
   position: absolute;
   left: 0;
 }

assets/css/portfolio.css

@@ -146,10 +146,6 @@
 #fig-iyo-bisseck-1{
 break-before: right;
 }
-/* #fig-iyo-bisseck-3{
-  break-before: page;
-} */
-
 
 #fig-iyo-bisseck-3 img{
   object-fit: contain;
@@ -174,17 +170,6 @@ break-before: right;
   object-position: 0px calc(var(--pagedjs-margin-top) + var(--bleed-images));
 }
 
-/* #fig-iyo-bisseck-6 img{
-    object-fit: contain;
-  width: 80%;
-  position: relative;
-  left: calc(10% - var(--bleed-images));
-
-} */
-
-/* #fig-iyo-bisseck-6, #fig-iyo-bisseck-7{
-  break-before: page;
-} */
 
 
 

assets/css/print.css

@@ -55,7 +55,6 @@
       font-size: var(--font-size);
       color: var(--sign-color);
       font-family: var(--sign-family);
-      /*margin-left: -12px;*/
 
     }
 
@@ -166,11 +165,10 @@
 
 
   @page:blank {
-    /* @top-left { content: none;}
+    @top-left { content: none;}
     @top-left-corner { content: none;}
     @top-right { content: none; }
     @top-center { content: none;}
-    @bottom-center { content: none; } */
 
 
   }
@@ -254,121 +252,15 @@
 
 
 [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);
-  --sign-color: rgb(117, 47, 47);
-  page: portfolio;
-  break-before: left;
-}
-
-@page portfolio{
-  --sign-color: var(--green);
-  --sign-color: white;
-  background-color: white;
-} */
-
-/* ------- TABLE OF CONTENTS --------- */
-.toc{
-  break-before: left;
-  font-family: var(--fontTitle);
-  text-align: left;
-  font-size: var(--font-size);
-  page: toc;
-}
-
-@page toc{
-  margin-top: 10mm;
-  margin-bottom: 10mm;
-  @top-left { content: none;}
-  @top-left-corner { content: none;}
-  @top-right { content: none; }
-  @top-center { content: none;}
-  @bottom-center { content: none; }
-  @bottom-right-corner { content: none; }
-}
-
-.toc h2{
-  font-family: var(--fontTitle);
-  text-align: left;
-  font-size: var(--font-size);
-  margin-bottom: var(--baseline);
-}
-
-/* counters */
-#list-toc-generated{ 
-  counter-reset: counterTocLevel1; 
-  list-style: none;
-  overflow-x: visible !important;
-}
-
-#list-toc-generated .toc-element-level-1{ 
-  counter-increment: counterTocLevel1; 
-  margin-bottom: calc(var(--baseline) * 1);
-}
-
-.toc-essai a span{
-  color: var(--blue);
-}
-
-.toc-entretien a span{
-  color: var(--red);
-}
-
-.toc-portfolio a span{
-  color: var(--green);
-}
-
-#list-toc-generated a{
-  display: block;
-  text-decoration: none;
-  margin-left: 70px;
-  width: calc(100% - 70px);
-}
-
-#list-toc-generated .toc-element a::before{
-  content: target-counter(attr(href), page);
-  position: absolute;
-  left:0;
-  text-align: left;
-}
-
-#list-toc-generated li span{
-  display: block;
-  text-transform: uppercase;
-}
-
-#list-toc-generated li span::before{
-  content: "//////// essai //////////////////////////////////////////";
-  display: block;
-  font-size: 0.8em;
-  white-space: nowrap;
-}
-
-#list-toc-generated .toc-element a span::after{
-  content: "— Auteur du texte";
-  display: block;
-}
-
-
-
 

assets/css/running-page.css

@@ -111,9 +111,3 @@
   }
 
 }
-
-/* TEMP */ 
-@page entretien{
-     --sign-color: var(--red);
-}
-

assets/css/toc.css

@@ -0,0 +1,143 @@
+
+/* ------- TABLE OF CONTENTS --------- */
+.toc{
+  break-before: right;
+  font-family: var(--fontTitle);
+  text-align: left;
+  font-size: var(--font-size);
+  page: toc;
+}
+
+@page toc{
+  margin-top: 10mm;
+  margin-bottom: 10mm;
+  @top-left { content: none;}
+  @top-left-corner { content: none;}
+  @top-right { content: none; }
+  @top-center { content: none;}
+  @bottom-center { content: none; }
+  @bottom-right-corner { content: none; }
+}
+
+.toc h2{
+  font-size: var(--fs-title);
+  font-family: var(--fontTitle);
+  /* margin-left: calc(var(--unit)*1); */
+  text-align: center;
+  /* margin-bottom: calc(var(--baseline)*2); */
+}
+
+.toc h2::after{
+  content: "/ / / /";
+  display: block;
+  font-size: var(--sign-size);
+  color: var(--sign-color);
+  letter-spacing: var(--sign-spacing);
+  font-family: var(--sign-family);
+  line-height: calc(var(--sign-baseline) * 1);
+  max-width: 1ch;
+  margin-top: 0.5rem;
+  /* margin-bottom: 0.5rem; */
+  margin-inline: auto;
+}
+
+
+#list-toc-generated a{
+  display: block;
+  text-decoration: none;
+ margin-left: calc(var(--unit)*1);
+  width: calc(100% - var(--unit));
+  position: relative;
+}
+
+#list-toc-generated .toc-element a::before{
+  content: target-counter(attr(href), page);
+  position: absolute;
+  left: calc(var(--unit)*-1);
+  top: calc(var(--baseline)*1.5 + 1px);
+  text-align: left;
+}
+
+
+
+
+#list-toc-generated li .toc-title,
+#list-toc-generated li .toc-author, 
+#list-toc-generated li .toc-type{
+  display: block;
+}
+
+#list-toc-generated li{
+  break-inside: avoid;
+  margin-bottom: calc(var(--baseline)*1);
+}
+
+#list-toc-generated li .toc-type{
+  margin-bottom: calc(var(--baseline)*0.5);
+  position: relative;
+}
+
+#list-toc-generated li .toc-title{
+  display: block;
+  text-transform: uppercase;
+    margin-bottom: calc(var(--baseline)*0.25);
+}
+
+
+
+
+.toc-type-symbole_before,
+.toc-type-symbole_after{
+    font-size: var(--sign-size);
+    color: var(--sign-color);
+    letter-spacing: var(--sign-spacing);
+    font-family: var(--sign-family);
+    line-height: calc(var(--sign-baseline) * 1);
+
+}
+
+.toc-type-symbole_before{
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.toc-type .text{
+  text-transform: uppercase;
+  letter-spacing: 0.1rem;
+  font-size: 0.9em;
+
+}
+
+
+.toc-type{
+  white-space: nowrap;
+  margin-left: calc(var(--unit)*-1);
+}
+
+.toc-type::before{
+  content: "////";
+      font-size: var(--sign-size);
+     letter-spacing: var(--sign-spacing);
+    font-family: var(--sign-family);
+    line-height: calc(var(--sign-baseline) * 1);
+
+}
+
+[data-toc-chapter="entretien"]::after,
+[data-toc-chapter="portfolio"]::after{
+   content: " /////////////////";
+      left: -6px;
+}
+
+[data-toc-chapter="essai"]::after{
+   content: " ///////////////////";
+      left: -6px;
+}
+.toc-type::after{
+  font-size: var(--sign-size);
+  letter-spacing: var(--sign-spacing);
+  font-family: var(--sign-family);
+  line-height: calc(var(--sign-baseline) * 1);
+  position: relative;
+}
+

assets/css/variables.css

@@ -20,6 +20,7 @@
   --fs-nav: 11px;
   --fs-subtitle: 16px;
   --fs-notes: 11px;
+  --fs-title: 22px;
 
 	--red: #ff665e;
 	--green: #44d62c;

assets/js/plugins/decor-subtitles.js

@@ -16,22 +16,22 @@ class subtitlesDecor extends Paged.Handler {
       return div;
     }
 
-    createLine(symbol, nodes) {
+    createLine(symbol, nodes, prefix = "subtitle") {
       const line = document.createElement("span");
-      line.className = "subtitle-line";
+      line.className = `${prefix}-line`;
 
       const spanBefore = document.createElement("span");
-      spanBefore.className = "subtitle-before";
+      spanBefore.className = `${prefix}-before`;
       spanBefore.textContent = symbol.repeat(3);
       line.appendChild(spanBefore);
 
       const spanText = document.createElement("span");
-      spanText.className = "subtitle-text";
+      spanText.className = `${prefix}-text`;
       nodes.forEach(node => spanText.appendChild(node));
       line.appendChild(spanText);
 
       const spanAfter = document.createElement("span");
-      spanAfter.className = "subtitle-after";
+      spanAfter.className = `${prefix}-after`;
       spanAfter.textContent = "";
       line.appendChild(spanAfter);
 
@@ -39,8 +39,8 @@ class subtitlesDecor extends Paged.Handler {
     }
 
 
-    processTitle(subtitle, symbol, withDecor, isLeft) {
+    processTitle(subtitle, symbol, withDecor, isLeft, prefix = "subtitle") {
-      if (subtitle.querySelector(".subtitle-line")) return;
+      if (subtitle.querySelector(`.${prefix}-line`)) return;
 
       const children = Array.from(subtitle.childNodes);
 
@@ -57,16 +57,15 @@ class subtitlesDecor extends Paged.Handler {
       });
       segments.push(current);
 
-      // Reconstruire le titre avec des .subtitle-line
+      // Reconstruire le titre avec des .{prefix}-line
       subtitle.innerHTML = "";
       segments.filter(seg => seg.length > 0).forEach(nodes => {
-        const line = this.createLine(symbol, nodes);
+        const line = this.createLine(symbol, nodes, prefix);
         subtitle.appendChild(line);
 
-        const spanAfter = line.querySelector(".subtitle-after");
+        const spanAfter = line.querySelector(`.${prefix}-after`);
         const baseHeight = line.offsetHeight;
         let count = 0;
-        // subtitle-after → Ajouter des symboles à la ligne en vérifiant la hauteur de la ligne, si la ligne devient plus haute, supprimer le dernier symbole ajouté
         while (count < 300) {
           count++;
           spanAfter.textContent = symbol.repeat(count);

assets/js/plugins/toc.js

@@ -97,8 +97,19 @@ function createToc(config) {
       }
     }
 
-     tocNewLi.innerHTML =
+    const chapter = tocElement.closest('.chapter');
-      '<a class="toc-link" href="#' + tocElement.id + '">' + tocElement.innerHTML + '</a>';
+    const author = chapter?.querySelector('.nav-author')?.textContent || '';
+    const chapterType = chapter?.dataset.chapter || '';
+    tocNewLi.dataset.author = author;
+    if (chapterType) tocNewLi.classList.add('toc-' + chapterType);
+    const typeSymbols = { entretien: '@', portfolio: '+', essai: '*' };
+    const symbol = typeSymbols[chapterType] || '';
+    tocNewLi.innerHTML =
+      '<a class="toc-link" href="#' + tocElement.id + '">' +
+        (chapterType ? '<span class="toc-type" data-toc-chapter="' + chapterType + '">' + (symbol ? '<span class="toc-type-symbole_before">' + symbol + '</span>' : '') + '<span class="text">' + chapterType + ' </span>' + (symbol ? '<span class="toc-type-symbole_after">' + symbol + '</span>' : '') + '</span>' : '') +
+        '<span class="toc-title">' + tocElement.innerHTML + '</span>' +
+        (author ? '<span class="toc-author">' + author + '</span>' : '') +
+      '</a>';
 
     tocUl.appendChild(tocNewLi)
  }

assets/pagedjs/interface.js

@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
     let book_content = flowBook.content;
     let paged = new Paged.Previewer();
 
-    paged.preview(book_content, ["assets/css/print-template.css", "assets/css/main.css", "assets/css/print.css", 'assets/css/blockquote.css', 'assets/css/chapter-header.css', 'assets/css/entretiens.css', 'assets/css/notes.css', 'assets/css/figures.css',  'assets/css/portfolio.css', "assets/css/running-page.css", 'assets/css/subtitles.css', 'assets/css/text.css', 'assets/css/typesetting.css',], document.querySelector("#renderbook")).then((flow) => {
+    paged.preview(book_content, ["assets/css/print-template.css", "assets/css/main.css", "assets/css/print.css", "assets/css/toc.css", 'assets/css/blockquote.css', 'assets/css/chapter-header.css', 'assets/css/entretiens.css', 'assets/css/notes.css', 'assets/css/figures.css',  'assets/css/portfolio.css', "assets/css/running-page.css", 'assets/css/subtitles.css', 'assets/css/text.css', 'assets/css/typesetting.css',], document.querySelector("#renderbook")).then((flow) => {
         
     });
   });

site/templates/print.php

@@ -15,7 +15,7 @@
     <div class="blank-page"></div>
 
     <section class="toc">
-      <h2>Sommaire =></h2>
+      <h2>Sommaire</h2>
       <article id="table-of-contents"></article>
     </section>