change font

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

@@ -3,6 +3,9 @@
     --font: 'Routed Gothic', sans-serif;
     --font: 'Wagram Slab', serif;
     --font: 'Bilzig', serif;
+     --font: 'Routed Gothic', sans-serif;
+
+
     /* --font: 'HAL Timezone', serif; */
     --mono: 'Selectric Mono', monospace;
     --mono: 'Ivory Mono', monospace;
@@ -12,11 +15,20 @@
 
     --font-decor: 'Decor Round Random';
 
-    /* --mono: 'HAL Timezone Mono', monospace; */
+    --font-notes: 'Selectric Mono', monospace;
+    --font-notes: 'Baskemo Sans', monospace;
+    
+
 
      --font-sans: 'Routed Gothic', serif;
-    /* --font-sans: 'Routed Gothic Wide', serif; */
-    /* --note: 'Wagram Slab', serif; */
+
+
+    --font-subtitle: 'Routed Gothic Wide', sans-serif;
+     /* --font-subtitle: 'Baskemo Sans', monospace; */
+
+     --font-nav: 'Routed Gothic', sans-serif;
+
+
     --title: 'HNoailles Times Triplex', sans-serif;
 
     --red: #9B0000;
@@ -30,10 +42,12 @@
 
     --indent: 7mm;
 
-    --font-size: 18px;
-    --baseline: 24px;
+    --font-size: 14px;
+    --baseline: 18px;
 
-    --fs-nav: 12px;
+    --fs-nav: 11px;
+    --fs-subtitle: 11px;
+    --fs-notes: 11px;
 
     --unit: 20px;
     --gap: 8px;

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

@@ -7,11 +7,13 @@
     bleed: 6mm;
     marks: crop;
 
+        margin-left: 28mm;
+    margin-right: 16mm;
+
   }
 
   @page:left {
-    margin-left: 26mm;
-    margin-right: 18mm;
+
 
      @top-left{
           content: element(navDecor);
@@ -20,7 +22,7 @@
 
       @bottom-center {
       content: counter(page);
-      font-family: var(--mono);
+      font-family: var(--font-title);
       font-size: 20px;
       vertical-align: bottom;
       padding-bottom: 8mm;
@@ -31,8 +33,8 @@
   }
 
   @page:right {
-    margin-left: 18mm;
-    margin-right: 26mm;
+    /* margin-left: 18mm;
+    margin-right: 26mm; */
 
      @top-left{
           content: element(nav);
@@ -40,7 +42,7 @@
 
     @bottom-center {
       content: counter(page);
-      font-family: var(--mono);
+      font-family: var(--font-title);
       font-size: 20px;
       vertical-align: bottom;
       padding-bottom: 8mm;
@@ -106,25 +108,39 @@
 .running-nav ul{
   
     display: flex;
-    gap: var(--gap);
+    gap: calc(var(--unit)*4);
     list-style: none;
 
 }
 
 .running-nav-decor li, 
 .running-nav li{
-   font-family: var(--mono);
-  font-size: var(--fs-nav);
+   font-family: var(--font-nav);
+  font-size: 10px;
+  line-height: 10px;
+  padding-left: 6ch;
+  max-width: 24ch;
+  text-align: center;
+  position: relative;
+  /* color: var(--blue); */
+  /* text-transform: lowercase;
   border: var(--border-grey);
-  font-size: var(--fs-nav);
   line-height: 1;
   padding: 4px 1ch;
   min-height: var(--unit);
   font-weight: normal;
+  max-width: 24ch; */
 
 }
 
-.running-nav-decor ul li.nav-title,
+.running-nav-decor li::before, 
+.running-nav li::before{
+  content: ">";
+  position: absolute;
+  left: 0px;
+}
+
+/* .running-nav-decor ul li.nav-title,
 .running-nav ul li.nav-title{
   flex-grow: 2;
 }
@@ -151,7 +167,7 @@
 .running-nav ul li.nav-author{
   flex: 0 0 auto; /* taille fixe */
 }
-
+ */
 
 
 .running-nav-decor ul li.nav-chevron{

maquette-tests/assets/css/notes.css

@@ -1,6 +1,6 @@
 .following-note {
-    font-family: var(--font-sans);
-    font-size: 12px;
+    font-family: var(--font-notes);
+    font-size: var(--fs-notes);
     line-height: 14px;
     font-weight: 500;
 
@@ -32,7 +32,7 @@
         content: "}"
     }
 
-    font-family: var(--font-sans);
+    font-family: var(--font-notes);
     font-weight: 500;
     font-size: 12px;
 }

maquette-tests/assets/css/text.css

@@ -13,6 +13,7 @@
 p + p{
     text-indent: 30%;
     position: relative;
+    /* text-indent: -6ch; */
  
 }
 
@@ -42,8 +43,11 @@ h3, h4{
     break-after: avoid;
 }
 h3, h4{
-  font-family: var(--mono);
-  font-size: var(--fs-nav);
+    font-weight: normal;
+    font-size: 14px;
+    font-family: var(--font-notes);
+  /* font-family: var(--font-subtitle);
+  font-size: var(--fs-subtitle);
   background-color: var(--grey);
   font-size: var(--fs-nav);
   line-height: 1;
@@ -51,9 +55,24 @@ h3, h4{
   min-height: var(--unit);
   margin-top: calc(var(--baseline)*1.5);
    margin-bottom: calc(var(--baseline)*0.5);
-  font-weight: normal;
+  font-weight: normal; */
+  padding-left: 1.5ch;
+   margin-top: calc(var(--baseline)*0.5);
+    margin-bottom: calc(var(--baseline)*0.5);
 }
 
+h3::before,
+h3::after{
+    content: "+--------------------------------------------------------+";
+    display: block;
+    /* font-family: monospace; */
+        position: relative;
+    left: -1.5ch;
+    width: calc(100% + 1.5ch);
+}
+
+
+
 h4{
     border: var(--border-grey);
     background: none;
@@ -67,7 +86,7 @@ blockquote{
     padding-left: 3ch;
     /* font-style: italic; */
 
-    margin-top: calc(var(--baseline)*0..5);
+    margin-top: calc(var(--baseline)*0.5);
     margin-bottom: calc(var(--baseline)*0.5);
      
        

maquette-tests/index.html

@@ -62,7 +62,7 @@
         <div class="running-nav">
             <ul>
             <li class="nav-author">Olivain Porry</li>
-            <li class="nav-title">Un robot-poète ne&nbsp;nous fait toujours pas peu</li>
+            <li class="nav-title">Un robot-poète ne&nbsp;nous fait toujours pas peur</li>
             </ul>
         </div>
         <div class="chapter-header">