displaying pageBreaks

assets/css/app.scss

@@ -402,6 +402,7 @@ section[role="main-content"]{
 
   #text{
     .tei{
+      width: 93%;
       h1{
         font-size: 1.512em;
       }
@@ -429,6 +430,35 @@ section[role="main-content"]{
         }
       }
     }
+    // <span role=\"pageBreak\" data-num=\"15\"></span>
+    span[role="pageBreak"]{
+      display:block;
+      position: relative;
+      $w:3em;
+      width:$w; height:0;
+      margin-left:calc(100% - (#{$w} * 0.5));
+      &:before, &:after{
+        display: block;
+        position: absolute;
+        font-size: 0.630em;
+        width:$w; height:$w;
+        line-height: $w *0.95;
+        padding-left: 1em;
+        border-right: 1px solid $bleuroilight;
+        color: $bleuroi;
+        text-indent: $w + 0.5em;
+      }
+      &:before{
+        content:attr(data-num-prev);
+        border-bottom: 1px solid $bleuroilight;
+        bottom: 0.1em;
+      }
+      &:after{
+        content:attr(data-num);
+        border-top: 1px solid $bleuroilight;
+        top:0.1em;
+      }
+    }
   }
 
 

assets/css/base/_colors.scss

@@ -1,4 +1,5 @@
 $bleuroi: rgb(61,82,102);
+$bleuroilight: lighten(rgb(61,82,102), 30%);
 $gris: rgb(200,204,204);
 $grisclair: rgb(230,234,234);
 $grisfonce: rgb(57,57,64);