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       * {
  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: -webkit-linear-gradient(top, #1e03e9 0%, #185cfa 70%, transparent 71%);
 170           background: linear-gradient(#1e03e9 0%, #185cfa 70%, transparent 71%);
 171           min-height: 100%;
 172       }
 173
 174       .hour0, .hour1, .hour2, .hour3, .hour4, .hour5,
 175       .hour20, .hour21, .hour22, .hour23,
 176       .spring .hour6, .autumn .hour6, .winter .hour6,
 177       .spring .hour19, .autumn .hour19, .winter .hour19,
 178       .winter .hour7, .winter .hour18 {
 179           background-image: -webkit-linear-gradient(top, #070b5c 0%, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
 180           background-image: linear-gradient(#070b5c 0%, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
 181       }
 182
 183       @media (max-width: 799px) {
 184           html { font-size: 14px; }
 185       }
 186
 187       @media (max-width: 639px) {
 188           html { font-size: 13px; }
 189           main { height: 12em; }
 190       }
 191
 192       @media (max-width: 479px) {
 193           main { height: 13.5em; }
 194       }
 195
 196       dt {
 197           border: #fafbe5 solid 0.1em;
 198           border-radius: 1em;
 199           padding-left: 2em;
 200           background-color: #4ada48;
 201           z-index: 1;
 202           color: black;
 203           padding: 0 1em;
 204           display: inline-block;
 205       }
 206
 207       dd {
 208           border: 0.2em solid #ebd684;
 209           background-color: rgba(0, 0, 0, 0.7);
 210           border-radius: 1em 3em 2em 2em;
 211           color: white;
 212           text-shadow: 1px 1px black;
 213           padding: 1em;
 214           margin-top: -0.75em;
 215           margin-bottom: 1em;
 216       }
 217
 218       dl {
 219           width: 60%;
 220           min-width: 250px;
 221           max-width: 500px;
 222           padding: 1em;
 223           margin: auto;
 224       }
 225
 226       .person {
 227           color: #4ada48;
 228       }
 229
 230       .nonperson {
 231           color: #00b6cf;
 232       }
 233     </style>
 234   </head>
 235   <body class=day>
 236     <div id=statusbar></div>
 237     <main>
 238       <img src="labelle-2.png" id=labelle>
 239       <div id="text">
 240         <div id="haveyou">Have you considered...</div>
 241         <div id="wearing">...</div>
 242         <div id="buttons">
 243           <a onclick='update();'>How gauche.</a>
 244           <a id=twitter target=_blank
 245              href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">
 246             <img src='twitter.png'>
 247             Great idea!</a>
 248         </div>
 249       </div>
 250     </main>
 251     <dl>
 252       <dt>What is this?</dt>
 253       <dd>
 254         The Labelle Litanizer generates random <em>Animal Crossing:
 255         New Leaf</em> outfits. Ignoring the limitations of your
 256         computer's random number generator, all possible outfits
 257         have a chance of appearing.
 258       </dd>
 259       <dt>What's with the name?</dt>
 260       <dd>
 261         It's inspired by
 262         <a target=_blank href="http://www.bogost.com/blog/latour_litanizer.shtml"><span class=person>Ian's</span> <span class=nonperson>
 263           Latour Litanizer</span></a>, and his writings about objects and carpentry
 264         more generally.
 265       </dd>
 266       <dt>Why?</dt>
 267       <dd>
 268         Latour litanies confront us with objects in a way that defies
 269         our usual methods of grouping or reduction. Like them, the
 270         Labelle Litanizer asks us to consider the possible rather than
 271         the desirable or expected. <em>New Leaf</em>
 272         contains a huge number of objects you can wear. But the scale
 273         and diversity is obscured due to its grouping decisions, the
 274         small number presented at any one time, and our cultural norms
 275         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>