aboutsummaryrefslogtreecommitdiff
path: root/themes
diff options
context:
space:
mode:
authorDrew DeVault <sir@cmpwn.com>2020-05-13 14:48:02 -0400
committerSimon Ser <contact@emersion.fr>2020-05-13 20:54:15 +0200
commit5fee600c6ef8d7467a394ef04dbf9aa681cb540b (patch)
tree1e5dd65b9aec22ae65f7914bb1ac880d0378d6f8 /themes
parent5a73ca6ebb437c5eed2a9863ab5513facacb6e93 (diff)
downloadalps-5fee600c6ef8d7467a394ef04dbf9aa681cb540b.tar.gz
alps-5fee600c6ef8d7467a394ef04dbf9aa681cb540b.zip
alps theme: theme the login page
Diffstat (limited to 'themes')
-rw-r--r--themes/alps/assets/style.css46
-rw-r--r--themes/alps/login.html43
-rw-r--r--themes/alps/nav.html2
3 files changed, 66 insertions, 25 deletions
diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index b1c2ab7..b256b93 100644
--- a/themes/alps/assets/style.css
+++ b/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;
diff --git a/themes/alps/login.html b/themes/alps/login.html
index f599535..e642050 100644
--- a/themes/alps/login.html
+++ b/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"}}
diff --git a/themes/alps/nav.html b/themes/alps/nav.html
index 3c26166..1678434 100644
--- a/themes/alps/nav.html
+++ b/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>