anais_berck
/
Paseo-por-arboles-de-Madrid
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
Paseo-por-arboles-de-Madrid/scripts/templates/index.html

199 lines
5.4 KiB
HTML
Raw Permalink Normal View History Unescape Escape

Index page for paseo
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>Paseo por los árboles de Madrid</title>
<style>
Layout of book and interface
3 years ago
@font-face {
font-family: Serreria;
src: url(static/MFI-Serreria/MFI-Serreria-Extravagante.otf) format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: PTSerif;
src: url(static/PT_Serif/PTSerif-Regular.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: PTSerif;
src: url(static/PT_Serif/PTSerif-Italic.ttf) format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: PTSerif;
src: url(static/PT_Serif/PTSerif-Bold.ttf) format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: PTSerif;
src: url(static/PT_Serif/PTSerif-BoldItalic.ttf) format('truetype');
font-weight: bold;
font-style: italic;
}
Index page for paseo
3 years ago
body {
Layout of book and interface
3 years ago
/* max-width: 60ch; */
margin: 2em 1em 1em 1em;
Index page for paseo
3 years ago
font-size: var(--font-size);
Layout of book and interface
3 years ago
line-height: var(--line-height);
font-family: PTSerif, serif;
flex-direction: row;
box-sizing: border-box;
/* height: calc(100vh - 2em); */
/* align-items: center; */
display: grid;
grid-template-columns: 1fr 1.5fr 1.5fr;
column-gap: 2em;
Index page for paseo
3 years ago
}
First layout
3 years ago
Index page for paseo
3 years ago
:root {
Layout of book and interface
3 years ago
--font-size: 13pt;
Index page for paseo
3 years ago
--line-height: 18pt;
}
Mobile styles.
3 years ago
h1 {
Layout of book and interface
3 years ago
font-family: Serreria;
font-weight: regular;
font-size: 34pt;
line-height: 45pt;
margin-top: 0;
Continued styling.
3 years ago
margin-bottom: 0;
}
a {
color: currentColor;
}
a:hover {
text-decoration: none;
Layout of book and interface
3 years ago
}
p {
margin-top: 0;
}
form {
padding-left: 11ch;
Mobile styles.
3 years ago
}
Index page for paseo
3 years ago
label {
display: block;
margin-bottom: var(--line-height);
text-indent: -11ch;
}
button {
font: inherit;
}
Layout of book and interface
3 years ago
footer {
margin-top: calc(3 * var(--line-height));
font-size: 85%;
}
#title {
grid-column: 1;
position: sticky;
top: 2rem;
align-self: start;
}
#introduction {
align-self: start;
position: sticky;
top: 2rem;
}
#introduction, #form {
margin-bottom: 2rem;
}
footer {
position: fixed;
bottom: .5em;
left: .5em;
right: .5em;
}
@media screen and (max-width: 900px) {
Mobile styles.
3 years ago
body {
Layout of book and interface
3 years ago
grid-template-columns: 1fr 1.5fr;
grid-template-rows: min-content min-content;
Mobile styles.
3 years ago
}
Layout of book and interface
3 years ago
#title {
grid-row: 1 / span 2;
}
#introduction {
position: initial;
margin-bottom: 0;
Mobile styles.
3 years ago
}
}
Layout of book and interface
3 years ago
@media screen and (max-width: 720px) {
body {
grid-template-columns: 1fr;
grid-template-rows: min-content min-content min-content min-content;
}
#title {
grid-row: initial;
position: initial;
}
#form {
margin-bottom: 0;
}
footer {
position: initial;
}
Added footer, linking back to algoliterarypublishing.net
3 years ago
}
Index page for paseo
3 years ago
</style>
</head>
<body>
Continued styling.
3 years ago
<section id="title">
<h1 id="title">Paseo por los árboles de Madrid</h1>
<a href="{{ BASEURL }}/en">en</a>
</section>
Layout of book and interface
3 years ago
<section id="introduction">
<p>En este libro, el algoritmo de las cadenas de Markov genera simultáneamente un poema y un paseo por los árboles del barrio de Las Letras, en el centro de Madrid. A pesar de la impresión de que hay pocos árboles en el barrio, el algoritmo cuenta con 460 de ellos. </p>
<p>La cadena de Markov fue diseñada en 1906 por Andrey Markov, un matemático ruso fallecido en 1992. Este algoritmo está en la base de muchos programas informáticos que generan spam. Se utiliza para sistemas que describen una serie de eventos que son interdependientes. Lo que ocurre depende únicamente del paso anterior.</p>
<p>El libro se construye entonces paso a paso. </p>
</section>
<section id="form">
<p>
<strong>Puedes elegir una novela para crear tu Paseo por árboles de Madrid.</strong>
</p>
<form method="POST" action="/book">
<label><input type="radio" name="fragment" value="0" checked> Opción 1: La novela <em>‘La madre naturaleza’</em> de la escritora feminista <em>Emilia Pardo Bazán</em>
fue publicada en 1887. Usa en esta obra una prosa poética y descriptiva, y en sus páginas se
siente el amor que profesa al paisaje gallego, con un conocimiento de la botánica y de
las costumbres rurales muy superior al de sus contemporáneos.</label><br />
<label><input type="radio" name="fragment" value="1"> Opción 2: La novela <em>‘Miau’</em> del escritor <em>Benito Pérez Galdós</em> fue publicada en 1888.
Enmarcada en el género realista, satiriza el Madrid burocrático de finales del siglo XIX
a partir de las vicisitudes vitales de su protagonista, Ramón Villaamil,
un competente exempleado del Ministerio de Hacienda, al que una serie de intrigas
han dejado cesante.</label><br />
<button type="submit">Generate</button>
</form>
</section>
Added footer, linking back to algoliterarypublishing.net
3 years ago
<footer>
‘Paseo por los árboles de Madrid’ is a publication by <a href="http://algoliterarypublishing.net/">An&nbsp;Algoliterary Publishing&nbsp;House</a>
</footer>
Index page for paseo
3 years ago
</body>
</html>