adding the baseline grid to the web interface
This commit is contained in:
parent
72516a88e7
commit
6d7553db04
19
web-interface/static/css/baseline.css
Normal file
19
web-interface/static/css/baseline.css
Normal file
@ -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;
|
||||
}
|
@ -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 %}
|
||||
|
Loading…
Reference in New Issue
Block a user