index.html

   1 <!DOCTYPE html>
   2 <html lang="en" manifest=labelle.appcache>
   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       @font-face {
  29           font-family: Sanchez;
  30           font-style: normal;
  31           font-weight: 400;
  32           src: url('Sanchez-Regular.woff') format('woff');
  33       }
  34
  35       * {
  36           margin: 0;
  37           padding: 0;
  38           text-decoration: none;
  39       }
  40
  41       [onclick] {
  42           cursor: pointer;
  43           -moz-user-select: none;
  44           -webkit-user-select: none;
  45           user-select: none;
  46       }
  47
  48       html {
  49           font-family: Varela;
  50           font-size: 18px;
  51           background: url(bg.png);
  52           height: 100%;
  53       }
  54
  55       .month0, .month1, .month11 { background: url(winter.png); }
  56       .month2, .month3, .month4 { background: url(spring.png); }
  57       .month5, .month6, .month7 { background: url(summer.png); }
  58       .month8, .month9, .month10 { background: url(autumn.png); }
  59
  60       #statusbar {
  61           display: none;
  62           position: fixed;
  63           background-color: #896031;
  64           left: 0;
  65           top: 0;
  66           height: 20px;
  67           right: 0;
  68           z-index: 1;
  69       }
  70
  71       .standalone #statusbar {
  72           display: block;
  73       }
  74
  75       main {
  76           width: 80%;
  77           min-width: 280px;
  78           margin: auto;
  79           position: relative;
  80           background-color: rgba(239, 243, 216, 0.9);
  81           border: 0.3333em solid #f0f3dc;
  82           border-radius: 4em;
  83           top: 2em;
  84           margin-top: 0;
  85           height: 10em;
  86           margin-bottom: 6em;
  87           display: block;
  88       }
  89
  90       #labelle {
  91           position: absolute;
  92           left: -10%;
  93           max-width: 28%;
  94       }
  95
  96       #text {
  97           position: absolute;
  98           top: 8%;
  99           left: 20%;
 100           bottom: 1em;
 101           right: 0.25em;
 102           font-size: 1.25em;
 103       }
 104
 105       #haveyou {
 106           font-style: italic;
 107           font-size: 0.75em;
 108       }
 109
 110       #wearing {
 111           width: 100%;
 112       }
 113
 114       #wearing a {
 115           color: #0A96AA;
 116       }
 117
 118       #wearing a:hover {
 119           text-decoration: underline;
 120       }
 121
 122       #buttons {
 123           position: absolute;
 124           top: 85%;
 125           right: 1em;
 126           width: 12em;
 127           border: 0.2em solid #4cc2d2;
 128           padding: 0.25em 0;
 129           border-radius: 1em;
 130           background-color: #fff6c1;
 131           box-shadow: 0 0 0 0.1em #fff6c1;
 132           transition: transform 0.1s;
 133           transform: scale(0);
 134           -webkit-transition: -webkit-transform 0.1s;
 135           -webkit-transform: scale(0);
 136       }
 137
 138       #buttons.open {
 139           transition: transform 0.3s;
 140           transform: scale(1);
 141           -webkit-transition: -webkit-transform 0.3s;
 142           -webkit-transform: scale(1);
 143       }
 144
 145       #buttons a {
 146           display: inline-block;
 147           font-size: 1.25em;
 148           color: black;
 149           margin: 0.25em 0.5em;
 150           margin-left: 2em;
 151           border-bottom: 0.075em solid #f45c0a;
 152           white-space: nowrap;
 153       }
 154
 155       #buttons a:hover {
 156           color: #f45c0a;
 157       }
 158
 159       #buttons a:hover:before {
 160           position: absolute;
 161           left: 0;
 162           display: inline-block;
 163           width: 1em;
 164           margin-left: 0.6667em;
 165           content: "▶";
 166           color: #f45c0a;
 167       }
 168
 169       #buttons a img {
 170           vertical-align: middle;
 171           width: 0.8em;
 172           height: 0.65;
 173       }
 174
 175       body {
 176           background: -webkit-linear-gradient(top, #1e03e9 0%, #185cfa 70%, transparent 71%);
 177           background: linear-gradient(#1e03e9 0%, #185cfa 70%, transparent 71%);
 178           min-height: 100%;
 179           padding-bottom: 1em;
 180       }
 181
 182       .hour0, .hour1, .hour2, .hour3, .hour4, .hour5,
 183       .hour20, .hour21, .hour22, .hour23,
 184       .spring .hour6, .autumn .hour6, .winter .hour6,
 185       .spring .hour19, .autumn .hour19, .winter .hour19,
 186       .winter .hour7, .winter .hour18 {
 187           background-image: -webkit-linear-gradient(top, #070b5c 0%, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
 188           background-image: linear-gradient(#070b5c 0%, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
 189       }
 190
 191       @media (max-width: 799px) {
 192           html { font-size: 14px; }
 193       }
 194
 195       @media (max-width: 639px) {
 196           html { font-size: 13px; }
 197           main { height: 12em; }
 198       }
 199
 200       @media (max-width: 479px) {
 201           main { height: 13.5em; }
 202       }
 203
 204       dt {
 205           border: #fafbe5 solid 0.1em;
 206           border-radius: 1em;
 207           padding-left: 2em;
 208           background-color: #4ada48;
 209           z-index: 1;
 210           color: black;
 211           padding: 0 1em;
 212           display: inline-block;
 213       }
 214
 215       dd {
 216           border: 0.2em solid #ebd684;
 217           background-color: rgba(0, 0, 0, 0.7);
 218           border-radius: 1em 3em 2em 2em;
 219           color: white;
 220           text-shadow: 1px 1px black;
 221           padding: 1em;
 222           margin-top: -0.75em;
 223           margin-bottom: 1em;
 224       }
 225
 226       dl {
 227           width: 60%;
 228           min-width: 250px;
 229           max-width: 500px;
 230           padding: 1em;
 231           margin: auto;
 232       }
 233
 234       .person {
 235           color: #4ada48;
 236       }
 237
 238       .nonperson {
 239           color: #00b6cf;
 240       }
 241
 242       .colophon {
 243           width: 30%;
 244           min-width: 9em;
 245           padding: 0.2em;
 246           margin: auto;
 247           border-top: 0.2em solid #ab9154;
 248           border-left: 0.2em solid #ab9154;
 249           border-bottom: 0.2em solid #4b3724;
 250           border-right: 0.2em solid #4b3724;
 251           border-radius: 1em;
 252           background-color: #96733a;
 253           text-align: center;
 254           font-family: Sanchez;
 255       }
 256
 257       .colophon a {
 258           color: #e2b745;
 259           text-shadow: 1px 1px #4f412b;
 260       }
 261
 262       .colophon .top {
 263           color: #e2b745;
 264           display: block;
 265           font-weight: bold;
 266           white-space: nowrap;
 267       }
 268
 269       .colophon p {
 270           text-shadow: -1px -1px #5a5147;
 271           font-size: 0.6em;
 272           margin-top: 0.5em;
 273           color: #fefefe;
 274       }
 275     </style>
 276   </head>
 277   <body class=day>
 278     <div id=statusbar></div>
 279     <main>
 280       <img src="labelle-2.png" id=labelle>
 281       <div id="text">
 282         <div id="haveyou">Have you considered...</div>
 283         <div id="wearing">...</div>
 284         <div id="buttons">
 285           <a onclick='update();'>How gauche.</a>
 286           <a id=twitter target=_blank
 287              href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">
 288             <img src='twitter.png'>
 289             Great idea!</a>
 290         </div>
 291       </div>
 292     </main>
 293     <dl>
 294       <dt>What is this?</dt>
 295       <dd>
 296         The Labelle Litanizer generates random <em>Animal Crossing:
 297         New Leaf</em> outfits. Ignoring the limitations of your
 298         computer's random number generator, all possible outfits
 299         have a chance of appearing.
 300       </dd>
 301       <dt>What's with the name?</dt>
 302       <dd>
 303         It's inspired by
 304         <a target=_blank href="http://www.bogost.com/blog/latour_litanizer.shtml"><span class=person>Ian's</span> <span class=nonperson>
 305           Latour Litanizer</span></a>, and his writings about objects and carpentry
 306         more generally.
 307       </dd>
 308       <dt>Why?</dt>
 309       <dd>
 310         Latour litanies confront us with objects in a way that defies
 311         our usual methods of grouping or reduction. Like them, the
 312         Labelle Litanizer asks us to consider the possible rather than
 313         the desirable or expected. <em>New Leaf</em>
 314         contains a huge number of objects you can wear. But the scale
 315         and diversity is obscured due to its grouping decisions, the
 316         small number presented at any one time, and our cultural norms
 317         about dress.
 318       </dd>
 319       <dt>
 320         Can I restrict it to my items?
 321       </dt>
 322       <dd>
 323         No. Instead, consider how the true <em>Daseine</em> of the
 324         objects you think you have are also inaccessible to you.
 325       </dd>
 326     </dl>
 327     <div class="colophon">
 328       <a class=top target=_blank href="https://yukkurigames.com">
 329         Yukkuri Games
 330       </a>
 331       <p>
 332         Labelle and <em>Animal Crossing</em> are property of Nintendo.
 333         Typeset in Varela Round by <a target=_blank href="https://plus.google.com/115540960342941034012/posts">Joe Prince</a> and
 334         Sanchez by <a target=_blank href="http://www.latinotype.com/">LatinoType</a>.
 335       </p>
 336     </div>
 337   </body>
 338 </html>