From 0315f1655bebc5a65447218307065571fa3a5c79 Mon Sep 17 00:00:00 2001
From: Robert Kaiser <kairo@kairo.at>
Date: Mon, 14 Nov 2016 22:35:10 +0100
Subject: [PATCH] Second part of KaiRo bug 371 - Make design somewhat more
 appealing, make it work decently/responsively on mobile

---
 authsystem.css | 39 +++++++++++++++++++++++++++++++++++++--
 index.php      |  5 +++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/authsystem.css b/authsystem.css
index 17c113b..b0d16e5 100644
--- 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 be42f59..ac22847 100644
--- 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();
 
-- 
2.43.0