adding the baseline grid to the web interface

web-interface/static/css/baseline.css

@@ -0,0 +1,19 @@
+/* This baseline.css stylesheet is derived from: https://gist.github.com/julientaq/08d636a7a2b5f2824025256de0fca467 */
+/* Thanks a lot to julientaq for publishing it! */
+
+:root {
+	--baseline: 18px;
+	--baseline-color: blue;
+}
+
+.pagedjs_page {
+	/* grid baseline */
+	background: 
+		repeating-linear-gradient( 
+			white 0, 
+			white calc(var(--baseline) - 1px), var(--baseline-color) var(--baseline));
+	background-size: cover;
+	background-repeat: repeat-y;
+	/* start of the first baseline: half of the line-height: 9px */
+	background-position-y: 9px;
+}

web-interface/templates/pagedjs.html

@@ -5,6 +5,7 @@
 <script src="{{ url_for('static', filename='js/paged.polyfill.js')}}" type="text/javascript"></script>
 <link href="{{ url_for('static', filename='css/pagedjs.css')}}" rel="stylesheet" type="text/css" media="screen">
 <link href="{{ url_for('static', filename='css/print.css')}}" rel="stylesheet" type="text/css" media="print">
+<link href="{{ url_for('static', filename='css/baseline.css')}}" rel="stylesheet" type="text/css" media="print">
 <script src="{{ url_for('static', filename='js/p5.js')}}"></script>
 <script src="{{ url_for('static', filename='js/variable-geometry-cover.js')}}"></script>
 {% endblock %}