Merge pull request #17 from sbmaxx/styleExample

Styling example to looks fine both on iPhone, iPad, desktops
googlearchive · Jul 11, 2014 · 5490290 · 5490290
2 parents d1cb962 + 7a0c924
commit 5490290
Showing 1 changed file with 28 additions and 15 deletions.
diff --git a/samples/simple/index.html b/samples/simple/index.html
@@ -28,26 +28,39 @@
       }
       #capture {
         background-color: orange;
-        height: 300px;
-        width: 300px;
-        text-align: center;
+        height: 70%;
+        width: 100%;
+        position: absolute;
+        top: 0;
       }
       #enterleave {
         background-color: blue;
-        height: 150px;
-        width: 150px;
-        text-align: center;
-        vertical-align: center;
-        line-height: 150px;
-        left: 25%;
-        top: 25%;
-        position: relative;
+        height: 50%;
+        width: 50%;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
+        margin: auto;
       }
-      #output {
-        width: 300px;
-        height: 150px;
+      #wrapper {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 30%;
         overflow: scroll;
         white-space: pre;
+        margin: 0 auto;
+        background: #f8f8f8;
+        font-family: Consolas, "Liberation Mono", Courier, monospace;
+        color: #333333;
+        font-size: 12px;
+      }
+
+      #output {
+         margin:0;
+         padding: 5px;
       }
     </style>
     <script src="../../polymer-gestures.js"></script>
@@ -57,7 +70,7 @@
       <div id="enterleave">
       </div>
     </div>
-    <div id="output"></div>
+    <div id="wrapper"><div id="output"></div></div>
     <script>
       var events = [
         // base events