Derping on status bar stuff.

dist/theme-classic.css

@@ -8,6 +8,10 @@
 * =====================================================
 */
 
+.bar-header-secondary ~ .content {
+  padding-top: 108px;
+}
+
 [class*="bar-"] {
   background-color: rgba(30, 176, 233, 0.98);
 }
@@ -15,6 +19,15 @@
   background-color: rgba(245, 245, 245, 0.98);
 }
 
+.bar-title {
+  top: 20px;
+  box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
+}
+
+[class*="bar-"].bar-header-secondary {
+  top: 64px;
+}
+
 .title {
   color: #fff;
 }

examples/app-classic/checkout.html

@@ -5,7 +5,7 @@
     <title>Movie finder</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">

examples/app-classic/choose-movie.html

@@ -5,7 +5,7 @@
     <title>Movie finder</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">

examples/app-classic/choose-theater.html

@@ -5,7 +5,7 @@
     <title>Movie finder</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">

examples/app-classic/index.html

@@ -5,7 +5,7 @@
     <title>Movie finder</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">

examples/app-classic/settings.html

@@ -5,7 +5,7 @@
     <title>Movie finder</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">

examples/app-classic/theaters.html

@@ -5,7 +5,7 @@
     <title>Movie finder</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">

lib/sass/theme-classic.scss

@@ -14,6 +14,13 @@ $default-color:  rgba(0, 0, 0, .3);
 $positive-color: #34ba15;
 $negative-color: #e71e1e;
 
+// Global
+// --------------------------------------------------
+
+.bar-header-secondary ~ .content {
+  padding-top: 108px;
+}
+
 
 // Bars
 // --------------------------------------------------
@@ -25,6 +32,13 @@ $negative-color: #e71e1e;
     background-color: rgba(245,245,245,.98);
   }
 }
+.bar-title {
+  top: 20px;
+  box-shadow: 0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85)
+}
+[class*="bar-"].bar-header-secondary {
+  top: 64px;
+}
 .title {
   color: #fff;
 }