projet: améliore le projet

- Améliore l'usage des polices, pour se passer de TheSans.
- Utilise une version des scripts JS servis par le projet.
- Ajoute la classe `.newpage` à la liste des sélecteurs provoquant un
  saut de page.
- Crée la classe `.exercise` pour mettre en avant les sections
  d'exercice.

Co-Authored-by: iGor milhit <igor@milhit.ch>

.gitignore

@@ -2,3 +2,4 @@ example.html
 example.pdf
 test.*
 release/
+watched-files.txt

example/example.md

@@ -31,10 +31,11 @@ Au terme de cet atelier, vous serez en mesure de :
  
 
 :::{#licence}
-![Logo de la licence CC BY-SA 4.0](../static/by-sa.svg) \
+![Logo de la licence CC BY-SA 4.0][logo] \
 [CC BY-SA 4.0][cc-by-sa] --- [Sources][sources]
 :::
 
+[logo]: ../static/by-sa.svg
 [cc-by-sa]: https://creativecommons.org/licenses/by-sa/4.0/deed.fr "Texte de la licence en français"
 [sources]: https://git.milhit.ch/igor/bunige-pagedjs-template
 
@@ -123,16 +124,20 @@ par exemple un livre.</p>
 
 ## Police
 
-Pour que la police *TheSans* puisse s'appliquer correctement, elle doit être
-installée sur votre système d'exploitation. Malheureusement, elle n'est pas
-publiée avec une licence libre, ce qui en réduit l'usage. Les polices de
-remplacement sont dans l'ordre *Open Sans*, *Arial*, *Helvetica*, ou la police
+Bien que la police *TheSans* face partie de la charte de l'UNIGE et de la
+Bibliothèque de l'Université, je trouve qu'elle n'est pas des plus lisible,
+notamment sur les titres. De plus, la licence de cette police, sauf erreur,
+n'est pas libre, ce qui en limite l'usage. C'est pourquoi je préfère spécifier
+ici les polices *Noto Sans*, *Open Sans*, *Arial*, *Helvetica*, ou la police
 *sans-serif* par défaut de votre système ou de votre navigateur.
 
 La police peut être facilement configurable au moyen du sélecteur `body` dans
 le fichier `style.css` (règle déjà existante, dans la section *Définitions
 globales*).
 
+Pour les éléments verbatim (`pre`, `code`), la police est *Lilex*, *Courier
+New*, *Courier*, *monospace*.
+
 ## Titres
 
 Il y a une particularité avec les titres, qui découlent de l'usage de

reload-in-place.js

@@ -0,0 +1,117 @@
+// Reload-in-place v2.0
+// Nicolas Taffin + Sameh Chafik - 2020
+// MIT License https://opensource.org/licenses/MIT
+// A simple script to add your pagedjs project. On reload, it will make the web browser scroll to the place it was before reload. 
+// Useful when styling or proof correcting your book. Multi docs compatible and doesn't wait for complete compilation to go.
+
+
+console.log("reload in place");
+
+
+// separate human / machine scroll
+var machineScroll = false;
+
+// check pagedJS ended compilation
+var pagedjsEnd = false;
+
+class pagedjsEnded extends Paged.Handler {
+    constructor(chunker, polisher, caller) {
+        super(chunker, polisher, caller);
+    }
+    afterRendered(pages) {
+        pagedjsEnd = true;
+    }
+}
+Paged.registerHandlers(pagedjsEnded);
+
+// set a "unique" filename based on title element, in case several books are opened
+var fileTitle = document.getElementsByTagName("title")[0].text;
+
+function getDocHeight() {
+    var D = document;
+    return Math.max(
+        D.body.scrollHeight, D.documentElement.scrollHeight,
+        D.body.offsetHeight, D.documentElement.offsetHeight,
+        D.body.clientHeight, D.documentElement.clientHeight
+    )
+}
+function saveAmountScrolled(){
+    var scrollArray = [];
+    var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
+    if (!machineScroll) {
+        var scrollLeft = window.pageXOffset || (document.documentElement || document.body.parentNode || document.body).scrollLeft
+        scrollArray.push({ X: Math.round(scrollLeft), Y: Math.round(scrollTop) });
+        console.log("Saved ", scrollArray);
+        localStorage[fileTitle] = JSON.stringify(scrollArray);
+    }
+}
+
+// on Load, blur or opacify the page, and try to join ASAP 
+// last saved position, or at least last compiled page
+
+
+window.onload = moveFast;
+
+function moveFast() {
+    machineScroll= true;
+    var styleEl = document.createElement('style');
+    document.head.appendChild(styleEl);
+    var styleSheet = styleEl.sheet;
+    styleSheet.insertRule('.pagedjs_pages { filter: blur(10px); }', 0); 
+    //styleSheet.insertRule('.pagedjs_pages { opacity: 0.1; }', 0); 
+    var savedData = localStorage.getItem(fileTitle);
+    if (savedData) {
+        var scrollArray = JSON.parse(savedData);
+        var scrollTop = scrollArray[0].Y;
+        var scrollLeft = scrollArray[0].X;
+    } else {
+        var scrollTop = 0;
+        var scrollLeft = 0;
+    }
+    var winheight= window.innerHeight || (document.documentElement || document.body).clientHeight
+    window.currentInterval = setInterval(function(){
+        var docheight = getDocHeight();
+        
+        if ( scrollTop > 0 && scrollTop > docheight - winheight && !pagedjsEnd) {  
+            window.scrollTo(scrollLeft,docheight);
+        } else {
+            window.scrollTo(scrollLeft,scrollTop);
+            clearInterval(window.currentInterval);
+            setTimeout(function(){ 
+                window.scrollTo(scrollLeft,scrollTop);
+                machineScroll = false;
+                styleSheet.deleteRule(0);
+            }, 500); // Delay to start
+        }
+    }, 50); // refresh frequency
+};
+
+// slow down a bit save position pace
+
+var slowSave = debounce(function() {
+	if(!machineScroll) { 
+        saveAmountScrolled();
+    }
+}, 100); // save frequency
+
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		var later = function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		};
+		var callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow) func.apply(context, args);
+	};
+};
+
+// Scroll triggers save, but not immediately on load
+
+setTimeout(function(){ 
+    window.addEventListener('scroll', slowSave);
+}, 1000); // wait a bit before starting position save
+

