Adjust layout for tiny screens. Clean up indentation.
authorJoe Wreschnig <joe.wreschnig@gmail.com>
Thu, 29 May 2014 23:07:26 +0000 (01:07 +0200)
committerJoe Wreschnig <joe.wreschnig@gmail.com>
Thu, 29 May 2014 23:07:26 +0000 (01:07 +0200)
index.html

index 0024c21..6c7a2a2 100644 (file)
@@ -4,19 +4,32 @@
     <meta charset="utf-8">
     <meta name=viewport content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/css/main.css" type="text/css">
-    <title>Labelle Litanizer - Outfit-Oriented Ontology from Animal Crossing: New Leaf ~ Yukkuri Games</title>
+    <title>
+      Labelle Litanizer
+      - Outfit-Oriented Ontology from Animal Crossing: New Leaf
+      ~ Yukkuri Games
+    </title>
     <script type="text/javascript" src="acnl-wearables-list.js"></script>
     <script type="text/javascript" src="acnl-outfit.js"></script>
     <style>
-      div#labelle { height: 400px; margin-top: 40px; }
-      div#haveyou {
+      #labelle {
+          min-height: 180px;
+          margin-top: 1em;
+      }
+
+      #haveyou {
           font-size: 1.5em;
           font-style: italic;
-          margin-bottom: 0.5em;
+          margin-bottom: 0.25em;
       }
-      div#wearing { font-size: 2em; }
 
-      #buttons { text-align: center }
+      #wearing {
+          font-size: 2em;
+      }
+
+      #buttons {
+          text-align: center;
+      }
 
       .button {
           font-size: 2em;
           white-space: nowrap;
       }
 
+      @media (max-width: 600px) {
+          #wearing { font-size: 1.25em; }
+          #haveyou, .button { font-size: 1.125em; }
+      }
+
       .button.twitter {
-          padding: 2px 5px 2px 0.9em;
+          padding: 2px 5px 2px 32px;
           background: url('twitter.png') 0.2em center no-repeat #eee;
       }
-  }
     </style>
   </head>
   <body onload='litanizeElement("wearing", "share-button");'>
       <h1>Labelle Litanizer</h1>
     </header>
     <main>
-      <div id="labelle">
+      <div id="labelle" style="float: left; width: 100%;">
         <div style="float: left; width: 30%">
           <img src="labelle.jpg" style="max-width: 100%;"/>
         </div>
-        <div style="float: right; width: 60%; margin-right: 2em; margin-top: 2em">
+        <div style="float: right; width: 66%; margin-top: 0.5em">
           <div id="haveyou">Have you considered...</div>
           <div id="wearing">...</div>
         </div>
       </div>
-    <div id="buttons">
-      <a onclick='litanizeElement("wearing", "share-button", event);'
-         class="button" href="">How gauche.</a>
-      <a id="share-button" target="_blank" class="twitter button"
-         href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">Great idea!</a>
-    </div>
-    <hr>
-    <dl class="downplay">
-      <dt>What is this?</dt>
-      <dd>
-        The Labelle Litanizer generates random <em>Animal Crossing:
-        New Leaf</em> outfits. Ignoring the realities of the period
-        and distribution of your random number generator, all possible
-        outfits should have some chance of appearing.
-      </dd>
-      <dt>What's with the name?</dt>
-      <dd>
-        It's inspired by Ian
-        Bogost's <a href="http://www.bogost.com/blog/latour_litanizer.shtml">Latour
-        Litanizer</a>, and his writings about objects and carpentry
-        more generally.
-      </dd>
-      <dt>Why?</dt>
-      <dd>
-        Latour litanies confront us with objects in a way that defies
-        our usual methods of grouping or reduction. In a similar way
-        the Labelle Litanizer asks us to consider the possible rather
-        than merely the desirable or expected. <em>New Leaf</em>
-        contains a huge number of objects you can wear (or otherwise
-        visibly present with, if you are uncomfortable saying you are
-        "wearing" an ice cream cone). But that scale and diversity is
-        obscured due to its grouping algorithms, the small number
-        presented at any one time, and our cultural norms about dress.
-      </dd>
-      <dt>
-        Can I restrict it to my / catalogable / easily-accessible items (no
-        DLC / region-exclusives)?
-      </dt>
-      <dd>
-        No. Instead, consider how the true <em>Daseine</em> of the
-        objects you think you have are also inaccessible to you.
-      </dd>
-      <dt>Can you add images?</dt>
-      <dd>
-        I would like to, but a full set of wearable object images
-        doesn't exist, and if it did I probably couldn't host it here
-        due to its size (estimated ~150MB). If you have one and want
-        to host it, let me know.
-      </dd>
-      <dt>
-        It generated an invalid outfit / sentence / MoriDB link.<br>
-        It can't generate some valid outfit.<br>
-        You're missing my favorite item.
-      </dt>
-      <dd>
-        Email me (joe.wreschnig at gmail) with the details,
-        please. I'm certain there's still miscategorized caps/hats
-        vs. masks/helmets, and plenty of items I forgot.
-      </dd>
-    </dl>
+      <div id="buttons">
+        <a onclick='litanizeElement("wearing", "share-button", event);'
+           class="button" href="">How gauche.</a>
+        <a id="share-button" target="_blank" class="twitter button"
+           href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">Great idea!</a>
+      </div>
+      <hr>
+      <dl class="downplay">
+        <dt>What is this?</dt>
+        <dd>
+          The Labelle Litanizer generates random <em>Animal Crossing:
+          New Leaf</em> outfits. Ignoring the realities of the period
+          and distribution of your random number generator, all
+          possible outfits should have some chance of appearing.
+        </dd>
+        <dt>What's with the name?</dt>
+        <dd>
+          It's inspired by Ian Bogost's
+          <a href="http://www.bogost.com/blog/latour_litanizer.shtml">Latour
+          Litanizer</a>, and his writings about objects and carpentry
+          more generally.
+        </dd>
+        <dt>Why?</dt>
+        <dd>
+          Latour litanies confront us with objects in a way that defies
+          our usual methods of grouping or reduction. In a similar way
+          the Labelle Litanizer asks us to consider the possible rather
+          than merely the desirable or expected. <em>New Leaf</em>
+          contains a huge number of objects you can wear (or otherwise
+          visibly present with, if you are uncomfortable saying you
+          are "wearing" an ice cream cone). But that scale and
+          diversity is obscured due to its grouping algorithms, the
+          small number presented at any one time, and our cultural
+          norms about dress.
+        </dd>
+        <dt>
+          Can I restrict it to my / catalogable / easily-accessible
+          items (no DLC / region-exclusives)?
+        </dt>
+        <dd>
+          No. Instead, consider how the true <em>Daseine</em> of the
+          objects you think you have are also inaccessible to you.
+        </dd>
+      </dl>
     </main>
   </body>
 </html>