A bit of layout :-)

master
Gijs 4 years ago
parent 628b681940
commit 32c3f0c1e2

@ -4,8 +4,31 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Grafted trees</title>
<style> <style>
body {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
line-height: 18pt;
}
main {
grid-column: 1;
overflow-y: auto;
padding: 32pt 32pt 32pt 16pt;
}
aside {
grid-column: 2;
overflow-y: auto;
padding: 32pt 16pt;
}
[data-message] { [data-message] {
display: none; display: none;
font-size: var(--font-size-smaller); font-size: var(--font-size-smaller);
@ -18,14 +41,24 @@
display: block; display: block;
} }
button {
font: inherit;
}
</style> </style>
</head> </head>
<body> <body>
<h1>Grafting a tree</h1> <main>
<h1>Grafted trees</h1>
<p>
Grafted trees takes quotes about trees from existing works. Each graft is defined by its gardener, who is present with a short biography scraped from Wikipedia. The reader chooses the amount of seasons the graft will grow. A random noun is picked and defined as a 'bud' from which a new branch grows by replacing the word by its definition. The algorithm is inspired by Oulipo's constraint of 'Littérature définitionnelle', invented by Marcel Bénabou in 1966: in a given phrase, one replaces every significant element (noun, adjective, verb, adverb) by one of its definitions in a given dictionary; one reiterates the operation on the newly received phrase, and again.
</p>
</main>
<aside>
<p> <p>
<form action="{{ BASEURL }}/graft" method="POST"> <form action="{{ BASEURL }}/graft" method="POST">
Graft a tree for <input type="number" name="years" value="3" max="25" min="0" size="4" /> years. Graft a tree for <input type="number" name="years" value="3" max="25" min="0" size="4" /> years.<br /><br />
<button type="submit">Graft</button> <button type="submit">Graft & download</button>
</form> </form>
</p> </p>
<p data-message="working"> <p data-message="working">
@ -34,6 +67,7 @@
<p data-message="error"> <p data-message="error">
Something went wrong. Something went wrong.
</p> </p>
</aside>
<script> <script>
function getFilename (headers, fallback) { function getFilename (headers, fallback) {
if (headers.has('Content-Disposition')) { if (headers.has('Content-Disposition')) {

Loading…
Cancel
Save