<!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">
- <link rel="stylesheet" href="/css/main.css" type="text/css">
- <title>Labelle Litanizer - Outfit-Oriented Ontology from Animal Crossing: New Leaf ~ Yukkuri Games</title>
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <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">
+ <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="fastclick.js"></script>
<script type="text/javascript" src="acnl-wearables-list.js"></script>
<script type="text/javascript" src="acnl-outfit.js"></script>
<style>
- div#labelle { height: 400px; margin-top: 40px; }
- div#haveyou {
- font-size: 1.5em;
- font-style: italic;
- margin-bottom: 0.5em;
+ @font-face {
+ font-family: Varela;
+ font-style: normal;
+ font-weight: 400;
+ src: url('VarelaRound-Regular.woff') format('woff');
}
- div#wearing { font-size: 2em; }
- #buttons { text-align: center }
+ @font-face {
+ font-family: Sanchez;
+ font-style: normal;
+ font-weight: 400;
+ src: url('Sanchez-Regular.woff') format('woff');
+ }
- .button {
- font-size: 2em;
+ * {
+ margin: 0;
+ padding: 0;
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;
+ }
+
+ [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);
+ 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 {
+ 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;
+ left: -10%;
+ max-width: 28%;
+ }
+
+ #text {
+ position: absolute;
+ top: 8%;
+ left: 20%;
+ bottom: 1em;
+ right: 0.25em;
+ font-size: 1.25em;
+ }
+
+ #haveyou {
+ font-style: italic;
+ font-size: 0.75em;
+ }
+
+ #wearing {
+ width: 100%;
+ }
+
+ #wearing a {
+ color: #0A96AA;
+ }
+
+ #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;
+ }
+
+ #buttons a img {
+ vertical-align: middle;
+ width: 0.8em;
+ height: 0.65;
+ }
+
+ 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;
+ }
+
+ .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) {
+ html { font-size: 14px; }
+ }
+
+ @media (max-width: 639px) {
+ html { font-size: 13px; }
+ main { height: 12em; }
+ }
+
+ @media (max-width: 479px) {
+ main { height: 13.5em; }
+ }
+
+ 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;
+ }
+
+ .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;
}
- .button.twitter {
- padding: 2px 5px 2px 0.9em;
- background: url('twitter.png') 0.2em center no-repeat #eee;
+ .colophon p {
+ text-shadow: -1px -1px #5a5147;
+ font-size: 0.6em;
+ margin-top: 0.5em;
+ color: #fefefe;
}
- }
</style>
</head>
- <body onload='litanizeElement("wearing", "share-button");'>
- <header>
- <a href="http://yukkurigames.com" id="header-logo">
- <img src="/logotype_horizontal_1.png" class="logo"
- data-large
- alt="(◕ ヮ ◕)"
- ><img src="/logotype_horizontal_2.png"
- data-optional
- alt="Yukkuri Games"
- ><img src="/logotype_horizontal_3.png" class="logo"
- data-small
- alt="(◕ ヮ ◕)">
- </a>
- <h1>Labelle Litanizer</h1>
- </header>
+ <body class=day>
+ <div id=statusbar></div>
<main>
- <div id="labelle">
- <div style="float: left; width: 30%">
- <img src="labelle.jpg" style="max-width: 100%;"/>
- </div>
- <div style="float: right; width: 60%; margin-right: 2em; margin-top: 2em">
- <div id="haveyou">Have you considered...</div>
- <div id="wearing">...</div>
+ <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 id="buttons">
- <a onclick='litanizeElement("wearing", "share-button", event);'
- class="button" href="">How gauche.</a>
- <a id="share-button" target="_blank" class="twitter button"
- href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">Great idea!</a>
- </div>
- <hr>
- <dl class="downplay">
+ </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.
+ 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>
- 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>
<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 / 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>
- </main>
+ <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