<!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">
<meta name="apple-mobile-web-app-capable" content="yes">
- <link rel="shortcut icon" href="icon_72x72.png">
- <link rel="apple-touch-icon" href="icon_57x57.png">
- <link rel="apple-touch-icon" sizes="57x57" href="icon_57x57.png">
- <link rel="apple-touch-icon" sizes="72x72" href="icon_72x72.png">
- <link rel="apple-touch-icon" sizes="76x76" href="icon_76x76.png">
- <link rel="apple-touch-icon" sizes="114x114" href="icon_114x114.png">
- <link rel="apple-touch-icon" sizes="120x120" href="icon_120x120.png">
- <link rel="apple-touch-icon" sizes="144x144" href="icon_144x144.png">
- <link rel="apple-touch-icon" sizes="152x152" href="icon_152x152.png">
+ <link rel="shortcut icon" href="icon_128x128.png">
+ <link rel="apple-touch-icon" href="icon_128x128.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
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;
src: url('VarelaRound-Regular.woff') format('woff');
}
+ @font-face {
+ font-family: Sanchez;
+ font-style: normal;
+ font-weight: 400;
+ src: url('Sanchez-Regular.woff') format('woff');
+ }
+
* {
margin: 0;
padding: 0;
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%;
+ padding-bottom: 1em;
}
- .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 {
.nonperson {
color: #00b6cf;
}
+
+ .colophon {
+ width: 30%;
+ min-width: 9em;
+ padding: 0.2em;
+ margin: auto;
+ border-top: 0.2em solid #ab9154;
+ border-left: 0.2em solid #ab9154;
+ border-bottom: 0.2em solid #4b3724;
+ border-right: 0.2em solid #4b3724;
+ border-radius: 1em;
+ background-color: #96733a;
+ text-align: center;
+ font-family: Sanchez;
+ }
+
+ .colophon a {
+ color: #e2b745;
+ text-shadow: 1px 1px #4f412b;
+ }
+
+ .colophon .top {
+ color: #e2b745;
+ display: block;
+ font-weight: bold;
+ white-space: nowrap;
+ }
+
+ .colophon p {
+ text-shadow: -1px -1px #5a5147;
+ font-size: 0.6em;
+ margin-top: 0.5em;
+ color: #fefefe;
+ }
</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?
objects you think you have are also inaccessible to you.
</dd>
</dl>
+ <div class="colophon">
+ <a class=top target=_blank href="https://yukkurigames.com">
+ Yukkuri Games
+ </a>
+ <p>
+ Labelle and <em>Animal Crossing</em> are property of Nintendo.
+ Typeset in Varela Round by <a target=_blank href="https://plus.google.com/115540960342941034012/posts">Joe Prince</a> and
+ Sanchez by <a target=_blank href="http://www.latinotype.com/">LatinoType</a>.
+ </p>
+ </div>
</body>
</html>
projects / labelle.git / blobdiff