<!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">
+ <link rel="stylesheet" href="/css/main.css" type="text/css">
+ <title>
+ Labelle Litanizer
+ - Outfit-Oriented Ontology from Animal Crossing: New Leaf
+ ~ Yukkuri Games
+ </title>
<script type="text/javascript" src="acnl-wearables-list.js"></script>
<script type="text/javascript" src="acnl-outfit.js"></script>
<style>
- body { font-family: sans-serif; }
+ #labelle {
+ min-height: 180px;
+ margin-top: 1em;
+ }
- div.main { min-height: 480px; margin-top: 2em; }
- div#haveyou {
+ #haveyou {
font-size: 1.5em;
font-style: italic;
- margin-bottom: 0.5em;
+ margin-bottom: 0.25em;
}
- div#wearing { font-size: 2em; }
- dt { margin-top: 0.5em }
- dd { font-size: 0.9em }
+ #wearing {
+ font-size: 2em;
+ }
- #faq { color: gray; margin: 3em 10%; }
- #buttons { text-align: center; margin-bottom: 2em }
+ #buttons {
+ text-align: center;
+ }
.button {
font-size: 2em;
text-decoration: none;
background-color: #eee;
- color: #333;
+ color: #333 !important;
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;
+ margin: 0.25em 0.5em;
+ display: inline-block;
+ white-space: nowrap;
+ }
+
+ @media (max-width: 600px) {
+ #wearing { font-size: 1.25em; }
+ #haveyou, .button { font-size: 1.125em; }
}
- #twitter-share-button {
- padding: 2px 5px 2px 0.9em;
- background: url('https://twitter.com/favicons/favicon.png') 0.2em center no-repeat #EEEEEE;
+ .button.twitter {
+ padding: 2px 5px 2px 32px;
+ background: url('twitter.png') 8px center no-repeat #eee;
}
- }
</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%;"/>
+ <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>
+ <main>
+ <div id="labelle" style="float: left; width: 100%;">
+ <div style="float: left; width: 30%">
+ <img src="labelle.jpg" style="max-width: 100%;"/>
+ </div>
+ <div style="float: right; width: 66%; margin-top: 0.5em">
+ <div id="haveyou">Have you considered...</div>
+ <div id="wearing">...</div>
+ </div>
</div>
- <div style="float: right; width: 60%; margin-right: 5%; margin-top: 10%;">
- <div id="haveyou">Have you considered...</div>
- <div id="wearing">...</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>
- </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">
- <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.
- </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
- 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.
- </dd>
- <dt>
- Can I restrict it to my / catalogable / easily-accessible items (no
- DLC / region-exclusives)?
- </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 (joe.wreschnig at gmail) or tweet
- (<a href="https://twitter.com/jwreschnig">@jwreschnig</a>)
- with the details, please. I'm certain there's still
- miscategorized caps/hats vs. masks/helmets, and plenty of
- items I forgot.
- </dd>
- </dl>
+ <hr>
+ <dl class="downplay">
+ <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.
+ </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
+ 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.
+ </dd>
+ <dt>
+ Can I restrict it to my / catalogable / easily-accessible
+ items (no DLC / region-exclusives)?
+ </dt>
+ <dd>
+ No. Instead, consider how the true <em>Daseine</em> of the
+ objects you think you have are also inaccessible to you.
+ </dd>
+ </dl>
+ </main>
</body>
</html>
projects / labelle.git / blobdiff