<!DOCTYPE html>
-<html lang="en" manifest="labelle.manifest">
+<html lang="en">
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<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">
- <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>
});
</script>
<style>
- #statusbar {
- background-color: rgb(206, 132, 242);
- height: 20px;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- transition: background-color 0.5s;
- z-index: 1;
- display: none;
+ @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;
}
- header:hover #statusbar {
- background-color: rgb(244, 126, 126);
+ html {
+ font-family: Varela;
+ font-size: 18px;
+ background: url(bg.png);
}
- header.statusbar {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- border-top-width: 20px;
+ 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 {
- min-height: 180px;
- margin-top: 1em;
+ 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;
}
#haveyou {
- font-size: 1.5em;
font-style: italic;
- margin-bottom: 0.25em;
+ font-size: 0.75em;
}
#wearing {
- font-size: 2em;
+ width: 100%;
+ }
+
+ #wearing a {
+ color: #0A96AA;
+ }
+
+ #wearing a:hover {
+ text-decoration: underline;
}
#buttons {
- text-align: center;
+ 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);
}
- .button {
- font-size: 2em;
- text-decoration: none;
- background-color: #eee;
- 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.25em 0.5em;
+ #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;
}
- @media (max-width: 600px) {
- #wearing { font-size: 1.25em; }
- #haveyou, .button { font-size: 1.125em; }
+ #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;
+ }
+
+ .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; }
}
- .button.twitter {
- padding: 2px 5px 2px 32px;
- background: url('twitter.png') 8px center no-repeat #eee;
+ @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", "share-button");'>
- <header>
- <div id='statusbar'></div>
- <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 onload='update();' class=day>
<main>
- <div id="labelle" style="float: left; width: 100%;">
- <div style="float: left; width: 30%">
- <img src="labelle.jpg" style="max-width: 100%;"/>
+ <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 style="float: right; width: 66%; margin-top: 0.5em">
- <div id="haveyou">Have you considered...</div>
- <div id="wearing">...</div>
- </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">
- <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>
+ <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.
+ </dd>
+ <dt>What's with the name?</dt>
+ <dd>
+ 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.
+ </dd>
+ <dt>
+ 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>
+ </dl>
</body>
</html>
projects / labelle.git / commitdiff
