Paseo-por-arboles-de-Madrid/scripts/templates/index_en.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>Walk along the trees of Madrid</title>
  <style>

    @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;
    }

    body {
      /* max-width: 60ch; */
      margin: 2em 1em 1em 1em;
      font-size: var(--font-size);
      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;
    }

    :root {
      --font-size: 13pt;
      --line-height: 18pt;
    }

    h1 {
      font-family: Serreria;
      font-weight: regular;
      font-size: 34pt;
      line-height: 45pt;
      margin-top: 0;
      margin-bottom: 0;
    }

    a {
      color: currentColor;
    }

    a:hover {
      text-decoration: none;
    }

    p {
      margin-top: 0;
    }

    form {
      padding-left: 11ch;
    }

    label {
      display: block;
      margin-bottom: var(--line-height);
      text-indent: -11ch;
    }

    button {
      font: inherit;
    }

    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) {
      body {
        grid-template-columns: 1fr 1.5fr;
        grid-template-rows: min-content min-content;
      }

      #title {
        grid-row: 1  / span 2;
      }

      #introduction {
        position: initial;
        margin-bottom: 0;
      }
    }

    @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;
      }
    }

  </style>
</head>
<body>
  <div id="title">
    <h1>Walk along the trees of Madrid</h1>
    <a href="{{ BASEURL }}/es">es</a>
  </div>
  <section id="introduction">
    <p>In this book, the Markov chain algorithm simultaneously generates a poem and a walk along the trees of the neighbourhood Las Letras in the centre of Madrid. Despite the impression that there are few trees in the neighbourhood, the algorithm counts 460 of them.</p>
    <p>The Markov chain was designed in 1906 by Andrey Markov, a Russian mathematician who died in 1992. This algorithm is at the basis of many computer programs that generate spam. It is used for systems that describe a series of events that are interdependent. What happens depends only on the previous step.</p>
    <p>The book is thus built up step by step. </p>
  </section>
  <section id="form">
    <p>
      <strong>You can choose a novel to create your Walk along the trees of Madrid.</strong>
    </p>
    <form method="POST" action="/book">
      <label><input type="radio" name="fragment" value="0" checked> Option 1: The novel <em>The Swan of Vila Morta</em> by the feminist writer Emilia Pardo Bazán published in 1891. <em>‘La madre naturaleza’</em> de la escritora feminista <em>Emilia Pardo Bazán</em></label><br />
      <label><input type="radio" name="fragment" value="1"> Option 2: The novel <em>Marianela</em> by the Madrilenean writer Benito Pérez Galdós, published in 1878. </label><br />
      <button type="submit">Generate</button>
    </form>
  </section>
  <footer>
    ‘Walk along the trees of Madrid’ is a publication by <a href="http://algoliterarypublishing.net/">An&nbsp;Algoliterary Publishing&nbsp;House</a>
  </footer>
</body>
</html>