<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">
+ <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">
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>
- <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>
@font-face {
font-family: Varela;
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 {
#labelle {
position: absolute;
- top: 1em;
left: -10%;
max-width: 28%;
}
display: inline-block;
width: 1em;
margin-left: 0.6667em;
- content: "â\96º";
+ content: "â\96¶";
color: #f45c0a;
}
height: 0.65;
}
- .day {
+ body {
background-image: linear-gradient(#1e03e9, #185cfa 70%, transparent 71%);
+ min-height: 100%;
}
- .night {
+ .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: linear-gradient(#070b5c, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
}
}
</style>
</head>
- <body onload='update();' class=day>
+ <body class=day>
+ <div id=statusbar></div>
<main>
<img src="labelle-2.png" id=labelle>
<div id="text">