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               var statusbar = document.getElementById("statusbar");
  34               statusbar.style.display = "block";
  35           }
  36       });
  37     </script>
  38     <style>
  39       #statusbar {
  40           background-color: rgb(206, 132, 242);
  41           height: 20px;
  42           position: fixed;
  43           top: 0;
  44           left: 0;
  45           right: 0;
  46           transition: background-color 0.5s;
  47           z-index: 1;
  48           display: none;
  49       }
  50
  51       header:hover #statusbar {
  52           background-color: rgb(244, 126, 126);
  53       }
  54
  55       header.statusbar {
  56           border-top-left-radius: 0;
  57           border-top-right-radius: 0;
  58           border-top-width: 20px;
  59       }
  60
  61       #labelle {
  62           min-height: 180px;
  63           margin-top: 1em;
  64       }
  65
  66       #haveyou {
  67           font-size: 1.5em;
  68           font-style: italic;
  69           margin-bottom: 0.25em;
  70       }
  71
  72       #wearing {
  73           font-size: 2em;
  74       }
  75
  76       #buttons {
  77           text-align: center;
  78       }
  79
  80       .button {
  81           font-size: 2em;
  82           text-decoration: none;
  83           background-color: #eee;
  84           color: #333 !important;
  85           padding: 3px 6px 3px 6px;
  86           border-top: 1px solid #ccc;
  87           border-right: 1px solid #333;
  88           border-bottom: 1px solid #333;
  89           border-left: 1px solid #ccc;
  90           margin: 0.25em 0.5em;
  91           display: inline-block;
  92           white-space: nowrap;
  93       }
  94
  95       @media (max-width: 600px) {
  96           #wearing { font-size: 1.25em; }
  97           #haveyou, .button { font-size: 1.125em; }
  98       }
  99
 100       .button.twitter {
 101           padding: 2px 5px 2px 32px;
 102           background: url('twitter.png') 8px center no-repeat #eee;
 103       }
 104     </style>
 105   </head>
 106   <body onload='litanizeElement("wearing", "share-button");'>
 107     <header>
 108       <div id='statusbar'></div>
 109       <a href="http://yukkurigames.com" id="header-logo">
 110         <img src="/logotype_horizontal_1.png" class="logo"
 111              data-large
 112              alt="(◕ ヮ ◕)"
 113         ><img src="/logotype_horizontal_2.png"
 114               data-optional
 115               alt="Yukkuri Games"
 116         ><img src="/logotype_horizontal_3.png" class="logo"
 117              data-small
 118              alt="(◕ ヮ ◕)">
 119       </a>
 120       <h1>Labelle Litanizer</h1>
 121     </header>
 122     <main>
 123       <div id="labelle" style="float: left; width: 100%;">
 124         <div style="float: left; width: 30%">
 125           <img src="labelle.jpg" style="max-width: 100%;"/>
 126         </div>
 127         <div style="float: right; width: 66%; margin-top: 0.5em">
 128           <div id="haveyou">Have you considered...</div>
 129           <div id="wearing">...</div>
 130         </div>
 131       </div>
 132       <div id="buttons">
 133         <a onclick='litanizeElement("wearing", "share-button", event);'
 134            class="button" href="">How gauche.</a>
 135         <a id="share-button" target="_blank" class="twitter button"
 136            href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">Great idea!</a>
 137       </div>
 138       <hr>
 139       <dl class="downplay">
 140         <dt>What is this?</dt>
 141         <dd>
 142           The Labelle Litanizer generates random <em>Animal Crossing:
 143           New Leaf</em> outfits. Ignoring the realities of the period
 144           and distribution of your random number generator, all
 145           possible outfits should have some chance of appearing.
 146         </dd>
 147         <dt>What's with the name?</dt>
 148         <dd>
 149           It's inspired by Ian Bogost's
 150           <a href="http://www.bogost.com/blog/latour_litanizer.shtml">Latour
 151           Litanizer</a>, and his writings about objects and carpentry
 152           more generally.
 153         </dd>
 154         <dt>Why?</dt>
 155         <dd>
 156           Latour litanies confront us with objects in a way that defies
 157           our usual methods of grouping or reduction. In a similar way
 158           the Labelle Litanizer asks us to consider the possible rather
 159           than merely the desirable or expected. <em>New Leaf</em>
 160           contains a huge number of objects you can wear (or otherwise
 161           visibly present with, if you are uncomfortable saying you
 162           are "wearing" an ice cream cone). But that scale and
 163           diversity is obscured due to its grouping algorithms, the
 164           small number presented at any one time, and our cultural
 165           norms about dress.
 166         </dd>
 167         <dt>
 168           Can I restrict it to my / catalogable / easily-accessible
 169           items (no DLC / region-exclusives)?
 170         </dt>
 171         <dd>
 172           No. Instead, consider how the true <em>Daseine</em> of the
 173           objects you think you have are also inaccessible to you.
 174         </dd>
 175       </dl>
 176     </main>
 177   </body>
 178 </html>