index.html

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