Palettize Labelle.
[labelle.git] / index.html
index 36259ad..7416043 100644 (file)
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" manifest=labelle.appcache>
   <head>
     <meta charset="utf-8">
     <meta name=viewport content="width=device-width, initial-scale=1">
           src: url('VarelaRound-Regular.woff') format('woff');
       }
 
+      @font-face {
+          font-family: Sanchez;
+          font-style: normal;
+          font-weight: 400;
+          src: url('Sanchez-Regular.woff') format('woff');
+      }
+
       * {
           margin: 0;
           padding: 0;
           background: -webkit-linear-gradient(top, #1e03e9 0%, #185cfa 70%, transparent 71%);
           background: linear-gradient(#1e03e9 0%, #185cfa 70%, transparent 71%);
           min-height: 100%;
+          padding-bottom: 1em;
       }
 
       .hour0, .hour1, .hour2, .hour3, .hour4, .hour5,
       .nonperson {
           color: #00b6cf;
       }
+
+      .colophon {
+          width: 30%;
+          min-width: 9em;
+          padding: 0.2em;
+          margin: auto;
+          border-top: 0.2em solid #ab9154;
+          border-left: 0.2em solid #ab9154;
+          border-bottom: 0.2em solid #4b3724;
+          border-right: 0.2em solid #4b3724;
+          border-radius: 1em;
+          background-color: #96733a;
+          text-align: center;
+          font-family: Sanchez;
+      }
+
+      .colophon a {
+          color: #e2b745;
+          text-shadow: 1px 1px #4f412b;
+      }
+
+      .colophon .top {
+          color: #e2b745;
+          display: block;
+          font-weight: bold;
+          white-space: nowrap;
+      }
+
+      .colophon p {
+          text-shadow: -1px -1px #5a5147;
+          font-size: 0.6em;
+          margin-top: 0.5em;
+          color: #fefefe;
+      }
     </style>
   </head>
   <body class=day>
       <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.
+        New Leaf</em> outfits. Ignoring the limitations of your
+        computer's random number generator, all possible outfits
+        have a chance of appearing.
       </dd>
       <dt>What's with the name?</dt>
       <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.
+        our usual methods of grouping or reduction. Like them, the
+        Labelle Litanizer asks us to consider the possible rather than
+        the desirable or expected. <em>New Leaf</em>
+        contains a huge number of objects you can wear. But the scale
+        and diversity is obscured due to its grouping decisions, the
+        small number presented at any one time, and our cultural norms
+        about dress.
       </dd>
       <dt>
         Can I restrict it to my items?
         objects you think you have are also inaccessible to you.
       </dd>
     </dl>
+    <div class="colophon">
+      <a class=top target=_blank href="https://yukkurigames.com">
+        Yukkuri Games
+      </a>
+      <p>
+        Labelle and <em>Animal Crossing</em> are property of Nintendo.
+        Typeset in Varela Round by <a target=_blank href="https://plus.google.com/115540960342941034012/posts">Joe Prince</a> and
+        Sanchez by <a target=_blank href="http://www.latinotype.com/">LatinoType</a>.
+      </p>
+    </div>
   </body>
 </html>