X-Git-Url: https://git.yukkurigames.com/?p=labelle.git;a=blobdiff_plain;f=index.html;h=36259ad64b22ed5a422185789bb6a81eedc1d4fc;hp=45b4b9bcb160b0faccde736102088380e8ac8ef5;hb=97e6d1bd22b8a0126ff8984a8637a66b2b3674ac;hpb=2bc0c17a6b3af18a2b9f27118940531747e64321

diff --git a/index.html b/index.html
index 45b4b9b..36259ad 100644
--- a/index.html
+++ b/index.html
@@ -4,15 +4,8 @@
     <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">
@@ -21,18 +14,9 @@
       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;
@@ -58,6 +42,27 @@
           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 {
@@ -77,7 +82,6 @@
       
       #labelle {
           position: absolute;
-          top: 1em;
           left: -10%;
           max-width: 28%;
       }
@@ -151,7 +155,7 @@
           display: inline-block;
           width: 1em;
           margin-left: 0.6667em;
-          content: "►";
+          content: "▶";
           color: #f45c0a;
       }
 
@@ -161,12 +165,19 @@
           height: 0.65;
       }
 
-      .day {
-          background-image: linear-gradient(#1e03e9, #185cfa 70%, transparent 71%);
+      body {
+          background: -webkit-linear-gradient(top, #1e03e9 0%, #185cfa 70%, transparent 71%);
+          background: linear-gradient(#1e03e9 0%, #185cfa 70%, transparent 71%);
+          min-height: 100%;
       }
 
-      .night {
-          background-image: linear-gradient(#070b5c, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
+      .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: -webkit-linear-gradient(top, #070b5c 0%, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
+          background-image: linear-gradient(#070b5c 0%, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
       }
 
       @media (max-width: 799px) {
@@ -174,12 +185,12 @@
       }
 
       @media (max-width: 639px) {
-          html { font-size: 12px; }
+          html { font-size: 13px; }
           main { height: 12em; }
       }
 
       @media (max-width: 479px) {
-          main { height: 15em; }
+          main { height: 13.5em; }
       }
 
       dt {
@@ -221,7 +232,8 @@
       }
     </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">