<!DOCTYPE html>
-<html lang="en">
+<html lang="en" manifest=labelle.appcache>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
Labelle Litanizer
- Outfit-Oriented Ontology from Animal Crossing: New Leaf
</title>
+ <script type="text/javascript" src="fastclick.js"></script>
<script type="text/javascript" src="acnl-wearables-list.js"></script>
<script type="text/javascript" src="acnl-outfit.js"></script>
- <script>
- window.addEventListener("load", function () {
- if (window.navigator.standalone) {
- var header = document.getElementsByTagName("header")[0];
- header.className += " statusbar";
- var statusbar = document.getElementById("statusbar");
- statusbar.style.display = "block";
- }
- });
- </script>
<style>
@font-face {
font-family: Varela;
font-family: Varela;
font-size: 18px;
background: url(bg.png);
+ height: 100%;
+ }
+
+ .month0, .month1, .month11 { background: url(winter.png); }
+ .month2, .month3, .month4 { background: url(spring.png); }
+ .month5, .month6, .month7 { background: url(summer.png); }
+ .month8, .month9, .month10 { background: url(autumn.png); }
+
+ #statusbar {
+ display: none;
+ position: fixed;
+ background-color: #896031;
+ left: 0;
+ top: 0;
+ height: 20px;
+ right: 0;
+ z-index: 1;
+ }
+
+ .standalone #statusbar {
+ display: block;
}
main {
#labelle {
position: absolute;
- top: 1em;
left: -10%;
max-width: 28%;
}
display: inline-block;
width: 1em;
margin-left: 0.6667em;
- content: "â\96º";
+ content: "â\96¶";
color: #f45c0a;
}
height: 0.65;
}
- .day {
- background-image: linear-gradient(#1e03e9, #185cfa 70%, transparent 71%);
+ body {
+ background: -webkit-linear-gradient(top, #1e03e9 0%, #185cfa 70%, transparent 71%);
+ background: linear-gradient(#1e03e9 0%, #185cfa 70%, transparent 71%);
+ min-height: 100%;
}
- .night {
- background-image: linear-gradient(#070b5c, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
+ .hour0, .hour1, .hour2, .hour3, .hour4, .hour5,
+ .hour20, .hour21, .hour22, .hour23,
+ .spring .hour6, .autumn .hour6, .winter .hour6,
+ .spring .hour19, .autumn .hour19, .winter .hour19,
+ .winter .hour7, .winter .hour18 {
+ background-image: -webkit-linear-gradient(top, #070b5c 0%, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
+ background-image: linear-gradient(#070b5c 0%, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
}
@media (max-width: 799px) {
}
@media (max-width: 639px) {
- html { font-size: 12px; }
+ html { font-size: 13px; }
main { height: 12em; }
}
@media (max-width: 479px) {
- main { height: 15em; }
+ main { height: 13.5em; }
}
dt {
}
</style>
</head>
- <body onload='update();' class=day>
+ <body class=day>
+ <div id=statusbar></div>
<main>
<img src="labelle-2.png" id=labelle>
<div id="text">
<dt>What is this?</dt>
<dd>
The Labelle Litanizer generates random <em>Animal Crossing:
- New Leaf</em> outfits. Ignoring the realities of the period
- and distribution of your random number generator, all
- possible outfits should have some chance of appearing.
+ New Leaf</em> outfits. Ignoring the limitations of your
+ computer's random number generator, all possible outfits
+ have a chance of appearing.
</dd>
<dt>What's with the name?</dt>
<dd>
<dt>Why?</dt>
<dd>
Latour litanies confront us with objects in a way that defies
- our usual methods of grouping or reduction. In a similar way
- the Labelle Litanizer asks us to consider the possible rather
- than merely the desirable or expected. <em>New Leaf</em>
- contains a huge number of objects you can wear (or otherwise
- visibly present with, if you are uncomfortable saying you
- are "wearing" an ice cream cone). But that scale and
- diversity is obscured due to its grouping algorithms, the
- small number presented at any one time, and our cultural
- norms about dress.
+ our usual methods of grouping or reduction. Like them, the
+ Labelle Litanizer asks us to consider the possible rather than
+ the desirable or expected. <em>New Leaf</em>
+ contains a huge number of objects you can wear. But the scale
+ and diversity is obscured due to its grouping decisions, the
+ small number presented at any one time, and our cultural norms
+ about dress.
</dd>
<dt>
Can I restrict it to my items?