layout-5

maquette-tests/assets/css/style.css

@@ -3,17 +3,18 @@
 @import url("https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap");
 :root {
   --font: 'Routed Gothic', sans-serif;
+  --font: 'Wagram Slab', serif;
   --mono: 'Selectric Mono', monospace;
   --mono: 'Ivory Mono', monospace;
   --mono: 'Baskemo Sans', monospace;
-  --note: 'Routed Gothic', serif;
+  --sans: 'Routed Gothic', serif;
   --title: 'HNoailles Times Triplex', sans-serif;
   --red: #9B0000;
   --green:#009B00;
   --green-light:#009b0025;
   --blue: #00009B;
   --indent: 7mm;
-  --font-size: 14px;
+  --font-size: 12px;
   --baseline: 18px;
 }
 
@@ -39,7 +40,7 @@ body {
 @media print {
   @page {
     size: 165mm 240mm;
-    margin-top: 10mm;
+    margin-top: 16mm;
     margin-bottom: 20mm;
     bleed: 6mm;
     marks: crop;
@@ -47,49 +48,41 @@ body {
   @page :left {
     margin-left: 18mm;
     margin-right: 26mm;
-    @bottom-left {
+    @bottom-center {
       content: counter(page);
-      font-family: var(--font);
+      font-family: var(--sans);
       font-size: 20px;
       vertical-align: bottom;
       padding-bottom: 5mm;
       width: 10mm;
     }
-    @bottom-center {
+    @top-left {
       content: string(author);
-      font-family: var(--font);
+      font-family: var(--mono);
       font-size: 12px;
-      vertical-align: bottom;
-      padding-bottom: 5mm;
-      text-align: left;
-      padding-left: 3ch;
     }
-    @bottom-right {
+    @top-center {
       content: string(type);
-      font-family: var(--font);
+      font-family: var(--mono);
       font-size: 12px;
-      vertical-align: bottom;
-      padding-bottom: 5mm;
     }
   }
   @page :right {
     margin-left: 26mm;
     margin-right: 18mm;
-    @bottom-right {
+    @bottom-center {
       content: counter(page);
-      font-family: var(--font);
+      font-family: var(--sans);
       font-size: 20px;
       vertical-align: bottom;
       padding-bottom: 5mm;
       width: 10mm;
       text-align: right;
     }
-    @bottom-left {
+    @top-left {
       content: string(title);
-      font-family: var(--font);
+      font-family: var(--mono);
       font-size: 12px;
-      vertical-align: bottom;
-      padding-bottom: 5mm;
     }
   }
   /*p{
@@ -98,6 +91,12 @@ body {
   .chapter {
     -moz-column-break-before: right;
          break-before: right;
+    page: chapter;
+  }
+  @page chapter:first {
+    @top-left {
+      content: none;
+    }
   }
 }
 [data-type=ovo] {
@@ -329,7 +328,6 @@ body {
   hyphens: auto;
   hyphenate-limit-chars: 8 3;
   position: relative;
-  font-weight: 200;
   letter-spacing: 0.01rem;
 }
 .chapter p + p {
@@ -346,11 +344,15 @@ body {
   max-width: 18ch;
   letter-spacing: 0.05rem;
   color: black;
+  -webkit-text-decoration: underline 1px;
+          text-decoration: underline 1px;
+  text-underline-offset: 2px;
 }
 .chapter blockquote {
+  font-family: var(--mono);
   padding-left: var(--indent);
-  margin-top: calc(var(--baseline) * 2);
-  margin-bottom: calc(var(--baseline) * 2);
+  margin-top: calc(var(--baseline) * 1);
+  margin-bottom: calc(var(--baseline) * 1);
 }
 .chapter > :first-child {
   margin-top: 0px;
@@ -361,13 +363,12 @@ body {
 }
 
 .pagedjs_footnote {
-  font-family: var(--note);
-  line-height: 1.2;
-  font-size: 11px;
-  font-weight: normal;
+  font-family: var(--sans);
+  line-height: 1.3;
+  font-size: 12px;
+  font-weight: 200;
   text-indent: -14mm;
   padding-left: 14mm;
-  color: var(--green);
 }
 
 .note-container {
@@ -387,29 +388,26 @@ body {
 }
 
 .pagedjs_footnote[data-footnote-call] {
-  border: 1px solid currentColor;
-  min-width: 14px;
-  height: 14px;
-  display: inline-flex;
-  border-radius: 4px;
-  align-items: center;
-  justify-content: center;
-  line-height: 0;
-  white-space: 0px;
-  font-variant-position: super;
-  font-size: 10px;
+  font-size: 12px;
+  font-family: var(--sans);
   text-indent: 0px;
-  position: relative;
-  top: -2px;
   margin-left: 2px;
 }
 .pagedjs_footnote[data-footnote-call]::after {
   font-variant-position: normal;
+  content: attr(data-counter-footnote-increment) "}";
+}
+.pagedjs_footnote[data-footnote-call]::before {
+  content: "{";
+}
+
+[data-footnote-marker]::marker {
+  content: "{" counter(footnote-marker) "} ";
 }
 
 .chapter-header {
   margin-top: calc(var(--baseline) * 2);
-  margin-bottom: calc(var(--baseline) * 9);
+  margin-bottom: calc(var(--baseline) * 3);
   --color: black;
 }
 
@@ -426,15 +424,16 @@ body {
 }
 
 .chapter-header h2 {
-  font-size: 40px;
-  line-height: 0.9;
+  font-size: 46px;
+  line-height: 1.1;
+  font-family: var(--font);
   font-family: var(--mono);
   color: var(--blue);
   margin-bottom: calc(var(--baseline) * 1);
   text-align: left;
   font-weight: normal;
-  padding-right: 3ch;
   color: var(--color);
+  text-align: center;
 }
 
 .chapter-header .type {
@@ -444,10 +443,10 @@ body {
 
 .chapter-header .bio {
   margin-top: calc(var(--baseline) * 3);
-  font-family: var(--mono);
+  font-family: var(--sans);
   hyphens: none;
+  line-height: 1.3;
   font-size: 12px;
-  line-height: 1.2;
 }
 .chapter-header .bio .name {
   text-indent: 0;
@@ -461,22 +460,27 @@ body {
   text-align: left;
   font-weight: normal;
   color: var(--color);
+  hyphens: none;
 }
 
 .chapter-header .author {
   left: 0px !important;
-  font-size: 24px;
+  font-size: 26px;
+  line-height: 0.9;
   font-weight: normal;
   line-height: 1;
-  font-family: var(--font);
-  text-align: left;
+  font-family: var(--mono);
+  text-align: center;
   text-indent: 0;
-  text-indent: 14mm;
   color: var(--color);
+  margin-top: calc(var(--baseline) * 3);
+  -webkit-text-decoration: underline 1px;
+          text-decoration: underline 1px;
+  text-underline-offset: 2px;
 }
 
 .item-decor {
-  font-family: var(--font);
+  font-family: var(--sans);
   font-weight: 400;
   font-size: 12px;
   position: absolute;