You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

232 lines
5.0 KiB
HTML

3 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: Serreria;
src: url({{ STATIC_DIR }}/MFI-Serreria/MFI-Serreria-Extravagante.otf) format('opentype');
font-weight: normal;
font-style: normal;
3 years ago
}
@font-face {
font-family: PTSerif;
src: url({{ STATIC_DIR }}/PT_Serif/PTSerif-Regular.ttf) format('truetype');
font-weight: normal;
font-style: normal;
3 years ago
}
@font-face {
font-family: PTSerif;
src: url({{ STATIC_DIR }}/PT_Serif/PTSerif-Italic.ttf) format('truetype');
font-weight: normal;
font-style: italic;
3 years ago
}
@page {
size: 210mm 297mm;
margin: 0mm 10mm 15mm 10mm;
3 years ago
}
@page title {
margin: 10mm 10mm 15mm 10mm;
background: green;
3 years ago
}
@page:left {
@bottom-left {
text-align: left;
content: counter(page);
}
}
@page:right {
@bottom-right {
text-align: right;
content: counter(page);
}
}
@page:empty {
@bottom-right {
content: '';
}
@bottom-left {
content: '';
}
}
@page title {
@bottom-right {
content: '';
}
@bottom-left {
content: '';
}
}
:root {
--font-size: 10pt;
--line-height: 15pt;
}
html, body {
font-family: PTSerif;
font-size: var(--font-size);
line-height: var(--line-height);
}
3 years ago
ul {
margin: 0;
padding: 0;
}
h1 {
page: title;
color: white;
page-break-after: right;
font-family: Serreria;
font-weight: normal;
font-size: 24pt;
line-height: 30pt;
}
h1 em {
text-decoration: underline;
font-style: normal;
3 years ago
}
section.step {
page-break-before: always;
text-align: center;
height: 282mm;
/* position: relative; */
3 years ago
margin: 0;
padding: 0;
}
section.step_content {
overflow: hidden;
position: absolute;
top: 20mm;
left: 0;
right: 0;
bottom: 0mm;
}
3 years ago
.traces {
list-style-type: none;
display: flex;
flex-direction: row;
position: absolute;
top: 50%;
left: 0;
right: 0;
justify-content: center;
3 years ago
line-height: 1.2em;
margin: 0;
padding: 0;
vertical-align: text-bottom;
}
.options {
list-style-type: none;
margin: 0 4em 0 0;
}
.options li {
line-height: var(--line-height);
height: var(--line-height);
3 years ago
margin: 0;
padding: 0;
}
.sentence {
z-index: 1;
position: absolute;
top: 3mm;
3 years ago
padding: 0.5em 20mm 3em 20mm;
width: 100%;
box-sizing: border-box;
/* background: -webkit-linear-gradient(to top, rgba(255,255,255,0), white 2.5em); */
/* background: linear-gradient(to top, rgba(255,255,255,0), white 2.5em); */
/* background: white; */
3 years ago
}
.tree {
z-index: 1;
position: absolute;
padding: 0 20mm 0 20mm;
bottom: -10mm;
3 years ago
width: 100%;
box-sizing: border-box;
/* background: -webkit-linear-gradient(to top, rgba(255,255,255,0), white 2.5em); */
/* background: linear-gradient(to bottom, rgba(255,255,255,0), white 2.5em); */
/* background: white; */
}
[data-picked] {
text-decoration: underline;
position: relative;
/* font-style: italic; */
}
[data-picked]::after {
content: ' → ';
text-decoration: none;
position: absolute;
left: calc(100% + 1.5em);
top: 0;
height: 1.2em;
display: block;
}
.traces > :last-child [data-picked]::after {
display: none;
3 years ago
}
</style>
{% if DEBUG %}
<link href="{{ STATIC_DIR }}/pagedjs-interface.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
{% endif %}
3 years ago
</head>
<body>
<h1>Paseo por los árboles de Madrid con&nbsp;<em>{{ author }}</em> y&nbsp;{{ title }}</h1>
3 years ago
{% for sentence, previous_steps, tree, traces in path %}
<section class="step">
<section class="sentence">
{{ previous_steps }}
</section>
<section class="step_content">
<ul class="traces">
{% for word, dice, options in traces %}
<li style="margin-top: calc(-{{ dice }} * var(--line-height))">
<ul class="options">
{% for option in options %}
<li {% if loop.index0 == dice %}data-picked{% endif %}>
{{ option }}
</li>
{% endfor %}
</ul>
<!-- Rolled: {{ dice }} -->
</li>
{% endfor %}
</ul>
</section>
3 years ago
<section class="tree">
{{ tree.properties.NOMBRE_COMUN }} en {{ tree.properties.MINTDIRECCIONAUX }}
</section>
</section>
{% endfor %}
</body>
</html>