style.css

@@ -28,7 +28,7 @@
          * bibliothèque de l'UNIGE. */
         @top-right {
                 content: "";
-                background-image: url("./static/bibliotheque-logo.svg");
+                background-image: url("static/bibliotheque-logo.svg");
                 background-position: right;
                 background-repeat: no-repeat;
                 background-size: 25%;
@@ -56,7 +56,8 @@
      * ************************ */
 
     body {
-        font-family: "TheSansOsF", "Open Sans", Arial, Helvetica, sans-serif;
+        font-family: "Noto Sans", "Open Sans",
+                     Arial, Helvetica, sans-serif;
         /* Définit les trois variables de compteur nécessaires */
         counter-reset: figureNumber toc tableNumber;
     }
@@ -132,6 +133,7 @@
      * dans la source markdown. */
     #first-section,
     #bibliography,
+    .newpage,
     .footnotes {
         break-before: page;
     }
@@ -158,8 +160,9 @@
         padding: none;
     }
     code {
-        font-family:'Courier New', Courier, monospace;
+        font-family: 'Lilex Nerd Font', 'Courier New', Courier, monospace;
         font-size: 90%;
+        line-height: 1.4;
         background-color: #f2f1f1;
         padding: 2px;
         border-radius: 5px;
@@ -173,6 +176,12 @@
     }
     .footnote-ref {
         text-decoration: none;
+        padding-left: 2px;
+    }
+    .footnote-back {
+        font-size: small;
+        text-decoration: none;
+        padding-left: .5em;
     }
 
     figure {
@@ -198,6 +207,15 @@
         content: "Figure " counter(figureNumber) " : ";
     }
 
+    .exercise {
+        background-color: #f2f1f1;
+        width: 90%;
+        margin: 0 auto;
+        border: 2px solid #d80669;
+        border-radius: .5em;
+        padding: 0 .5em;
+    }
+
     blockquote {
         font-style: italic;
     }

template.html

@@ -27,7 +27,8 @@ $for(css)$
   <link rel="stylesheet" href="$css$" />
 $endfor$
   <link href="/interface.css" rel="stylesheet" type="text/css" />
-  <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
+  <script src="/paged.polyfill.js"></script>
+  <script src="/reload-in-place.js"></script>
 $for(header-includes)$
   $header-includes$
 $endfor$