Second part of KaiRo bug 371 - Make design somewhat more appealing, make it work...

diff --git a/authsystem.css b/authsystem.css
index 17c113b99961f6bfc1be3e4ec9ddb77a9e6af8eb..b0d16e558ee0968f2dceb83fd5b31b3deb33ea8e 100644 (file)
--- a/authsystem.css
+++ b/authsystem.css
@@ -15,16 +15,36 @@ h1 {
   left: 0;
   right: 0;
   margin: 0;
-  padding: 10px 130px 0; /* IE8 and older do not support rem */
-  padding: 1rem 130px 0;
+  padding: 10px 0 0 130px; /* IE8 and older do not support rem */
+  padding: 1rem 0 0 130px;
   height: 60px; /* IE8 and older do not support rem */
   height: 4rem;
   min-height: calc(70px - 1rem);
+  font-size: 2em;
   background-color: #003366;
   color: #FFFFEE;
   background-image: url("KaiRoLogo-100x62.png");
   background-repeat: no-repeat;
   background-position: 10px 50%;
+  overflow: hidden;
+}
+@media screen and (max-width: 550px) {
+  h1 {
+    font-size: 1.5em;
+  }
+}
+@media screen and (max-width: 375px) {
+  h1 {
+    font-size: 1.2em;
+    padding-left: 120px;
+  }
+}
+@media screen and (max-width: 325px) {
+  h1 {
+    padding-top: 0.5rem;
+    height: 4.5rem;
+    min-height: calc(70px - 0.5rem);
+  }
 }
 
 a:link { color: #669999; }
@@ -114,6 +134,21 @@ table.border td {
   opacity: 0;
 }
 
+input,
+select {
+  font-size: .9em;
+}
+
+@media screen and (max-width: 375px) {
+  /* On smaller devices, make the form elements into larger touch targets. */
+  input,
+  select {
+    font-size: 1em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+  }
+}
+
 input:invalid {
   box-shadow: 0 0 2px 1px red;
 }

diff --git a/index.php b/index.php
index be42f59e47d1ed415d260d50aed5ff0d8d94eb54..ac22847af492a8e5239ab5de737d68ca794dd2b7 100644 (file)
--- a/index.php
+++ b/index.php
@@ -17,6 +17,11 @@ $head->appendJSFile('authsystem.js');
 $title->appendText('KaiRo.at Authentication Server');
 $h1 = $body->appendElement('h1', 'KaiRo.at Authentication Server');
 
+// Make the document not be scaled on mobile devices.
+$vpmeta = $head->appendElement('meta');
+$vpmeta->setAttribute('name', 'viewport');
+$vpmeta->setAttribute('content', 'width=device-width, height=device-height');
+
 $errors = $utils->checkForSecureConnection();
 $utils->sendSecurityHeaders();