alps theme: theme the login page

themes/alps/assets/style.css

@@ -127,13 +127,40 @@ aside { flex: 0 0 180px; }
 aside a { width: 100%; display: block; padding: 0.4rem 0 0.4rem 0.5rem; }
 aside a.active { font-weight: bold; color: black; text-decoration: none; }
 aside img { display: block; }
-main { flex: 1 100%; display: flex; flex-direction: column; padding: 0.5rem 1rem 0.5rem 0.5rem; min-width: 0; }
+main {
+  flex: 1 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+  min-width: 0;
+  background-color: #f6f6f6;
+}
+
+main.login {
+  justify-content: center;
+}
+
+main.login > section {
+  align-self: center;
+  background: white;
+  min-width: 20rem;
+  padding: 1rem;
+}
 
 aside a.active,
-main { background-color: #f6f6f6; }
-aside a.new.active { color: #008d47; }
+aside a.new.active {
+  background-color: #f6f6f6;
+}
+
+aside a.new.active {
+  color: #008d47;
+}
+
 aside a.new.active,
-main.compose { background-color: #f6fff6; }
+main.compose {
+  background-color: #f6fff6;
+}
+
 main.compose { flex: 1 auto; padding: 1rem; }
 main.compose form { flex: 1 auto; display: flex; flex-direction: column; }
 main.compose form label { margin-top: 5px; }
@@ -316,14 +343,25 @@ main table tfoot {
   margin-right: 0.3rem;
 }
 
+.action-group:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
 .actions-wrap .action-group {
   margin-left: 0.3rem;
+  margin-bottom: 0;
 }
 
 .action-group.grow {
   flex-grow: 1;
 }
 
+.action-group label,
+.action-group input {
+  display: block;
+  width: 100%;
+}
+
 .actions-message,
 .actions-contacts {
   display: flex;

themes/alps/login.html

@@ -1,26 +1,29 @@
 {{template "head.html" .}}
-  <h1>alps webmail</h1>
 
-  <form method="post" action="/login">
-    <p>
-      <label>
-        <strong>Username</strong>
-        <br/>
+<main class="login">
+  <section>
+    <h1>Webmail Login</h1>
+
+    <form method="post" action="/login">
+      <div class="action-group">
+        <label for="username">
+          <strong>Username</strong>
+        </label>
         <input type="text" name="username" id="username" autofocus />
-      </label>
-    </p>
-    <br/>
-    <p>
-      <label>
-        <strong>Password</strong>
-        <br/>
+      </div>
+
+      <div class="action-group">
+        <label for="password">
+          <strong>Password</strong>
+        </label>
         <input type="password" name="password" id="password" />
-      </label>
-    </p>
-    <br/>
-    <p>
-      <button>Sign in</button>
-    </p>
-</form>
+      </div>
+
+      <div class="action-group">
+        <button type="submit">Sign in</button>
+      </div>
+    </form>
+  </section>
+</main>
 
 {{template "foot.html"}}

themes/alps/nav.html

@@ -2,7 +2,7 @@
   <nav>
     {{$page := (index .GlobalData.Path 0)}}
     <a href="/"
-      {{ if or (eq $page "mailbox") (eq $page "message") }}
+      {{ if or (eq $page "mailbox") (eq $page "message") (eq $page "compose") }}
       class="active"
       {{ end }}
     >Email</a>