Full status bar.

[labelle.git] / index.html
diff --git a/index.html b/index.html

index 7991ed2..59d6270 100644 (file)
--- a/index.html
+++ b/index.html
@@ -30,15 +30,32 @@
            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 {
+      #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;
-          margin: 0 -1em;
        }
        
        #labelle {
@@ -88,6 +105,7 @@
    </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