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     <meta name="apple-mobile-web-app-capable" content="yes">
   7     <link rel="shortcut icon" href="icon_128x128.png">
   8     <link rel="apple-touch-icon" href="icon_128x128.png">
   9     <meta name="apple-mobile-web-app-capable" content="yes">
  10     <meta name="mobile-web-app-capable" content="yes">
  11     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  12     <meta name="apple-mobile-web-app-title" content="Labelle Litanizer">
  13     <title>
  14       Labelle Litanizer
  15       - Outfit-Oriented Ontology from Animal Crossing: New Leaf
  16     </title>
  17     <script type="text/javascript" src="fastclick.js"></script>
  18     <script type="text/javascript" src="acnl-wearables-list.js"></script>
  19     <script type="text/javascript" src="acnl-outfit.js"></script>
  20     <style>
  21       @font-face {
  22           font-family: Varela;
  23           font-style: normal;
  24           font-weight: 400;
  25           src: url('VarelaRound-Regular.woff') format('woff');
  26       }
  27
  28       * {
  29           margin: 0;
  30           padding: 0;
  31           text-decoration: none;
  32       }
  33
  34       [onclick] {
  35           cursor: pointer;
  36           -moz-user-select: none;
  37           -webkit-user-select: none;
  38           user-select: none;
  39       }
  40
  41       html {
  42           font-family: Varela;
  43           font-size: 18px;
  44           background: url(bg.png);
  45           height: 100%;
  46       }
  47
  48       .month0, .month1, .month11 { background: url(winter.png); }
  49       .month2, .month3, .month4 { background: url(spring.png); }
  50       .month5, .month6, .month7 { background: url(summer.png); }
  51       .month8, .month9, .month10 { background: url(autumn.png); }
  52
  53       #statusbar {
  54           display: none;
  55           position: fixed;
  56           background-color: #896031;
  57           left: 0;
  58           top: 0;
  59           height: 20px;
  60           right: 0;
  61           z-index: 1;
  62       }
  63
  64       .standalone #statusbar {
  65           display: block;
  66       }
  67
  68       main {
  69           width: 80%;
  70           min-width: 280px;
  71           margin: auto;
  72           position: relative;
  73           background-color: rgba(239, 243, 216, 0.9);
  74           border: 0.3333em solid #f0f3dc;
  75           border-radius: 4em;
  76           top: 2em;
  77           margin-top: 0;
  78           height: 10em;
  79           margin-bottom: 6em;
  80           display: block;
  81       }
  82
  83       #labelle {
  84           position: absolute;
  85           left: -10%;
  86           max-width: 28%;
  87       }
  88
  89       #text {
  90           position: absolute;
  91           top: 8%;
  92           left: 20%;
  93           bottom: 1em;
  94           right: 0.25em;
  95           font-size: 1.25em;
  96       }
  97
  98       #haveyou {
  99           font-style: italic;
 100           font-size: 0.75em;
 101       }
 102
 103       #wearing {
 104           width: 100%;
 105       }
 106
 107       #wearing a {
 108           color: #0A96AA;
 109       }
 110
 111       #wearing a:hover {
 112           text-decoration: underline;
 113       }
 114
 115       #buttons {
 116           position: absolute;
 117           top: 85%;
 118           right: 1em;
 119           width: 12em;
 120           border: 0.2em solid #4cc2d2;
 121           padding: 0.25em 0;
 122           border-radius: 1em;
 123           background-color: #fff6c1;
 124           box-shadow: 0 0 0 0.1em #fff6c1;
 125           transition: transform 0.1s;
 126           transform: scale(0);
 127           -webkit-transition: -webkit-transform 0.1s;
 128           -webkit-transform: scale(0);
 129       }
 130
 131       #buttons.open {
 132           transition: transform 0.3s;
 133           transform: scale(1);
 134           -webkit-transition: -webkit-transform 0.3s;
 135           -webkit-transform: scale(1);
 136       }
 137
 138       #buttons a {
 139           display: inline-block;
 140           font-size: 1.25em;
 141           color: black;
 142           margin: 0.25em 0.5em;
 143           margin-left: 2em;
 144           border-bottom: 0.075em solid #f45c0a;
 145           white-space: nowrap;
 146       }
 147
 148       #buttons a:hover {
 149           color: #f45c0a;
 150       }
 151
 152       #buttons a:hover:before {
 153           position: absolute;
 154           left: 0;
 155           display: inline-block;
 156           width: 1em;
 157           margin-left: 0.6667em;
 158           content: "▶";
 159           color: #f45c0a;
 160       }
 161
 162       #buttons a img {
 163           vertical-align: middle;
 164           width: 0.8em;
 165           height: 0.65;
 166       }
 167
 168       body {
 169           background-image: linear-gradient(#1e03e9, #185cfa 70%, transparent 71%);
 170           min-height: 100%;
 171       }
 172
 173       .hour0, .hour1, .hour2, .hour3, .hour4, .hour5,
 174       .hour20, .hour21, .hour22, .hour23,
 175       .spring .hour6, .autumn .hour6, .winter .hour6,
 176       .spring .hour19, .autumn .hour19, .winter .hour19,
 177       .winter .hour7, .winter .hour18 {
 178           background-image: linear-gradient(#070b5c, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
 179       }
 180
 181       @media (max-width: 799px) {
 182           html { font-size: 14px; }
 183       }
 184
 185       @media (max-width: 639px) {
 186           html { font-size: 12px; }
 187           main { height: 12em; }
 188       }
 189
 190       @media (max-width: 479px) {
 191           main { height: 15em; }
 192       }
 193
 194       dt {
 195           border: #fafbe5 solid 0.1em;
 196           border-radius: 1em;
 197           padding-left: 2em;
 198           background-color: #4ada48;
 199           z-index: 1;
 200           color: black;
 201           padding: 0 1em;
 202           display: inline-block;
 203       }
 204
 205       dd {
 206           border: 0.2em solid #ebd684;
 207           background-color: rgba(0, 0, 0, 0.7);
 208           border-radius: 1em 3em 2em 2em;
 209           color: white;
 210           text-shadow: 1px 1px black;
 211           padding: 1em;
 212           margin-top: -0.75em;
 213           margin-bottom: 1em;
 214       }
 215
 216       dl {
 217           width: 60%;
 218           min-width: 250px;
 219           max-width: 500px;
 220           padding: 1em;
 221           margin: auto;
 222       }
 223
 224       .person {
 225           color: #4ada48;
 226       }
 227
 228       .nonperson {
 229           color: #00b6cf;
 230       }
 231     </style>
 232   </head>
 233   <body class=day>
 234     <div id=statusbar></div>
 235     <main>
 236       <img src="labelle-2.png" id=labelle>
 237       <div id="text">
 238         <div id="haveyou">Have you considered...</div>
 239         <div id="wearing">...</div>
 240         <div id="buttons">
 241           <a onclick='update();'>How gauche.</a>
 242           <a id=twitter target=_blank
 243              href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">
 244             <img src='twitter.png'>
 245             Great idea!</a>
 246         </div>
 247       </div>
 248     </main>
 249     <dl>
 250       <dt>What is this?</dt>
 251       <dd>
 252         The Labelle Litanizer generates random <em>Animal Crossing:
 253         New Leaf</em> outfits. Ignoring the realities of the period
 254         and distribution of your random number generator, all
 255         possible outfits should have some chance of appearing.
 256       </dd>
 257       <dt>What's with the name?</dt>
 258       <dd>
 259         It's inspired by
 260         <a target=_blank href="http://www.bogost.com/blog/latour_litanizer.shtml"><span class=person>Ian's</span> <span class=nonperson>
 261           Latour Litanizer</span></a>, and his writings about objects and carpentry
 262         more generally.
 263       </dd>
 264       <dt>Why?</dt>
 265       <dd>
 266         Latour litanies confront us with objects in a way that defies
 267         our usual methods of grouping or reduction. In a similar way
 268         the Labelle Litanizer asks us to consider the possible rather
 269         than merely the desirable or expected. <em>New Leaf</em>
 270         contains a huge number of objects you can wear (or otherwise
 271         visibly present with, if you are uncomfortable saying you
 272         are "wearing" an ice cream cone). But that scale and
 273         diversity is obscured due to its grouping algorithms, the
 274         small number presented at any one time, and our cultural
 275         norms about dress.
 276       </dd>
 277       <dt>
 278         Can I restrict it to my items?
 279       </dt>
 280       <dd>
 281         No. Instead, consider how the true <em>Daseine</em> of the
 282         objects you think you have are also inaccessible to you.
 283       </dd>
 284     </dl>
 285   </body>
 286 </html>