unify theme with website and form input fixes

gpg-mailgate-web/public_html/theme/home.php

@@ -21,30 +21,36 @@
 */
 ?>
 
-<img src="theme/branding/logo.png" class="center logo">
-<h1><?= $config['site_title'] ?></h1>
+<div id=header>
+ <a href <?= $config['site_url'] ?>><img src="theme/branding/logo.png" class="center logo"></a>
+ <h1><?= $config['site_title'] ?></h1>
+ </div>
 
-<? if(!empty($message)) { ?>
-<p style="color:red;"><div id=infomsg><b><i><?= htmlspecialchars($message) ?></i></b></div></p>
-<? } ?>
-<p><?= $lang['home_text'] ?></p>
-<form id="keyform" method="POST">
-  <p>
-    <label for="email"><?= $lang['home_emaildesc'] ?></label>
-      <br>
-      <input type="text" class="email" name="email" required>
-  </p>
-  <p>
-    <label for="key"><?= $lang['home_keydesc'] ?></label>
-      <br>
-      <input type="text" class="key" name="key" required></label>
-  </p>
-  <p>
-    <input type="submit" value="<?= $lang['home_submitkey'] ?>" />
-  </p>
-</form>
-
-<img src="theme/branding/bottom_ribbon.png" class="cover">
-<p><?= $lang['home_footer'] ?></p>
+ <div class="wrapper padding">
+ <? if(!empty($message)) { ?>
+ <div id=infomsg><p><b><i><?= htmlspecialchars($message) ?></i></b></p></div>
+ <? } ?>
+ <p><?= $lang['home_text'] ?></p>
+ <form id="keyform" method="POST">
+   <p>
+     <label for="email"><?= $lang['home_emaildesc'] ?></label>
+       <br>
+       <input type="text" class="email" name="email" required>
+   </p>
+   <p>
+     <label for="key"><?= $lang['home_keydesc'] ?></label>
+       <br>
+       <!--input type="text" class="key" name="key" required-->
+      <textarea rows="5" cols="80" name="key" id="key" class="key" required></textarea>
+   </p>
+   <p>
+     <input type="submit" value="<?= $lang['home_submitkey'] ?>" />
+   </p>
+ </form>
 
+ </div>
 
+<div id=footer>
+ <img src="theme/branding/bottom_ribbon.png" class="cover">
+ <p><?= $lang['home_footer'] ?></p>
+ </div>

gpg-mailgate-web/public_html/theme/style.css

@@ -6,9 +6,16 @@
   --main-font-color: #E3DEDB;
   --main-linkcolor: #BB2244;
   --main-hovercolor: #2C4359;
- 
+   /*  --bg-color: #203040 ;
+   --logo-color: #BB2244;
+   --highlight-color: #DD4466;
+   --txt-color: #E3DEDB;
+   --select-color: #2C4359;
+ */
+
+
   /* background colors */
-  --bg-hs: 210, 33%; 
+  --bg-hs: 210, 33%;
   --bg-l:19%;
   --bg: hsl(var(--bg-hs),var(--bg-l));
   --bg-darker: hsl(var(--bg-hs),calc(var(--bg-l) - 5%));
@@ -20,7 +27,7 @@
   --main: hsl(var(--main-hs),var(--main-l));
   --main-darker: hsl(var(--main-hs),calc(var(--main-l) - 5%));
   --main-darkest: hsl(var(--main-hs),calc(var(--main-l) - 10%));
- 
+
   /* font color */
   --font-hs: 23, 12%;
   --font-l: 87%;
@@ -32,16 +39,22 @@ html {
   background-color: var(--bg-darkest);
 }
 body {
-  width: 45em;
+  width: 70%;
   margin: 0 auto;
   background-color: var(--bg);
   color: var(--font);
   font-family: var(--main-font);
+  line-height: 1.2;
   text-align: center;
 }
+ .wrapper {
+         margin: 0 20%;
+ }
+ .padding {
+         padding: 3rem 1rem;
+ }
 img.logo {
-  padding-top: 10em;
-  width: 30em;
+  width: 70%;
 }
 .center {
   display: block;
@@ -49,10 +62,13 @@ img.logo {
   margin-right: auto;
 }
 .cover {
-  width: 100%;    
-  margin-top: 10%;
+  width: 100%;
+  margin-left: 0;
   object-fit: cover;
 }
+.hide {
+   display:none;
+ }
 a {
   color: var(--main);
   text-decoration:none;
@@ -65,28 +81,31 @@ a:hover {
 }
 .key {
   width: 80%;
+  margin: 1rem auto;
   height: 150px;
   padding: 12px 20px;
-  border-radius: 4px;
-  border: 0px;
-  background-color: var(--bg-darker);
-  color: var(--font);
+  border-radius: 10px;
+  border: 1px solid var(--main);
+  background-color: var(--font);
+  color: var(--bg);
   font-family: var(--main-font);
   resize: none;
 }
 .email {
   width: 50%;
+  margin: 1rem auto;
   padding: 12px 20px;
-  border-radius: 4px;
-  border: 0px;
-  background-color: var(--bg-darker);
-  color: var(--font);
+  border-radius: 10px;
+  border: 1px solid var(--main);
+  background-color: var(--font);
+  color: var(--bg);
   font-family: var(--main-font);
   resize: none;
 }
 input[type=submit] {
   background-color: var(--main-darker);
-  border: none;
+  border-radius: 4px;
+  border: 0px;
   color: var(--font);
   padding: 16px 32px;
   margin: 4px 2px;
@@ -96,16 +115,19 @@ input:hover[type=submit] {
   background-color: var(--main-darkest);
 }
 .infomsg {
-  width: 80%;
-  padding: 12px 20px;
+  width: 70%;
+  margin: 0 auto;
   border-radius: 4px;
   border: 2px;
   border-color: var(--main);
-  background-color: var(--bg-darker);
-  color: var(--font);
+  background-color: var(--bg); /*shold be bg-darker but hidden when empty*/
+  color: var(--main);
   font-family: var(--main-font);
   resize: none;
 }
-.infomsg:empty {
-  display: none;
-}
+ #infomsg p:empty {
+   display: none;
+ }
+ #infomsg p {
+   padding: 12px 24px;
+ }