add Teletext

maquette-tests/README.md

@@ -14,4 +14,7 @@ Choses que je n’ai pas automatisées:
 **TO-DO**
 
 - Régler les hypens 
-- ajouter des `<wbr>’aux liens
+- ajouter des `<wbr>’aux liens
+- ajouter des `+` devant les points dans les blockquote comme dans les bibliogaphies
+- attention le «œ» de Routed Gothic Wide
+- pas d’accents pour les typo Teletex

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

@@ -143,19 +143,8 @@
 
 
 
-  .chapter {
-    break-before: right;
-    page: chapter;
-  }
 
 
-  @page chapter:first {
-    @top-right {
-      content: none;
-    }
-
-  }
-
   @page:blank {
     @top-left {
       content: none;

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

@@ -1,15 +1,120 @@
 
+  .chapter {
+    break-before: right;
+    page: chapter;
+  }
+
+
+  @page chapter:first {
+    /* background-color: var(--blue); */
+    /* color: white!important; */
+      @top-left-corner {
+         content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
+        /* color: white; */
+    }
+      @top-left {
+      content: none;
+    }
+       @top-center {
+      content: none;
+    }
+    @top-right {
+      content: none;
+    }
+
+  }
+
 
 .chapter-header {
   position: relative;
-  /* font-family: var(--font-title); */
+
-  font-size: 36px;
+  /* break-after: page; */
-  line-height: 1;
+
-  break-after: page;
 
   
 }
 
+.chapter-header .hgroup{
+    /* font-family: 'Routed Gothic Wide'; */
+  font-size: 22px;
+  line-height: 1;
+  font-weight: normal;
+  /* text-align: center; */
+  margin-top: calc(var(--baseline)*2);
+  margin-bottom: calc(var(--baseline)*4);
+  margin-right: calc(var(--unit)*2);
+
+}
+
+.chapter-header .type{
+  color: var(--blue);
+       font-family: 'Teletext';
+      font-weight: 200;
+    /* font-size: 22px; */
+  line-height: 1;
+  font-weight: normal;
+  text-transform: uppercase;
+  /* text-decoration: underline;
+  text-underline-offset: 2px; */
+
+}
+
+.chapter-header .type::before{
+  display: none;
+}
+
+.chapter-header .hgroup h2{
+    font-weight: normal;
+      font-size: 1em;
+      display: inline;
+      line-height: 1.3;
+      box-sizing: border-box;
+
+      font-family: 'Teletext';
+      font-weight: 200;
+      text-align: center;
+  
+
+    /* text-transform: uppercase; */
+}
+
+.chapter-header .hgroup h2 span{
+  color: white;
+  padding-left: 0.25ch;
+  padding-right: 0.25ch;
+  box-decoration-break: clone;
+  background-color: var(--blue);
+  padding: 2px 0.25ch;
+   /* background: linear-gradient(var(--blue), var(--blue)) center / 100% 70% no-repeat; */
+   text-transform: uppercase;
+}
+
+
+.chapter-header .author{
+      font-family: 'Teletext';
+      font-weight: 200;
+      color: var(--blue);
+        margin-top: calc(var(--baseline)*1);
+         text-transform: uppercase;
+}
+
+.chapter-header .hgroup h2::after{
+  /* content: "| | | | |  "; 
+  font-size: var(--sign-size);
+     color: var(--blue);
+     letter-spacing: var(--sign-spacing);
+     line-height: var(--sign-baseline);
+     display: block;
+     width: 1ch;
+     text-align: center;
+     margin-left: calc(var(--unit)*0.5); */
+
+}
+
+.chapter-header .author::before{
+  display: none;
+}
+
 
 .chapter-header .bio{
   display: none;

maquette-tests/assets/css/text.css

@@ -1,4 +1,4 @@
-.chapter p{
+.chapter p {
     text-align: justify;
     hyphens: auto;
     hyphenate-limit-chars: 8 3;
@@ -6,62 +6,61 @@
     orphans: 2;
     hyphens: 2;
 
-  
+
 }
 
 
 
 
 
-p::before{
+p::before {
-    content: "...........";   
+    content: "...........";
     font-size: var(--sign-size);
-     color: var(--sign-color);
+    color: var(--sign-color);
-     letter-spacing: var(--sign-spacing);
+    letter-spacing: var(--sign-spacing);
-     line-height: var(--sign-baseline);
+    line-height: var(--sign-baseline);
-     position: relative;
+    position: relative;
-     top: -3px;
+    top: -3px;
-     padding-right: 8px;
+    padding-right: 8px;
-     /* position: absolute;
-     left: 0; */
 }
 
-.following-h3::before{
+.following-h3::before {
-   display: none!important;
+    display: none !important;
 }
 
 
-.bibliographie p{
 
-     font-size: var(--fs-notes);
+
+
+/* BILBIOGRAPHIE */
+
+.bibliographie p {
+    font-size: var(--fs-notes);
     line-height: 14px;
     font-weight: 500;
     text-align: left;
     padding-left: calc(var(--unit)*2);
     text-indent: calc(var(--unit)*-0.75);
-
+    break-inside: avoid;
- 
 }
 
-.bibliographie p::before{
+.bibliographie p::before {
-     content: ".......";   
+    content: "......";
     position: absolute;
     left: calc(var(--unit)*0.75);
+    left: calc(var(--unit)*0.75 + 16px);
     top: -6px;
-    display: block!important;
+    display: block !important;
 }
 
 
-
+.bibliographie p::after {
-
+    content: "+";
-  
+    position: absolute;
-
+    left: calc(var(--unit)*0.75);
-
+    top: -2px;
-/* .chapter > :first-child{
+    font-size: var(--sign-size);
-    margin-top: 0px;
+    color: var(--sign-color);
-}
+    letter-spacing: var(--sign-spacing);
-
+    line-height: var(--sign-baseline);
-
+}
-
-
- */

maquette-tests/assets/fonts/Teletext/stylesheet.css

@@ -0,0 +1,40 @@
+
+@font-face {
+    font-family: 'Teletext';
+    src: url('MODE7GX0.TTF') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Teletext';
+    src: url('MODE7GX1.TTF') format('truetype');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Teletext';
+    src: url('MODE7GX2.TTF') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Teletext';
+    src: url('MODE7GX3.TTF') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Teletext';
+    src: url('MODE7GX4.TTF') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}

maquette-tests/index.html

@@ -27,8 +27,9 @@
     <link rel="stylesheet" type="text/css" href="/assets/fonts/BaskemoSans/stylesheet.css">
     <link rel="stylesheet" type="text/css" href="/assets/fonts/Bilzig/stylesheet.css">
     <link rel="stylesheet" type="text/css" href="/assets/fonts/DecorRound/stylesheet.css">
-        <link rel="stylesheet" type="text/css" href="/assets/fonts/OCR-X/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/OCR-X/stylesheet.css">
-
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/Velvetyne/stylesheet.css">
+ <link rel="stylesheet" type="text/css" href="/assets/fonts/Teletext/stylesheet.css">
 
 </head>
 
@@ -114,7 +115,7 @@
             l’apparition de vocables qui circulent, se répètent et se diffusent dans
             nos imaginaires. Parmi eux, un mot en particulier cristallise ces
             tensions : le mot « arafed ».</p>
-        <h3 class="subtitle-top-page">Une sociolinguisitique arafed</h3>
+        <h3 class="">Une sociolinguisitique arafed</h3>
         <p>C’est à l’occasion du Chaos Computer Congress, dans l’une des grandes
             salles de conférence du centre des congrès de Hambourg, que le terme «
             arafed » est décrit par deux chercheurs<a href="#fn2" class="footnote-ref" id="fnref2"