<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
- <title>Labelle Litanizer - Outfit-Oriented Ontology - Animal Crossing: New Leaf</title>
- <meta charset="utf-8" />
+ <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">
+ <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">
+ <meta name="apple-mobile-web-app-title" content="Labelle Litanizer">
+ <title>
+ Labelle Litanizer
+ - Outfit-Oriented Ontology from Animal Crossing: New Leaf
+ </title>
<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>
- body { font-family: sans-serif; }
+ @font-face {
+ font-family: Varela;
+ font-style: normal;
+ font-weight: 400;
+ src: url('VarelaRound-Regular.woff') format('woff');
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ text-decoration: none;
+ }
+
+ [onclick] {
+ cursor: pointer;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+ }
+
+ html {
+ font-family: Varela;
+ font-size: 18px;
+ background: url(bg.png);
+ }
+
+ main {
+ width: 80%;
+ min-width: 280px;
+ margin: auto;
+ position: relative;
+ background-color: rgba(239, 243, 216, 0.9);
+ border: 0.3333em solid #f0f3dc;
+ border-radius: 4em;
+ top: 2em;
+ margin-top: 0;
+ height: 10em;
+ margin-bottom: 6em;
+ display: block;
+ }
+
+ #labelle {
+ position: absolute;
+ top: 1em;
+ left: -10%;
+ max-width: 28%;
+ }
+
+ #text {
+ position: absolute;
+ top: 8%;
+ left: 20%;
+ bottom: 1em;
+ right: 0.25em;
+ font-size: 1.25em;
+ }
- div.main { min-height: 480px; margin-top: 2em; }
- div#haveyou {
- font-size: 1.5em;
+ #haveyou {
font-style: italic;
- margin-bottom: 0.5em;
+ font-size: 0.75em;
}
- div#wearing { font-size: 2em; }
- dt { margin-top: 0.5em }
- dd { font-size: 0.9em }
+ #wearing {
+ width: 100%;
+ }
- #faq { color: gray; margin: 3em 10%; }
- #buttons { text-align: center; margin-bottom: 2em }
+ #wearing a {
+ color: #0A96AA;
+ }
- .button {
- font-size: 2em;
- text-decoration: none;
- background-color: #eee;
- color: #333;
- padding: 3px 6px 3px 6px;
- border-top: 1px solid #ccc;
- border-right: 1px solid #333;
- border-bottom: 1px solid #333;
- border-left: 1px solid #ccc;
- margin: 0.5em;
+ #wearing a:hover {
+ text-decoration: underline;
+ }
+
+ #buttons {
+ position: absolute;
+ top: 85%;
+ right: 1em;
+ width: 12em;
+ border: 0.2em solid #4cc2d2;
+ padding: 0.25em 0;
+ border-radius: 1em;
+ background-color: #fff6c1;
+ box-shadow: 0 0 0 0.1em #fff6c1;
+ transition: transform 0.1s;
+ transform: scale(0);
+ -webkit-transition: -webkit-transform 0.1s;
+ -webkit-transform: scale(0);
+ }
+
+ #buttons.open {
+ transition: transform 0.3s;
+ transform: scale(1);
+ -webkit-transition: -webkit-transform 0.3s;
+ -webkit-transform: scale(1);
+ }
+
+ #buttons a {
+ display: inline-block;
+ font-size: 1.25em;
+ color: black;
+ margin: 0.25em 0.5em;
+ margin-left: 2em;
+ border-bottom: 0.075em solid #f45c0a;
+ white-space: nowrap;
+ }
+
+ #buttons a:hover {
+ color: #f45c0a;
+ }
+
+ #buttons a:hover:before {
+ position: absolute;
+ left: 0;
+ display: inline-block;
+ width: 1em;
+ margin-left: 0.6667em;
+ content: "►";
+ color: #f45c0a;
}
- #twitter-share-button {
- padding: 2px 5px 2px 0.9em;
- background: url('https://twitter.com/favicons/favicon.png') 0.2em center no-repeat #EEEEEE;
+ #buttons a img {
+ vertical-align: middle;
+ width: 0.8em;
+ height: 0.65;
+ }
+
+ .day {
+ background-image: linear-gradient(#1e03e9, #185cfa 70%, transparent 71%);
+ }
+
+ .night {
+ background-image: linear-gradient(#070b5c, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
+ }
+
+ @media (max-width: 799px) {
+ html { font-size: 14px; }
+ }
+
+ @media (max-width: 639px) {
+ html { font-size: 12px; }
+ main { height: 12em; }
+ }
+
+ @media (max-width: 479px) {
+ main { height: 15em; }
+ }
+
+ dt {
+ border: #fafbe5 solid 0.1em;
+ border-radius: 1em;
+ padding-left: 2em;
+ background-color: #4ada48;
+ z-index: 1;
+ color: black;
+ padding: 0 1em;
+ display: inline-block;
+ }
+
+ dd {
+ border: 0.2em solid #ebd684;
+ background-color: rgba(0, 0, 0, 0.7);
+ border-radius: 1em 3em 2em 2em;
+ color: white;
+ text-shadow: 1px 1px black;
+ padding: 1em;
+ margin-top: -0.75em;
+ margin-bottom: 1em;
+ }
+
+ dl {
+ width: 60%;
+ min-width: 250px;
+ max-width: 500px;
+ padding: 1em;
+ margin: auto;
+ }
+
+ .person {
+ color: #4ada48;
+ }
+
+ .nonperson {
+ color: #00b6cf;
}
- }
</style>
</head>
- <body onload='litanizeElement("wearing", "twitter-share-button");'>
- <div class="main">
- <div style="float: left; max-width: 30%; padding-left: 1em;">
- <img src="labelle.jpg" style="max-width: 100%;"/>
- </div>
- <div style="float: right; width: 60%; margin-right: 5%; margin-top: 10%;">
+ <body onload='update();' class=day>
+ <main>
+ <img src="labelle-2.png" id=labelle>
+ <div id="text">
<div id="haveyou">Have you considered...</div>
<div id="wearing">...</div>
+ <div id="buttons">
+ <a onclick='update();'>How gauche.</a>
+ <a id=twitter target=_blank
+ href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">
+ <img src='twitter.png'>
+ Great idea!</a>
+ </div>
</div>
- </div>
- <div id="buttons">
- <a onclick='litanizeElement("wearing", "twitter-share-button");' class="button" href="#">How gauche.</a>
- <a id="twitter-share-button" target="_blank" class="button"
- href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">Great idea!</a>
- </div>
- <hr />
- <dl id="faq">
+ </main>
+ <dl>
<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.
+ and distribution of your random number generator, all
+ possible outfits should have some chance of appearing.
</dd>
<dt>What's with the name?</dt>
<dd>
- It's inspired by Ian
- Bogost's <a href="http://www.bogost.com/blog/latour_litanizer.shtml">Latour
- Litanizer</a>, and his writings about objects and carpentry
+ It's inspired by
+ <a target=_blank href="http://www.bogost.com/blog/latour_litanizer.shtml"><span class=person>Ian's</span> <span class=nonperson>
+ Latour Litanizer</span></a>, and his writings about objects and carpentry
more generally.
</dd>
<dt>Why?</dt>
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.
+ 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.
</dd>
<dt>
- Can I restrict it to my / catalogable / easily-accessible items (no
- DLC / region-exclusives)?
+ Can I restrict it to my items?
</dt>
<dd>
No. Instead, consider how the true <em>Daseine</em> of the
objects you think you have are also inaccessible to you.
</dd>
- <dt>Can you add images?</dt>
- <dd>
- I would like to, but a full set of wearable object images
- doesn't exist, and if it did I probably couldn't host it here
- due to its size (estimated ~150MB). If you have one and want
- to host it, let me know.
- </dd>
-
- <dt>It generated an invalid outfit / sentence / MoriDB link.<br/>
- It can't generate some valid outfit.<br/>
- You're missing my favorite item.</dt>
- <dd>
- Email me (joe.wreschnig at gmail) with the details,
- please. I'm certain there's still miscategorized caps/hats
- vs. masks/helmets, and plenty of items I forgot.
- </dd>
</dl>
</body>
</html>