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