https://src.bluestatic.org / skeletonkey.git / commitdiff
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a2aeb5a)
Make the hosted page responsive based on min-width rather than pixel density.
authorRobert Sesek <rsesek@bluestatic.org>
Mon, 24 Feb 2014 00:31:36 +0000 (19:31 -0500)
committerRobert Sesek <rsesek@bluestatic.org>
Mon, 24 Feb 2014 00:31:36 +0000 (19:31 -0500)
core.css patch | blob | history
hosted.css patch | blob | history
hosted.html patch | blob | history

diff --git a/core.css b/core.css
index fe48e8059007eca5e69602b792ffee1388bb6cb8..341f2ae92612fcf72c47c7a825bd63bde0dced7e 100644 (file)
--- a/core.css
+++ b/core.css
@@ -80,8 +80,25 @@ hr {
   clear: both;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
+@media screen and (max-width: 800px) {
   body {
-    font-size: 1.1em;
+    margin: 0;
+    padding: 0;
+    width: 90%;
+  }
+
+  li input {
+    display: block;
+    width: 100%;
+  }
+
+  li label {
+    text-align: left;
+  }
+
+  li button {
+    float: none;
+    width: 100%;
+    margin: 0;
   }
 }
diff --git a/hosted.css b/hosted.css
index 80dc4d83bf7de4809e04bbee892fe6bf3f641a15..5e107cb13f8a0e41477239b45e5240117b8fcb78 100644 (file)
--- a/hosted.css
+++ b/hosted.css
@@ -54,13 +54,19 @@ iframe {
   height: 6.25em;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
+@media screen and (max-width: 800px) {
+  html {
+    padding: 0;
+    margin: 0;
+  }
+
   body {
     background-color: #FFF;
+    width: 99%;
   }
 
   h1 {
-    font-size: 4em;
+    font-size: 1.5em;
   }
   p {
     display: none;
@@ -69,6 +75,8 @@ iframe {
   iframe {
     width: 100%;
     border: none;
+    margin: 0.1em;
+    overflow: hidden;
   }
 
   #core {
diff --git a/hosted.html b/hosted.html
index 2c42f9b28e7143422f774862c7f06fd054efc116..47ec475b80af1e194966fa1cc335f484b3e8a649 100644 (file)
--- a/hosted.html
+++ b/hosted.html
@@ -2,7 +2,7 @@
 <html manifest="skeletonkey.appcache">
   <head>
     <title>Skeleton Key Hosted</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
     <link rel="stylesheet" href="common.css" />
     <link rel="stylesheet" href="hosted.css" />
   </head>
A Chrome extension that uses PBKDF2 hashing to generate cryptographically secure passwords.