Mobile styles

3 years ago · a7d45015a1
parent b45fcbe70b
commit a7d45015a1
1 changed files with 36 additions and 5 deletions
--- a/templates/index.html
+++ b/templates/index.html
@ -9,24 +9,31 @@
    body {
      display: grid;
      grid-template-columns: 1fr 1fr;
+      grid-template-rows: min-content 1fr min-content;
      margin: 0;
      padding: 0;
      height: 100vh;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12pt;
      line-height: 18pt;
+      padding: 16pt;
+      box-sizing: border-box;
    }

    main {
      grid-column: 1;
      overflow-y: auto;
-      padding: 32pt 32pt 32pt 16pt;
+      padding-right: 48pt;
    }

    aside {
      grid-column: 2;
      overflow-y: auto;
-      padding: 32pt 16pt;
+    }
+
+    h1 {
+      grid-row: 1;
+      grid-column: 1 / 3;
    }

    [data-message] {
@ -41,15 +48,36 @@
      display: block;
    }

-    button {
+    button, input {
      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>
 </head>
 <body>
+  <h1>Grafted trees</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>
@ -57,7 +85,7 @@
  <aside>
    <p>
      <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>
      </form>
    </p>
@ -68,6 +96,9 @@
      Something went wrong.
    </p>
  </aside>
+  <footer>
+    ‘Grafted trees’ is a publication by <a href="http://algoliterarypublishing.net/">An&nbsp;Algoliterary Publishing&nbsp;House</a>
+  </footer>
  <script>
    function getFilename (headers, fallback) {
      if (headers.has('Content-Disposition')) {