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