grid column

css/style.css

@@ -31,15 +31,19 @@ body {
   line-height: var(--baseline);
 }
 
+:root {
+  --unit: 20.2857142857mm;
+}
+
 @media print {
   @page {
     size: 176mm 240mm;
-    margin-top: 6mm;
-    margin-bottom: 20mm;
+    margin-top: 10mm;
+    margin-bottom: 14mm;
   }
   @page :left {
-    margin-left: 6mm;
-    margin-right: 12mm;
+    margin-left: 14mm;
+    margin-right: 20mm;
     @bottom-left {
       content: counter(page);
       font-family: var(--font-sans);
@@ -55,8 +59,10 @@ body {
     }
   }
   @page :right {
-    margin-left: 12mm;
-    margin-right: 6mm;
+    margin-left: 20mm;
+    margin-right: 14mm;
+    background-image: url("/images/layout-1_20.png");
+    background-size: 100% 100%;
     @bottom-left {
       content: string(chapterCount);
       font-family: var(--font-sans);
@@ -178,8 +184,8 @@ body {
     }
   }
   @page chapter {
-    margin-left: 6mm;
-    margin-right: 6mm;
+    margin-left: 14mm;
+    margin-right: 14mm;
     @top-left-corner {
       content: none;
     }
@@ -240,15 +246,6 @@ body {
        break-before: page;
 }
 
-#section__content {
-  -moz-columns: 2;
-       columns: 2;
-  -moz-column-gap: 4mm;
-       column-gap: 4mm;
-  -moz-column-fill: auto;
-       column-fill: auto;
-}
-
 #section__content h1 {
   -moz-column-break-before: left;
        break-before: left;
@@ -287,7 +284,9 @@ p {
   text-align: justify;
   orphans: 2;
   widows: 2;
-  margin-left: 10mm;
+  position: relative;
+  top: -2px;
+  padding-left: calc(var(--unit) * 3);
 }
 
 p, li {
@@ -335,19 +334,14 @@ ul {
 
 ol[type="1"] {
   list-style-type: none;
-  position: relative;
   -moz-column-break-after: avoid;
        break-after: avoid;
-  width: 10mm;
   position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  left: calc(var(--unit) * 2);
 }
 ol[type="1"]::after {
   content: attr(start);
   display: block;
-  position: absolute;
   font-size: var(--fs-small);
   opacity: 0.5;
 }
@@ -358,13 +352,13 @@ ol[type="1"].ol-clone {
   -moz-column-break-after: avoid;
        break-after: avoid;
   top: 0;
-  left: 81mm;
+  left: 73mm;
 }
 
 #section__content h1 {
   -moz-column-span: all;
        column-span: all;
-  height: 213mm;
+  height: 215mm;
 }
 #section__content h2::before, #section__content h3::before, #section__content h4::before, #section__content h5::before, #section__content h6::before {
   content: attr(data-counter);
@@ -499,32 +493,6 @@ ol[type="1"].ol-clone {
   color: red;
 }
 
-.container-following-note {
-  font-family: var(--font-sans);
-  font-size: var(--fs-small);
-  line-height: calc(var(--baseline) * 0.75);
-  position: relative;
-  margin-top: 2px;
-  hyphens: auto;
-  hyphenate-limit-chars: 7 3 4;
-  hyphenate-limit-lines: 2;
-  hyphenate-limit-zone: 8%;
-  word-spacing: -0.004em;
-  text-align: justify;
-}
-
-.following-note_marker::after {
-  content: ". ";
-}
-
-.following-note_call {
-  font-family: var(--font-sans);
-  font-size: var(--fs-small);
-  line-height: 1;
-  position: relative;
-  top: -4px;
-}
-
 #toc_container {
   -moz-column-break-before: page;
        break-before: page;