sass → css

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

@@ -0,0 +1,175 @@
+@media print {
+
+  @page {
+    size: 165mm 240mm;
+    margin-top: 16mm;
+    margin-bottom: 20mm;
+    bleed: 6mm;
+    marks: crop;
+
+  }
+
+  @page:left {
+    margin-left: 26mm;
+    margin-right: 18mm;
+
+     @top-left{
+          content: element(navDecor);
+    }
+
+
+      @bottom-center {
+      content: counter(page);
+      font-family: var(--mono);
+      font-size: 20px;
+      vertical-align: bottom;
+      padding-bottom: 8mm;
+
+    }
+
+  
+  }
+
+  @page:right {
+    margin-left: 18mm;
+    margin-right: 26mm;
+
+     @top-left{
+          content: element(nav);
+    }
+
+    @bottom-center {
+      content: counter(page);
+      font-family: var(--mono);
+      font-size: 20px;
+      vertical-align: bottom;
+      padding-bottom: 8mm;
+
+    }
+
+  
+  }
+
+
+
+  .chapter {
+    break-before: right;
+    page: chapter;
+  }
+
+
+  @page chapter:first {
+    @top-left {
+      content: none;
+    }
+
+  }
+
+   @page:blank {
+    @top-left {
+      content: none;
+    }
+     @bottom-center {
+      content: none;
+    }
+    
+
+  }
+}
+
+
+
+.chapter-header h2 {
+  string-set: title content(text);
+}
+
+.chapter-header .author {
+  string-set: author content(text);
+}
+
+.chapter-header .type {
+  string-set: type content(text);
+}
+
+
+.running-nav{
+  position: running(nav);
+   width: 100%;
+}
+
+.running-nav-decor{
+   position: running(navDecor);
+   width: 100%;
+}
+
+.running-nav-decor ul,
+.running-nav ul{
+  
+    display: flex;
+    gap: var(--gap);
+    list-style: none;
+
+}
+
+.running-nav-decor li, 
+.running-nav li{
+   font-family: var(--mono);
+  font-size: var(--fs-nav);
+  border: var(--border-grey);
+  font-size: var(--fs-nav);
+  line-height: 1;
+  padding: 4px 1ch;
+  min-height: var(--unit);
+  font-weight: normal;
+
+}
+
+.running-nav-decor ul li.nav-title,
+.running-nav ul li.nav-title{
+  flex-grow: 2;
+}
+
+.running-nav ul li.nav-author{
+  flex-shrink: 0;
+
+}
+
+.running-nav ul li.nav-title{
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
+
+.running-nav ul li.nav-title{
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.running-nav ul li.nav-author{
+  flex: 0 0 auto; /* taille fixe */
+}
+
+
+
+.running-nav-decor ul li.nav-chevron{
+  padding: 0;
+  width: var(--unit);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* .pagedjs_left_page .pagedjs_pagebox{
+
+  background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
+
+} */
+
+/* .pagedjs_right_page .pagedjs_pagebox{
+
+  background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
+
+} */