<!DOCTYPE html>
-<html lang="en">
+<html lang="en" manifest="labelle.manifest">
<head>
<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">
+ <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">
<link rel="stylesheet" href="/css/main.css" type="text/css">
<title>
Labelle Litanizer
</title>
<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>
+ #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;
+ }
+
+ header:hover #statusbar {
+ background-color: rgb(244, 126, 126);
+ }
+
+ header.statusbar {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-top-width: 20px;
+ }
+
#labelle {
min-height: 180px;
margin-top: 1em;
text-align: center;
}
- a.button:link {
+ .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;
.button.twitter {
padding: 2px 5px 2px 32px;
- background: url('twitter.png') 0.2em center no-repeat #eee;
+ background: url('twitter.png') 8px center no-repeat #eee;
}
</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