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.

175 lines
3.5 KiB
HTML

<!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>
@page {
size: 210mm 297mm;
margin: 10mm 10mm 15mm 10mm;
}
[data-picked] {
text-decoration: underline;
position: relative;
}
[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;
}
@page {
size: a4;
}
@page title {
background: black;
}
@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: '';
}
}
ul {
margin: 0;
padding: 0;
}
h1 {
page: title;
color: white;
page-break-after: right;
}
section.step {
page-break-before: always;
text-align: center;
display: flex;
flex-direction: column;
height: 252mm;
align-items: center;
justify-content: space-between;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
}
.traces {
list-style-type: none;
display: flex;
flex-direction: row;
position: absolute;
top: 50%;
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: 1.2em;
height: 1.2em;
margin: 0;
padding: 0;
}
.sentence {
z-index: 1;
position: relative;
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);
padding: 0.5em 20mm 3em 20mm;
width: 100%;
box-sizing: border-box;
}
.tree {
z-index: 1;
position: relative;
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);
padding: 3em 20mm 0.5em 20mm;
width: 100%;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Paseo por los árboles de Madrid con {{ author }} y {{ title }}</h1>
{% for sentence, previous_steps, tree, traces in path %}
<section class="step">
<section class="sentence">
{{ previous_steps }}
</section>
<ul class="traces">
{% for word, dice, options in traces %}
<li style="margin-top: calc({{ dice }} * -1.2em)">
<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 class="tree">
{{ tree.properties.NOMBRE_COMUN }} en {{ tree.properties.MINTDIRECCIONAUX }}
</section>
</section>
{% endfor %}
</body>
</html>