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

[authserver.git] / authsystem.css

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;
 }