subtitles symbols

maquette-tests/assets/css/01_var.css

@@ -6,6 +6,10 @@
      --font: 'Routed Gothic', sans-serif;
 
 
+
+     --font-title: 'OCR-X';
+
+
     /* --font: 'HAL Timezone', serif; */
     --mono: 'Selectric Mono', monospace;
     --mono: 'Ivory Mono', monospace;
@@ -17,6 +21,8 @@
 
     --font-notes: 'Selectric Mono', monospace;
     --font-notes: 'Baskemo Sans', monospace;
+    --font-notes: 'OCR-X';
+
     
 
 
@@ -53,4 +59,11 @@
     --gap: 8px;
 
 
+    --sign-size: 16px;
+      --sign-baseline: 18px;
+    --sign-spacing: 0.4rem;
+    --sign-color: var(--red);
+  
+
+
 }

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

@@ -7,13 +7,13 @@
     bleed: 6mm;
     marks: crop;
 
-    margin-left: 33mm;
-    margin-right: 11mm;
+
 
   }
 
   @page:left {
-
+    margin-left: 18mm;
+    margin-right: 26mm;
 
     @top-left {
       content: element(decor);
@@ -47,9 +47,8 @@
   }
 
   @page:right {
-    /* margin-left: 18mm;
-    margin-right: 26mm; */
-
+       margin-left: 26mm;
+    margin-right: 18mm;
 
     @top-left {
       content: element(type);

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

@@ -2,11 +2,21 @@
 
 .chapter-header {
   position: relative;
+  font-family: var(--font-title);
+  font-size: 36px;
+  line-height: 1;
+  break-after: page;
+
+  
 }
 
 
+.chapter-header .bio{
+  display: none;
+}
 
-.chapter-header p {
+
+/* .chapter-header p {
   text-indent: 0px !important;
 }
 
@@ -20,14 +30,7 @@
 
 
 .chapter-header .hgroup{
-  /* margin-top: var(--gap);
-    border-left: var(--unit) solid var(--grey);
-     border-left: var(--unit) solid var(--grey);
-    padding-left:  var(--gap);
 
-
-     display: flex;
-     flex-direction: column; */
      margin-left: 15%;
 
 }
@@ -49,24 +52,7 @@
     margin-top: calc(var(--baseline)*6);
        margin-bottom: calc(var(--baseline)*2);
 
-   /* background-color: black;
-   color: white;
 
-  font-family: var(--mono);
-  font-size: var(--fs-nav);
-  text-align: center;
- 
-  font-size: var(--fs-nav);
-  line-height: 1;
-  padding: 4px 1ch;
-   font-weight: normal;
-
-  height: var(--unit);
-   margin-bottom: 0; */
-
-   /* display: inline-block;
-   margin-inline: auto;
-   margin-top: calc(var(--baseline)*1); */
  
 }
 
@@ -76,16 +62,4 @@
 
 .chapter-header{
    margin-bottom: calc(var(--baseline)*1);
-}
-
-.chapter-header:after{
-  /* content: "";
-  display: block;
-  margin-top: var(--gap);
-
-
-  border-top: 2px dashed var(--grey);
-
-  margin-bottom: calc(var(--baseline)*1); */
-
-}
+} */

maquette-tests/assets/css/subtitles.css

@@ -0,0 +1,62 @@
+h3, h4{
+    break-after: avoid;
+}
+h3, h4{
+    font-weight: normal;
+   margin-top: calc(var(--baseline)*0.5);
+    margin-bottom: calc(var(--baseline)*0.5);
+    font-size: var(--font-size);
+    position: relative;
+   font-size: var(--sign-size);
+     color: var(--sign-color);
+}
+
+
+.h3-before,
+.h3-after{
+
+    letter-spacing:var(--sign-spacing);
+    font-size: var(--sign-size);
+        color: var(--sign-color);
+        line-height: var(--sign-baseline);
+}
+
+.h3-before{
+    padding-right: 0.75ch;
+}
+
+.h3-after{
+    padding-left: 0.75ch;
+}
+
+.decor-h3{
+     font-size: var(--sign-size);
+     color: var(--sign-color);
+     letter-spacing: var(--sign-spacing);
+     line-height: var(--sign-baseline);
+     position: absolute;     
+}
+
+
+
+
+.decor-h3_small{
+    left: -16mm;
+}
+
+
+ .decor-h3_small div{
+        position: relative;
+        top: calc(var(--baseline)*-2);
+}
+
+.decor-h3_big{
+    right: -22mm;
+    text-align: right;
+}
+
+
+ .decor-h3_big div{
+        position: relative;
+        top: calc(var(--baseline)*-5);
+}

maquette-tests/assets/css/text.css

@@ -17,60 +17,6 @@ p + p{
  
 }
 
-p::before{
- /* content: ">";
- position: absolute;
- left: 0;
- font-family: var(--mono);
- font-weight: normal;
- font-size: var(--fs-nav); */
-
- /* display: block;
- width: var(--unit);
- height: var(--unit);
- background-color: var(--grey);
- top: 2px;
- display: flex;
- align-items: center; */
- /* justify-content: center; */
-}
-
-
-
-
-
-h3, h4{
-    break-after: avoid;
-}
-h3, h4{
-    font-weight: normal;
-    /* font-size: 14px; */
-    font-family: var(--font-subtitle);
-  /* font-family: var(--font-subtitle);
-  font-size: var(--fs-subtitle);
-  background-color: var(--grey);
-  font-size: var(--fs-nav);
-  line-height: 1;
-  padding: 4px 1ch;
-  min-height: var(--unit);
-  margin-top: calc(var(--baseline)*1.5);
-   margin-bottom: calc(var(--baseline)*0.5);
-  font-weight: normal; */
-  /* padding-left: 1.5ch; */
-   margin-top: calc(var(--baseline)*1.5);
-    margin-bottom: calc(var(--baseline)*0.5);
-    padding-left: 30%;
-}
-
-h3::before,
-h3::after{
-    /* content: "+------------------------------------------------+";
-    display: block;
-        position: relative;
-    left: -1.5ch;
-    width: calc(100% + 1.5ch); */
-}
-
 
 
 h4{

maquette-tests/assets/fonts/OCR-X/stylesheet.css

@@ -1,13 +1,54 @@
 @font-face {
-    font-family: "OCR X";
-    src: url("OCR-XTrial-VariableVF.ttf") format("truetype");
-    font-weight: 10 220;
+    font-family: 'OCR-X';
+    src: url('OCR-X-Bold.woff2') format('woff2'),
+        url('OCR-X-Bold.woff') format('woff');
+    font-weight: bold;
     font-style: normal;
-  }
-  
-  @font-face {
-    font-family: "OCR X";
-    src: url("OCR-XTrial-VariableVF.woff2") format("woff2");
-    font-weight: 10 220;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'OCR-X';
+    src: url('OCR-X-Black.woff2') format('woff2'),
+        url('OCR-X-Black.woff') format('woff');
+    font-weight: 900;
     font-style: normal;
-  }
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'OCR-X';
+    src: url('OCR-X-Light.woff2') format('woff2'),
+        url('OCR-X-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'OCR-X';
+    src: url('OCR-X-Regular.woff2') format('woff2'),
+        url('OCR-X-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'OCR-X';
+    src: url('OCR-X-Medium.woff2') format('woff2'),
+        url('OCR-X-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'OCR-X';
+    src: url('OCR-X-Thin.woff2') format('woff2'),
+        url('OCR-X-Thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+

maquette-tests/assets/fonts/OCR-X_trial/stylesheet.css

@@ -0,0 +1,13 @@
+@font-face {
+    font-family: "OCR X";
+    src: url("OCR-XTrial-VariableVF.ttf") format("truetype");
+    font-weight: 10 220;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: "OCR X";
+    src: url("OCR-XTrial-VariableVF.woff2") format("woff2");
+    font-weight: 10 220;
+    font-style: normal;
+  }