From 60da723ce84b6e312e261646fca0478d01cdd929 Mon Sep 17 00:00:00 2001
From: Bob Mottram <bob@freedombone.net>
Date: Tue, 27 Aug 2019 15:34:27 +0100
Subject: [PATCH] Login screen style for mobile

---
 epicyon-login.css   | 85 ++++++++++++++++++++++++++++++++++++++++-----
 epicyon-profile.css |  2 +-
 2 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/epicyon-login.css b/epicyon-login.css
index 697f05050..8d522bb53 100644
--- a/epicyon-login.css
+++ b/epicyon-login.css
@@ -9,6 +9,7 @@
     --font-size-header: 18px;
     --font-color-header: #ccc;
     --font-size: 22px;
+    --font-size-mobile: 40px;
     --text-entry-foreground: #ccc;
     --text-entry-background: #111;
 }
@@ -92,12 +93,80 @@ span.psw {
     padding-top: 16px;
 }
 
-@media screen and (max-width: 300px) {
-    span.psw {
-	display: block;
-	float: none;
-    }
-    .cancelbtn {
-	width: 100%;
-    }
+@media screen and (min-width: 400px) {
+        body, html {
+                background-color: var(--main-bg-color);
+                color: var(--main-fg-color);
+
+                background-image: url("/login-background.png");
+                height: 100%;
+                font-family: Arial, Helvetica, sans-serif;
+                max-width: 60%;
+                min-width: 600px;
+                margin: 0 auto;
+                font-size: var(--font-size);
+                position: relative;
+                top: 3%;
+        }
+        .login-text {
+                font-size: var(--font-size);
+        }
+        input[type=text], input[type=password] {
+                width: 100%;
+                padding: 12px 20px;
+                margin: 8px 0;
+                display: inline-block;
+                border: 1px solid #ccc;
+                box-sizing: border-box;
+                font-size: var(--font-size);
+        }
+        button {
+                background-color: #555;
+                color: white;
+                padding: 14px 20px;
+                margin: 8px 0;
+                border: none;
+                cursor: pointer;
+                width: 100%;
+                font-size: var(--font-size);
+        }
+}
+
+@media screen and (max-width: 1000px) {
+        body, html {
+                background-color: var(--main-bg-color);
+                color: var(--main-fg-color);
+
+                background-image: url("/login-background.png");
+                height: 100%;
+                font-family: Arial, Helvetica, sans-serif;
+                max-width: 95%;
+                min-width: 600px;
+                margin: 0 auto;
+                font-size: var(--font-size-mobile);
+                position: relative;
+                top: 5%;
+        }
+        .login-text {
+                font-size: var(--font-size-mobile);
+        }
+        input[type=text], input[type=password] {
+                width: 100%;
+                padding: 12px 20px;
+                margin: 8px 0;
+                display: inline-block;
+                border: 1px solid #ccc;
+                box-sizing: border-box;
+                font-size: var(--font-size-mobile);
+        }
+        button {
+                background-color: #555;
+                color: white;
+                padding: 14px 20px;
+                margin: 8px 0;
+                border: none;
+                cursor: pointer;
+                width: 100%;
+                font-size: var(--font-size-mobile);
+        }
 }
diff --git a/epicyon-profile.css b/epicyon-profile.css
index 42f4ebef4..197d5a6b6 100644
--- a/epicyon-profile.css
+++ b/epicyon-profile.css
@@ -446,7 +446,7 @@ a:link {
 .time-right {
     float: right;
     color: #aaa;
-    margin: 4px 0px;
+    margin: 4px 20px;
 }
 
 .post-title {