#21

_includes/footer.html

@@ -5,6 +5,8 @@
 		<span>• <a href="https://gitlab.poul.org/sito/poul-jekyll">Source code</a></span>
 		<span class="desktop-only">• <a href="#" id="fix-sotto-storto-link"
 										onclick="fixSottoStortoCit(); return false;">Fix rotation</a></span>
+		<span>• <a href="#" id="fix-open-dyslexic-link"
+										onclick="fixOpenDyslexic(); return false;">Enable futuristic font</a></span>
 	</div>
 	<div class="socials">
 		{% if site.social.telegram %}

_includes/head.html

@@ -79,4 +79,9 @@
 	<link rel="stylesheet" href="{{ '/site/assets/vendor/leaflet@1.6.0/leaflet.css' | static_url }}"/>
 	<!-- Make sure you put this AFTER Leaflet's CSS -->
 	<script src="{{ '/site/assets/vendor/leaflet@1.6.0/leaflet.js' | static_url }}"></script>
+
+	<script>
+		// share the static_url with js
+		const static_url = "{{ '' | static_url }}"
+	</script>
 </head>

assets/js/scripts.js

@@ -26,3 +26,36 @@ function fixSottoStortoCit() {
     link.text = "Lol no, put it back";
   }
 }
+
+
+// opendyslexic mod
+var __opendyslexic_loaded = false
+function fixOpenDyslexic() {
+    if(!__opendyslexic_loaded){
+        var od_font = document.createElement('style');
+        const font_path_regular = static_url + 'site/assets/fonts/opendyslexic/compiled/OpenDyslexic-Regular.otf';
+        const font_path_bold = static_url + 'site/assets/fonts/opendyslexic/compiled/OpenDyslexic-Bold.otf';
+        const font_path_italic = static_url + 'site/assets/fonts/opendyslexic/compiled/OpenDyslexic-Italic.otf';
+
+        od_font.appendChild(document.createTextNode(
+            // font-face
+        `@font-face { font-family: OpenDyslexic; src: url('${font_path_regular}') format('opentype'); }\n`
+            + `@font-face { font-family: OpenDyslexic; font-weight: bold; src: url('${font_path_bold}') format('opentype'); }\n`
+            + `@font-face { font-family: OpenDyslexic; font-style: italic; src: url('${font_path_italic}') format('opentype'); }\n`
+
+            // class rule
+            + ".opendyslexic, .opendyslexic p, .opendyslexic a, .opendyslexic span, .opendyslexic div" +
+                ".opendyslexic h1, .opendyslexic h2 , .opendyslexic h3 { font-family: 'OpenDyslexic' !important }"
+        ));
+        document.getElementsByTagName( "head" )[0].appendChild( od_font );
+        __opendyslexic_loaded = true
+    }
+
+    if(document.body.classList.contains("opendyslexic")){
+        document.body.classList.remove("opendyslexic");
+        document.getElementById('fix-open-dyslexic-link').innerHTML = 'Enable futuristic font'
+    }else{
+        document.body.classList.add("opendyslexic");
+        document.getElementById('fix-open-dyslexic-link').innerHTML = 'Disable futuristic font'
+    }
+}