index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name=viewport content="width=device-width, initial-scale=1">
   6     <link rel="stylesheet" href="/css/main.css" type="text/css">
   7     <title>
   8       Labelle Litanizer
   9       - Outfit-Oriented Ontology from Animal Crossing: New Leaf
  10       ~ Yukkuri Games
  11     </title>
  12     <script type="text/javascript" src="acnl-wearables-list.js"></script>
  13     <script type="text/javascript" src="acnl-outfit.js"></script>
  14     <style>
  15       #labelle {
  16           min-height: 180px;
  17           margin-top: 1em;
  18       }
  19
  20       #haveyou {
  21           font-size: 1.5em;
  22           font-style: italic;
  23           margin-bottom: 0.25em;
  24       }
  25
  26       #wearing {
  27           font-size: 2em;
  28       }
  29
  30       #buttons {
  31           text-align: center;
  32       }
  33
  34       .button {
  35           font-size: 2em;
  36           text-decoration: none;
  37           background-color: #eee;
  38           color: #333 !important;
  39           padding: 3px 6px 3px 6px;
  40           border-top: 1px solid #ccc;
  41           border-right: 1px solid #333;
  42           border-bottom: 1px solid #333;
  43           border-left: 1px solid #ccc;
  44           margin: 0.25em 0.5em;
  45           display: inline-block;
  46           white-space: nowrap;
  47       }
  48
  49       @media (max-width: 600px) {
  50           #wearing { font-size: 1.25em; }
  51           #haveyou, .button { font-size: 1.125em; }
  52       }
  53
  54       .button.twitter {
  55           padding: 2px 5px 2px 32px;
  56           background: url('twitter.png') 8px center no-repeat #eee;
  57       }
  58     </style>
  59   </head>
  60   <body onload='litanizeElement("wearing", "share-button");'>
  61     <header>
  62       <a href="http://yukkurigames.com" id="header-logo">
  63         <img src="/logotype_horizontal_1.png" class="logo"
  64              data-large
  65              alt="(◕ ヮ ◕)"
  66         ><img src="/logotype_horizontal_2.png"
  67               data-optional
  68               alt="Yukkuri Games"
  69         ><img src="/logotype_horizontal_3.png" class="logo"
  70              data-small
  71              alt="(◕ ヮ ◕)">
  72       </a>
  73       <h1>Labelle Litanizer</h1>
  74     </header>
  75     <main>
  76       <div id="labelle" style="float: left; width: 100%;">
  77         <div style="float: left; width: 30%">
  78           <img src="labelle.jpg" style="max-width: 100%;"/>
  79         </div>
  80         <div style="float: right; width: 66%; margin-top: 0.5em">
  81           <div id="haveyou">Have you considered...</div>
  82           <div id="wearing">...</div>
  83         </div>
  84       </div>
  85       <div id="buttons">
  86         <a onclick='litanizeElement("wearing", "share-button", event);'
  87            class="button" href="">How gauche.</a>
  88         <a id="share-button" target="_blank" class="twitter button"
  89            href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">Great idea!</a>
  90       </div>
  91       <hr>
  92       <dl class="downplay">
  93         <dt>What is this?</dt>
  94         <dd>
  95           The Labelle Litanizer generates random <em>Animal Crossing:
  96           New Leaf</em> outfits. Ignoring the realities of the period
  97           and distribution of your random number generator, all
  98           possible outfits should have some chance of appearing.
  99         </dd>
 100         <dt>What's with the name?</dt>
 101         <dd>
 102           It's inspired by Ian Bogost's
 103           <a href="http://www.bogost.com/blog/latour_litanizer.shtml">Latour
 104           Litanizer</a>, and his writings about objects and carpentry
 105           more generally.
 106         </dd>
 107         <dt>Why?</dt>
 108         <dd>
 109           Latour litanies confront us with objects in a way that defies
 110           our usual methods of grouping or reduction. In a similar way
 111           the Labelle Litanizer asks us to consider the possible rather
 112           than merely the desirable or expected. <em>New Leaf</em>
 113           contains a huge number of objects you can wear (or otherwise
 114           visibly present with, if you are uncomfortable saying you
 115           are "wearing" an ice cream cone). But that scale and
 116           diversity is obscured due to its grouping algorithms, the
 117           small number presented at any one time, and our cultural
 118           norms about dress.
 119         </dd>
 120         <dt>
 121           Can I restrict it to my / catalogable / easily-accessible
 122           items (no DLC / region-exclusives)?
 123         </dt>
 124         <dd>
 125           No. Instead, consider how the true <em>Daseine</em> of the
 126           objects you think you have are also inaccessible to you.
 127         </dd>
 128       </dl>
 129     </main>
 130   </body>
 131 </html>