anais_berck
/
Grafting-Trees
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Mobile styles

Browse Source
master
Gijs 4 years ago
parent b45fcbe70b
commit a7d45015a1
1 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File

41
templates/index.html
Unescape Escape View File

@ -9,24 +9,31 @@
body { body {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: min-content 1fr min-content;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh; height: 100vh;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12pt; font-size: 12pt;
line-height: 18pt; line-height: 18pt;
padding: 16pt;
box-sizing: border-box;
} }
main { main {
grid-column: 1; grid-column: 1;
overflow-y: auto; overflow-y: auto;
padding: 32pt 32pt 32pt 16pt; padding-right: 48pt;
} }
aside { aside {
grid-column: 2; grid-column: 2;
overflow-y: auto; overflow-y: auto;
padding: 32pt 16pt; }
h1 {
grid-row: 1;
grid-column: 1 / 3;
} }
[data-message] { [data-message] {
@ -41,15 +48,36 @@
display: block; display: block;
} }
button { button, input {
font: inherit; font: inherit;
} }
footer {
grid-row: 3;
grid-column: 1 / 3;
font-size: 85%;
}
@media screen and (max-width: 600px) {
body {
display: block;
}
main {
padding-right: 16pt;
}
footer {
margin-top: 32pt;
padding-bottom: 16pt;
}
}
</style> </style>
</head> </head>
<body> <body>
<main>
<h1>Grafted trees</h1> <h1>Grafted trees</h1>
<main>
<p> <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. ‘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> </p>
@ -57,7 +85,7 @@
<aside> <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.<br /><br /> Graft a tree for <input type="number" name="years" value="3" max="25" min="0" size="3" /> years.<br /><br />
<button type="submit">Graft & download</button> <button type="submit">Graft & download</button>
</form> </form>
</p> </p>
@ -68,6 +96,9 @@
Something went wrong. Something went wrong.
</p> </p>
</aside> </aside>
<footer>
‘Grafted trees’ is a publication by <a href="http://algoliterarypublishing.net/">An&nbsp;Algoliterary Publishing&nbsp;House</a>
</footer>
<script> <script>
function getFilename (headers, fallback) { function getFilename (headers, fallback) {
if (headers.has('Content-Disposition')) { if (headers.has('Content-Disposition')) {

Write Preview
Loading…
Cancel
Save