<!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; }
-
- div.main { min-height: 480px; margin-top: 2em; }
+ div#labelle { height: 400px; margin-top: 40px; }
div#haveyou {
font-size: 1.5em;
font-style: italic;
}
div#wearing { font-size: 2em; }
- dt { margin-top: 0.5em }
- dd { font-size: 0.9em }
-
- #faq { color: gray; margin: 3em 10%; }
- #buttons { text-align: center; margin-bottom: 2em }
+ #buttons { text-align: center }
- .button {
+ a.button {
font-size: 2em;
text-decoration: none;
background-color: #eee;
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;
}
#twitter-share-button {
- padding: 2px 5px 2px 0.9em;
- background: url('https://twitter.com/favicons/favicon.png') 0.2em center no-repeat #EEEEEE;
+ padding: 2px 5px 2px 0.9em;
+ background: url('twitter.png') 0.2em center no-repeat #EEEEEE;
}
}
</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%;"/>
+ <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">
+ <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>
+ </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>
- </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">
+ <dl class="downplay">
<dt>What is this?</dt>
<dd>
The Labelle Litanizer generates random <em>Animal Crossing:
vs. masks/helmets, and plenty of items I forgot.
</dd>
</dl>
+ </main>
</body>
</html>
projects / labelle.git / commitdiff
