reworked templates based on purecss

20 files changed, 463 insertions, 389 deletions

diff --git a/CHANGES.md b/CHANGES.md
index 42eef5a..23383f7 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -128,9 +128,16 @@ Current v1.1.0
 - [x] merge read and raw (with content type)
   - how does one extract the body functionality? (One does not.)
 - [x] refactor templates to make use of link_to
+- [x] improve html styling (especially for mobile)
+  - [x] about
+  - [x] displayheaders
+  - [x] nocation
+  - [x] readmail
+  - [x] writemail
 - [ ] improve i18n
   - [ ] add localization of dates and time
   - [x] refactor I18N plugin to allow independent translate provider
+  - [ ] extend matcher dynamic with a role
 - [ ] fix tests
 - [ ] moving mails to other folders
   - [ ] creating new folders
@@ -138,6 +145,7 @@ Current v1.1.0
 - [ ] specify protocol for backend interaction
   - [ ] choose tool for validation
 - [ ] cleanup README
+- [ ] improve about page
 - [ ] improve performance of backend, consider alternatives to Mail::Box::Manager
   - [ ] based on Maildir::Light
   - [x] reimplementation in Rust
diff --git a/lang/en.lang b/lang/en.lang
index 6e3d447..6d0d360 100644
--- a/lang/en.lang
+++ b/lang/en.lang
@@ -36,6 +36,7 @@ sender = sender
 subject = subject
 size = size
 home = home
+back = back
 
 no_session = You have no active session!
 no_folder = "no such folder"
@@ -48,4 +49,4 @@ INBOX = inbox
 SENT = sent
 TRASH = trash
 SAVED = saved
-Home = home
\ No newline at end of file
+Home = home
diff --git a/public/style.css b/public/style.css
index 23a7cbf..8e771b0 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,14 +1,10 @@
 :root {
-    --color-font: #000000;
-    --color-background: #DDDDDD;
+    --color-background: #ddd;
+    --color-table-row: #eee;
+    --color-head: #026;
     --color-table-em: lightblue;
-    --color-table-em2: #D3DCE3;
-    --color-table-row: #EEEEEE;
-    --color-link: blue;
-    --color-link-visited: purple;
-    --color-link-hover: red;
+    --color-table-em2: #d3dce3;
     --color-warning: orange;
-    --color-head: #002266;
 }
 
 /* GENERAL */
@@ -19,15 +15,15 @@ body {
 
 a:link {
     text-decoration: none;
-    color: var(--color-link);
+    color: blue;
 }
 a:visited {
     text-decoration: none;
-    color: var(--color-link-visited);
+    color: purple;
 }
 a:hover {
     text-decoration: underline;
-    color: var(--color-link-hover);
+    color: red;
 }
 
 footer {
diff --git a/public/style2.css b/public/style2.css
new file mode 100644
index 0000000..664771a
--- /dev/null
+++ b/public/style2.css
@@ -0,0 +1,95 @@
+:root {
+  --jwm-color-back: #eee;
+  --jwm-color-front: #ddd;
+}
+
+body {
+  padding: 1rem;
+}
+
+a {
+  text-decoration-line: none;
+}
+
+a:hover {
+  text-decoration-line: underline;
+}
+
+footer {
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.jwm-base {
+  background-color: var(--jwm-color-back);
+  border-radius: 5px;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+  .jwm-base > nav {
+    margin-top: 1rem;
+  }
+
+.jwm-warning {
+  background-color: orange;
+  padding: 1rem;
+}
+
+.jwm-post {
+  background-color: var(--jwm-color-front);
+  border-radius: 5px;
+  padding: 0.5rem 1rem;
+}
+
+.jwm-nav {
+  background-color: var(--jwm-color-back);
+  border-radius: 5px;
+  padding: 0 1rem;
+}
+
+.jwm-mail-body {
+    width: 80%;
+    margin: 0rem auto;
+}
+
+  .jwm-mail-body > iframe.html-mail {
+    width: 100%;
+    height: 400px;
+  }
+
+/* make sure this lines up with pure-md class */
+@media screen and (max-width: 48em) {
+  .hide-small {
+    display: none;
+  }
+}
+
+#displayheaders {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+  #mail-headers {
+    width: 100%;
+  }
+
+  #empty-folder {
+    text-align: center;
+  }
+
+#login {
+  max-width: 640px;
+}
+
+  #login > h1 {
+    text-align: center;
+  }
+
+  #login > form {
+    background-color: var(--jwm-color-front);
+    padding-top: 1rem;
+    padding-left: 6px;
+  }
diff --git a/templates/_pagination1.html.ep b/templates/_pagination1.html.ep
deleted file mode 100644
index 14354c0..0000000
--- a/templates/_pagination1.html.ep
+++ /dev/null
@@ -1,5 +0,0 @@
-<a href="<%= url_with->query({start => $prev_page->[0]-1}) %>"><img src="/left.gif" alt="←"></a>
-<a href="<%= url_with->query({start => $first_page->[0]-1}) %>"><img src="/first.gif" alt="↞"></a>
-[<%= join(' ', ucfirst l('page'), $current_page, l('of'), $total_pages) %>]
-<a href="<%= url_with->query({start => $last_page->[0]-1}) %>"><img src="/last.gif" alt="↠"></a>
-<a href="<%= url_with->query({start => $next_page->[0]-1}) %>"><img src="/right.gif" alt="→"></a>
diff --git a/templates/_pagination2.html.ep b/templates/_pagination2.html.ep
deleted file mode 100644
index e03dbb0..0000000
--- a/templates/_pagination2.html.ep
+++ /dev/null
@@ -1,22 +0,0 @@
-<a href="<%= url_with->query({start => $first_page->[0]-1}) %>"> <img src="/first.gif" alt="<%= l('first') . ' ' . l 'page' %>"></a>\
-<a href="<%= url_with->query({start => $prev_page->[0]-1}) %>"> <img src="/left.gif" alt="<%= l('previous') . ' ' . l 'page' %>"> </a>
-
-%= form_for '' => begin
-  [
-    %= label_for custompage => ucfirst l 'page'
-    %= number_field start => (id => 'custompage') => (size => 3) => (placeholder => $current_page)
-    %= l 'of'
-    %= $total_pages
-  ]
-
-% my $h = $c->req->query_params->to_hash;
-% while (my ($k, $v) = each %$h) {
-%   if ($k ne 'start') {
-  %= hidden_field $k => $v
-%   }
-% }
-
-% end
-
-<a href="<%= url_with->query({start => $next_page->[0]-1}) %>"> <img src="/right.gif" alt="<%= l('next') . ' ' . l 'page' %>"> </a>\
-<a href="<%= url_with->query({start => $last_page->[0]-1}) %>"> <img src="/last.gif" alt="<%= l('last') . ' ' . l('page') %>"> </a>
diff --git a/templates/error.html.ep b/templates/error.html.ep
index d120e69..3a1d5e3 100644
--- a/templates/error.html.ep
+++ b/templates/error.html.ep
@@ -1,4 +1,5 @@
-<!DOCTYPE html>
+<!doctype html>
+
 <html>
 
   <head>
diff --git a/templates/headers/_display_bot_nav.html.ep b/templates/headers/_display_bot_nav.html.ep
index ea1ce3c..9064d6e 100644
--- a/templates/headers/_display_bot_nav.html.ep
+++ b/templates/headers/_display_bot_nav.html.ep
@@ -1,33 +1,26 @@
-<table id=bot-nav width=100%>
-
-  <colgroup>
-    <col width=70% />
-    <col width=10% />
-    <col width=20% />
-  </colgroup>
-
-  <tr>
-    <td>
-      %= include '_pagination1';
-    </td>
-
-    <td>
-      <label for=allbox><%= l 'check_all' %></label>:
-      <input name=allbox type=checkbox onclick="check_all(this)">
-    </td>
-
-    <td>
-      %= form_for move => (id => 'move-mail') => begin
-        %= label_for 'select-folder' => l('move') . ' ' . l('to')
-        %= select_field folder => [grep {$_ ne $folder} @$mail_folders] => (id => 'select-folder')
-        %= csrf_field
-        %= submit_button l 'move'
-      % end
-
-    </td>
-  </tr>
-</table>
-
+<div class="pure-g jwm-nav">
+
+  <div class="pure-u-1-2 pure-u-md-1-4">
+    %= include 'headers/_pagination1'
+  </div>
+
+  <div class="pure-u-1-2 pure-u-md-1-4">
+    <label for=allbox><%= l 'check_all' %></label>
+    <input name=allbox type=checkbox onclick="check_all(this)">
+  </div>
+
+  <div class="pure-u-1-1 pure-u-md-1-2">
+    %= form_for move => (id => 'move-mail') => (class => 'pure-form') => begin
+      <fieldset>
+      %= label_for 'select-folder' => l('move') . ' ' . l('to')
+      %= select_field folder => [grep {$_ ne $folder} @$mail_folders] => (id => 'select-folder')
+      %= csrf_field
+      %= submit_button l('move') => (class => 'pure-button')
+      </fieldset>
+    % end
+  </div>
+
+</div>
 
 <script type="text/javascript">
 function check_all(box) {
diff --git a/templates/headers/_display_folders.html.ep b/templates/headers/_display_folders.html.ep
new file mode 100644
index 0000000..bf8a346
--- /dev/null
+++ b/templates/headers/_display_folders.html.ep
@@ -0,0 +1,29 @@
+<div id=display-folders class="pure-g jwm-nav">
+
+  <div class="pure-u-1-1 pure-u-md-1-2">
+    <nav class="pure-menu pure-menu-horizontal">
+
+      <strong class="pure-menu-heading">
+        %= l($folder) || $folder || 'Root'
+      </strong>
+
+      <ul class="pure-menu-list">
+% for my $v (grep {$_ ne $folder} @$mail_folders) {
+      <li class="pure-menu-item">
+        %= link_to '' => {folder => $v} => (class => 'bright') => begin
+          %= $v ? (l($v) || $v) : l 'Home'
+        % end
+      </li>
+% }
+      </ul>
+
+    </nav>
+  </div>
+
+  <p class="pure-u-1-1 pure-u-md-1-2">
+    <%= "$first_item - $last_item " . l('of') . " $total_items " . l('messages') %>\
+    <%= ", $total_new_mails " . l('new') if $total_new_mails > 0 =%>
+    <%= ' - ' . ucfirst(l 'mbox_size') . ": " . print_sizes10 $total_size if $total_size %>
+  </p>
+
+</div>
diff --git a/templates/headers/_display_headers.html.ep b/templates/headers/_display_headers.html.ep
index c278a37..f391259 100644
--- a/templates/headers/_display_headers.html.ep
+++ b/templates/headers/_display_headers.html.ep
@@ -1,42 +1,37 @@
 % my $sort_param = begin
   % my $param = shift;
 
-  <th class=sort-param>
-    %= link_to url_with->query(sort => $param eq (param('sort') || '') ? '!' . $param : $param) => begin
-      % no warnings qw(experimental::smartmatch);
-      %= do { given (param('sort')) { '↑' when ($param); '↓' when ('!' . $param) } }
-      %= ucfirst l $param;
-    % end
-  </th>
+  %= link_to url_with->query(sort => $param eq (param('sort') || '') ? '!' . $param : $param) => begin
+    % no warnings qw(experimental::smartmatch);
+    %= do { given (param('sort')) { '↑' when ($param); '↓' when ('!' . $param) } }
+    %= ucfirst l $param;
+  % end
 
 % end
 
-<table id=mail-headers>
-
-  <colgroup>
-    <col width=5% />
-    <col width=10% />
-    <col width=15% />
-    <col width=25% />
-    <col width=25% />
-    <col width=10% />
-    <col width=10% />
-  </colgroup>
+<table id=mail-headers class="pure-table pure-table-horizontal">
 
   <thead>
     <tr id=sort>
-      <th>
-        %= ucfirst l 'nr'
+      <th class="hide-small">
+        No.
       </th>
 
-      %= $sort_param->('status');
+      <th>
+      <div class="pure-g">
 
-      %= $sort_param->('date');
+        %# $sort_param->('status');
 
-    % if ($folder ne "SENT") {
-      %= $sort_param->('sender');
-    % }
-    % else {
+        <div class="pure-u-8-24 pure-u-md-4-24">
+          %= $sort_param->('date');
+        </div>
+
+% if ($folder ne "SENT") {
+        <div class="pure-u-16-24 pure-u-md-6-24">
+          %= $sort_param->('sender');
+        </div>
+% }
+% else {
       <th class=sort-param>
         %= link_to url_with->query(sort => param('sort') ne '!sender' ? 'sender' : '!sender' ) => begin
           %= ucfirst l 'recipient'
@@ -48,44 +43,63 @@
           % }
         % end
       </th>
-    % }
+% }
+
+        <div class="pure-u-20-24 pure-u-md-12-24">
+          %= $sort_param->('subject');
+        </div>
 
-      %= $sort_param->('subject');
+        <div class="pure-u-4-24 pure-u-md-2-24">
+          %= $sort_param->('size');
+        </div>
 
-      %= $sort_param->('size');
+      </div>
+      </th>
 
       <th>
-        <!-- <img src="/chkb.gif"> -->
         <input type=checkbox checked=1 disabled=1>
       </th>
     </tr>
   </thead>
 
-
   <tbody>
   % foreach my $msgnum ($first_item .. $last_item) {
   %   my $msg = $msgs->[$msgnum - $first_item];
 
     %= tag tr => (class => $msg->{new} ? 'new-mail' : '') => (id => $msg->{mid}) => begin
-      <td>
+      <td class="hide-small">
         %= $msgnum
       </td>
+
       <td>
-        %= ucfirst($msg->{is_multipart} ? l('yes') : l('no'));
-      </td>
-      <td>
-        % my $date = parse_iso_date $msg->{head}{date};
-        %= join('/', $date->{mday}, $date->{month}, $date->{year}) . " $date->{hour}:$date->{min}";
-      </td>
-      <td>
-        %= $msg->{head}{from}[0]{name} || $msg->{head}{from}[0]{email};
-      </td>
-      <td>
-        %= link_to $msg->{head}{subject} || '_' => read => {id => $msg->{mid}}
-      </td>
-      <td>
-        %= print_sizes10 $msg->{size};
+      <div class="pure-g">
+
+        <!--
+        <div class="pure-u-1-4">
+          %= ucfirst($msg->{is_multipart} ? l('yes') : l('no'));
+        </div>
+        -->
+
+        <div class="pure-u-8-24 pure-u-md-4-24">
+          % my $date = parse_iso_date $msg->{head}{date};
+          %= join('/', $date->{mday}, $date->{month}, $date->{year}) . " $date->{hour}:$date->{min}";
+        </div>
+
+        <div class="pure-u-16-24 pure-u-md-6-24">
+          %= $msg->{head}{from}[0]{name} || $msg->{head}{from}[0]{email};
+        </div>
+
+        <div class="pure-u-20-24 pure-u-md-12-24">
+          %= link_to $msg->{head}{subject} || '_' => read => {id => $msg->{mid}}
+        </div>
+
+        <div class="pure-u-4-24 pure-u-md-2-24">
+          %= print_sizes10 $msg->{size};
+        </div>
+
+      </div>
       </td>
+
       <td>
         %= check_box mail => $msg->{mid} => (form => 'move-mail')
       </td>
@@ -93,4 +107,5 @@
 
   % }
   </tbody>
+
 </table>
diff --git a/templates/headers/_display_top_nav.html.ep b/templates/headers/_display_top_nav.html.ep
index 2b882af..6279f5f 100644
--- a/templates/headers/_display_top_nav.html.ep
+++ b/templates/headers/_display_top_nav.html.ep
@@ -1,34 +1,35 @@
-<table width=100%>
-  <tr>
+<div class="pure-g">
 
-    <td>
-      <ul class=line>
-      %# <a href="<%= url_with($prefsurl) %>"><%= TXT 'userconfig' %></a>
-      %# <a href="<%=$prefsurl%>?action=editaddresses&folder=<%=$folder%>&sessionid=<%=$thissession%>&sort=<%=$sort%>&firstmessage=<%=$firstmessage+1%>&lang=<%=$lang%>" ><%= TXT 'addressbook' %></a>
-        <li>
+  <div class="pure-u-1-2 pure-u-md-1-4">
+    <div class="pure-menu pure-menu-horizontal">
+      <ul class="pure-menu-list">
+        %# <a href="<%= url_with($prefsurl) %>"><%= TXT 'userconfig' %></a>
+        %# <a href="<%=$prefsurl%>?action=editaddresses&folder=<%=$folder%>&sessionid=<%=$thissession%>&sort=<%=$sort%>&firstmessage=<%=$firstmessage+1%>&lang=<%=$lang%>" ><%= TXT 'addressbook' %></a>
+        <li class="pure-menu-item">
           %= link_to ucfirst(l 'logout') => 'logout'
         </li>
-        <li>
+        <li class="pure-menu-item">
           %= link_to ucfirst(l 'compose') => 'write'
         </li>
       </ul>
-    </td>
+    </div>
+  </div>
 
-    <td>
-      %= form_for '' => begin
-        %= label_for search => ucfirst(l 'search') . ': '
-        %= search_field search => (size => 8)
-      % end
-    </td>
+  <div class="pure-u-1-2 pure-u-md-1-4">
+    %= form_for '' => (class => 'pure-form') => begin
+      %= label_for search => ucfirst(l 'search')
+      %= search_field search => (size => 8)
+    % end
+  </div>
 
-    <td id=pag2>
-      %= include '_pagination2';
-    </td>
+  <div class="pure-u-1-1 pure-u-md-1-2">
+    %= include 'headers/_pagination2';
+  </div>
 
-    <td>
-      <!-- delete button -->
-      %# <form action="<%= url_for('delete_msg') %>" name=Formdel onsubmit="return confirm('<%= TXT q(js_confirm_delete) %>')" > </form>
-    </td>
+  <!-- delete button
+  <td>
+    %# <form action="<%= url_for('delete_msg') %>" name=Formdel onsubmit="return confirm('<%= TXT q(js_confirm_delete) %>')" > </form>
+  </td>
+  -->
 
-  </tr>
-</table>
+</div>
diff --git a/templates/headers/_displayfolders.html.ep b/templates/headers/_displayfolders.html.ep
deleted file mode 100644
index 7bc5b12..0000000
--- a/templates/headers/_displayfolders.html.ep
+++ /dev/null
@@ -1,32 +0,0 @@
-<table id=display-folders width=100%>
-  <tr>
-
-    <td id=folder-list class=alter-font>
-      <strong class=up>
-        %= l($folder) || $folder
-      </strong>
-
-      <ul class=line>
-% for my $v (grep {$_ ne $folder} @$mail_folders) {
-        <li>
-          %= link_to '' => {folder => $v} => (class => 'bright') => begin
-            %= $v ? (l($v) || $v) : l 'Home'
-          % end
-        </li>
-% }
-      </ul>
-    </td>
-
-    <td>
-      <em class=msg-count>
-        <%= "$first_item - $last_item " . l('of') . " $total_items " . l('messages') %>\
-        <%= ", $total_new_mails " . l('new') if $total_new_mails > 0 =%>
-
-% if ($total_size) {
-        - <%= ucfirst(l 'mbox_size') . ": " . print_sizes10 $total_size %>
-% }
-      </em>
-    </td>
-
-  </tr>
-</table>
diff --git a/templates/headers/_pagination1.html.ep b/templates/headers/_pagination1.html.ep
new file mode 100644
index 0000000..010bdbd
--- /dev/null
+++ b/templates/headers/_pagination1.html.ep
@@ -0,0 +1,7 @@
+<div>
+  <a href="<%= url_with->query({start => $prev_page->[0]-1}) %>"><img src="/left.gif" alt="←"></a>
+  <a href="<%= url_with->query({start => $first_page->[0]-1}) %>"><img src="/first.gif" alt="↞"></a>
+  [<%= join(' ', ucfirst l('page'), $current_page, l('of'), $total_pages) %>]
+  <a href="<%= url_with->query({start => $last_page->[0]-1}) %>"><img src="/last.gif" alt="↠"></a>
+  <a href="<%= url_with->query({start => $next_page->[0]-1}) %>"><img src="/right.gif" alt="→"></a>
+</div>
diff --git a/templates/headers/_pagination2.html.ep b/templates/headers/_pagination2.html.ep
new file mode 100644
index 0000000..236e9bb
--- /dev/null
+++ b/templates/headers/_pagination2.html.ep
@@ -0,0 +1,22 @@
+<div>
+  %= form_for '' => (class => 'pure-form') => begin
+    <a href="<%= url_with->query({start => $first_page->[0]-1}) %>"><img src="/first.gif" alt="<%= l('first') . ' ' . l 'page' %>"></a>
+    <a href="<%= url_with->query({start => $prev_page->[0]-1}) %>"><img src="/left.gif" alt="<%= l('previous') . ' ' . l 'page' %>"></a>
+    [
+      %= label_for custompage => ucfirst l 'page'
+      %= number_field start => (id => 'custompage') => (size => 3) => (placeholder => $current_page)
+      %= l 'of'
+      %= $total_pages
+    ]
+
+% my $h = $c->req->query_params->to_hash;
+% while (my ($k, $v) = each %$h) {
+%   if ($k ne 'start') {
+    %= hidden_field $k => $v
+%   }
+% }
+
+    <a href="<%= url_with->query({start => $next_page->[0]-1}) %>"><img src="/right.gif" alt="<%= l('next') . ' ' . l 'page' %>"></a>
+    <a href="<%= url_with->query({start => $last_page->[0]-1}) %>"><img src="/last.gif" alt="<%= l('last') . ' ' . l('page') %>"></a>
+  % end
+</div>
diff --git a/templates/layouts/mainlayout.html.ep b/templates/layouts/mainlayout.html.ep
index 9f36006..166f9ee 100644
--- a/templates/layouts/mainlayout.html.ep
+++ b/templates/layouts/mainlayout.html.ep
@@ -1,24 +1,33 @@
-<!DOCTYPE html>
+<!doctype html>
+
 <html lang="<%= $lang %>">
-  <head>
-    <meta charset=UTF-8>
-    <title>
-      %= stash('title') || 'JWebmail'
-    </title>
-    %= stylesheet '/style.css'
-  </head>
 
-  <body>
-    %= content
+<head>
+  <meta charset=utf-8>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css"
+    integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css" />
+  %= stylesheet '/style2.css'
+
+  <title>
+    %= title || 'JWebmail'
+  </title>
+</head>
+
+<body>
+  %= content
+
+  <footer>
+    %= link_to about => begin
+      %= ucfirst l 'about'
+      JWebmail
+    % end
+    <br>
+    %= ucfirst l 'version'
+    %= $version
+  </footer>
+</body>
 
-    <footer>
-      %= link_to about => begin
-        %= ucfirst l 'about'
-        JWebmail
-      % end
-      <br />
-      %= ucfirst l 'version'
-      %= $version
-    </footer>
-  </body>
 </html>
diff --git a/templates/webmail/about.html.ep b/templates/webmail/about.html.ep
index 5cee603..6221bcc 100644
--- a/templates/webmail/about.html.ep
+++ b/templates/webmail/about.html.ep
@@ -2,70 +2,64 @@
 
 % layout 'mainlayout';
 
-<table class=top>
+<div class="jwm-base">
 
-  <tr>
-    <th>
-      About JWebmail <%= $version %>
-    </th>
-  </tr>
+  <div class="jwm-post">
 
-  <tr>
-    <td class=large-section>
-      <ul>
-        <li>
-          JWebmail <%= $version %> is a Webmail solution meant to be used with
-          <a href="https://www.fehcom.de/sqmail/sqmail.html">s/qmail</a>
-        </li>
+    <h1>About JWebmail <%= $version %></h1>
 
-        <li>Features:
-          <ul>
-            <!--
-              <li>qmail, vmailmgr and vpopmail authentication support (<em>not</em> sendmail)</li>
-              <li>multiple signatures und headers support</li>
-              <li>basic folders support (4 defined folders)</li>
-              <li>featured addressbook</li>
-              <li>100% Maildir based</li>
-              <li>reads the mail directely from the server disk, without need for POP3 or IMAP</li>
-            -->
-            <li>multiple language support</li>
-            <li>session management </li>
-            <li>search for mails</li>
-            <li>CGI support but also psgi/plack and fcgi</li>
-          </ul>
-        </li>
+    <p>
+      JWebmail <%= $version %> is a Webmail solution meant to be used with
+      <a href="https://www.fehcom.de/sqmail/sqmail.html">s/qmail</a>
+    </p>
 
-        <li>
-          This is a
-          <a href="http://www.gnu.org/copyleft/gpl.html" target="_new">GPL</a>
-          licensed project, created by <a href="mailto:">Oliver 'omnis' Müller</a>
-          and currently maintained by
-          <a href="mailto:jannis@fehcom.de">Jannis M. Hoffmann</a>
-        </li>
+    <p>
+    <h3>Features</h3>
+    <ul>
+      <!--
+        <li>qmail, vmailmgr and vpopmail authentication support (<em>not</em> sendmail)</li>
+        <li>multiple signatures und headers support</li>
+        <li>basic folders support (4 defined folders)</li>
+        <li>featured addressbook</li>
+        <li>100% Maildir based</li>
+        <li>reads the mail directely from the server disk, without need for POP3 or IMAP</li>
+      -->
+      <li>multiple language support</li>
+      <li>session management </li>
+      <li>search for mails</li>
+      <li>CGI support but also psgi/plack and fcgi</li>
+    </ul>
+    </p>
+
+    <p>
+      This is a
+      <a href="http://www.gnu.org/copyleft/gpl.html" target="_new">GPL</a>
+      licensed project, created by <a href="mailto:">Oliver 'omnis' Müller</a>
+      and currently maintained by
+      <a href="mailto:jannis@fehcom.de">Jannis M. Hoffmann</a>
+    </p>
            
 
-        <li>Supported languages:
-          <p class=languages>
+    <p>
+    <h3>Supported languages</h3>
+    <ul>
 % foreach (@$languages) {
-            %= link_to $_ => {lang => $_}
+    <li>
+      %= link_to $_ => {lang => $_}
+    </li>
 % }
-          </p>
-        </li>
+    </ul>
+    </p>
+
+    <p>
+      JWebmail is programmed in <a href="http://www.perl.org">Perl</a>, and is
+      a complete rewrite of oMail-webmail.
+    </p>
 
-        <li>
-          JWebmail is programmed in <a href="http://www.perl.org">Perl</a>, and is
-          a complete rewrite of oMail-webmail.
-        </li>
+  </div>
 
-      </ul>
-    </td>
-  </tr>
+  <nav>
+    %= link_to login => 'login' => (class => 'pure-button')
+  </nav>
 
-  <tr>
-    <td>
-      <nav>
-        %= button_to login => 'login' => (class => 'link-btn')
-      </nav>
-    </td>
-  </tr>
-</table>
+</div>
diff --git a/templates/webmail/displayheaders.html.ep b/templates/webmail/displayheaders.html.ep
index d823d9e..42e52fd 100644
--- a/templates/webmail/displayheaders.html.ep
+++ b/templates/webmail/displayheaders.html.ep
@@ -1,46 +1,26 @@
 % layout 'mainlayout';
 
-<table id=displayheaders>
+<div id=displayheaders>
 
-  <thead>
-    <tr>
-      <td id=folders>
-        %= include 'headers/_displayfolders';
-      </td>
-    </tr>
+  %= include 'headers/_display_folders';
 
 % if (my $loginmessage = stash 'loginmessage') {
-    <tr>
-      <td id=loginmessage> <%= $loginmessage %> </td>
-    </tr>
+  <p id=loginmessage>
+    %= $loginmessage
+  </p>
 % }
 
-    <tr>
-      <td id=navigation>
-        %= include 'headers/_display_top_nav';
-      </td>
-    </tr>
-  </thead>
+  %= include 'headers/_display_top_nav';
 
-  <tbody>
-    <tr>
-      <td>
 % if (@$msgs) {
-        %= include 'headers/_display_headers';
+  %= include 'headers/_display_headers';
 % }
 % else {
-        <p id=empty> <%= l 'empty_folder' %> </p>
+  <p id=empty-folder>
+    %= l 'empty_folder'
+  </p>
 % }
-      </td>
-    </tr>
-  </tbody>
 
-  <tfoot>
-    <tr>
-      <td class=navigation>
-        %= include 'headers/_display_bot_nav';
-      </td>
-    </tr>
-  </tfoot>
+  %= include 'headers/_display_bot_nav';
 
-</table>
\ No newline at end of file
+</div>
diff --git a/templates/webmail/login.html.ep b/templates/webmail/login.html.ep
index 4b2da5d..3e224a8 100644
--- a/templates/webmail/login.html.ep
+++ b/templates/webmail/login.html.ep
@@ -1,55 +1,34 @@
 % layout 'mainlayout';
 
-<table id=noaction>
-  <thead>
-    <tr>
-      <th id=top-section> JWebmail – <%= ucfirst l 'login' %> </th>
-    </tr>
-  </thead>
+<div id=login class="jwm-base">
+
+  <h1>
+    JWebmail – <%= ucfirst l 'login' %>
+  </h1>
 
-  <tbody>
 % if (my $msg = flash('message') || stash('warning')) {
-    <tr>
-      <td class="warning flash-fade">
-        %= $msg
-      <td>
-    </tr>
+  <p class="jwm-warning">
+    %= $msg
+  </p>
 % }
 
-    <tr>
-      <td class=login-form>
-        %= form_for login => (name => 'login1') => (method => 'post') => begin
-
-          <table>
-            <tr>
-              <td class=label-cell>
-                %= label_for userid => ucfirst l 'userid'
-              </td> 
-              <td> 
-                %= text_field 'userid'
-              </td>
-            </tr>
-            <tr>
-              <td class=label-cell> 
-                %= label_for password => ucfirst l 'passwd'
-              </td> 
-              <td> 
-                %= password_field 'password'
-              </td> 
-            </tr>
-            <tr class=submit-row>
-              <td colspan=2> 
-                %= submit_button l 'login'
-              </td> 
-            </tr>
-          </table>
-
-        % end
-      </td>
-    </tr>
+  %= form_for login => (name => 'login1') => (method => 'post') => (class => 'pure-form pure-form-aligned jwm-round') => begin
+    <fieldset>
+      <div class="pure-control-group">
+        %= label_for userid => ucfirst l 'userid'
+        %= text_field 'userid' => '' => (required => '')
+      </div>
+      <div class="pure-control-group">
+        %= label_for password => ucfirst l 'passwd'
+        %= password_field 'password' => (required => '')
+      </div>
+      <div class="pure-controls">
+        %= submit_button l('login') => (class => 'pure-button pure-button-primary')
+      </div>
+    </fieldset>
+  % end
 
-  </tbody>
-</table>
+</div>
 
 %= javascript begin
   if (!document.login1.userid.value) {
diff --git a/templates/webmail/readmail.html.ep b/templates/webmail/readmail.html.ep
index 0a9fde0..f39dd0e 100644
--- a/templates/webmail/readmail.html.ep
+++ b/templates/webmail/readmail.html.ep
@@ -3,54 +3,62 @@
 % my $mail_fmt = begin
   % my ($category, $value) = @_;
   <dt> <%= ucfirst l $category %> </dt>
-  <dd> <%= ref $value ? join(' ' . l('and') . ' ', map {"$_->{name} <$_->{address}>"} @$value) : $value %> </dd>
+  <dd>
+    %= ref $value ? join(' ' . l('and') . ' ', map {"$_->{name} <$_->{address}>"} @$value) : $value
+  </dd>
 % end
 
-<div class=ow>
-
-<h1>Read Mail</h1>
-
-<dl id=show-head>
-  <dt> <%= uc l 'subject' %> </dt>
-  <dd> <%= $msg->{head}{subject} %> </dd>
-%= $mail_fmt->('from', $msg->{head}{from});
-%= $mail_fmt->('to', $msg->{head}{to});
-%= $mail_fmt->('cc', $msg->{head}{cc}) if !ref $msg->{head}{cc} || @{ $msg->{head}{cc} };
-%= $mail_fmt->('bcc', $msg->{head}{bcc}) if !ref $msg->{head}{bcc} || @{ $msg->{head}{bcc} };
-  <dt> <%= uc l 'date' %> </dt>
-  <dd> <%= $msg->{head}{date} %> </dd>
-  <dt> <%= uc l 'size' %> </dt>
-  <dd> <%= print_sizes10 $msg->{size} %> </dd>
-  <dt> <%= uc l 'content-type' %> </dt>
-  <dd> <%= $msg->{head}{content_type} %> </dd>
-</dl>
+<div class="jwm-base">
+
+  <h1>Read Mail</h1>
+
+  <dl>
+    <dt> <%= uc l 'subject' %> </dt>
+    <dd> <%= $msg->{head}{subject} %> </dd>
+
+    %= $mail_fmt->('from', $msg->{head}{from})
+    %= $mail_fmt->('to', $msg->{head}{to})
+    %= $mail_fmt->('cc', $msg->{head}{cc}) if !ref $msg->{head}{cc} || @{ $msg->{head}{cc} }
+    %= $mail_fmt->('bcc', $msg->{head}{bcc}) if !ref $msg->{head}{bcc} || @{ $msg->{head}{bcc} }
+
+    <dt> <%= uc l 'date' %> </dt>
+    <dd> <%= $msg->{head}{date} %> </dd>
+
+    <dt> <%= uc l 'size' %> </dt>
+    <dd> <%= print_sizes10 $msg->{size} %> </dd>
+
+    <dt> <%= uc l 'content-type' %> </dt>
+    <dd> <%= $msg->{head}{content_type} %> </dd>
+  </dl>
 
 % my $body = $msg->{body};
 
 % if ($msg->{head}{content_type} eq 'multipart/alternative') {
 %   for (reverse @$body) {
-      <div class=show-body>
+  <div class=jwm-mail-body>
 %       my $x = mime_render($_->{head}{content_type}, $_->{body});
-%==     $x;
-      </div>
+    %== $x;
+  </div>
 %       last if $x;
 %   }
 % }
 % elsif (ref $body eq 'HASH') {
 %   for (%$body) {
-      <div class=show-body>
-%==     mime_render($_->{head}{content_type}, $_->{body});
-      </div>
+  <div class=jwm-mail-body>
+    %== mime_render($_->{head}{content_type}, $_->{body});
+  </div>
 %   }
 % }
 % else {
-    <div class=show-body>
-%==   mime_render($msg->{head}{content_type}, $body);
-    </div>
+  <div class=jwm-mail-body>
+    %== mime_render($msg->{head}{content_type}, $body);
+  </div>
 % }
 
-<nav id=read-nav>
-  <a href="javascript:history.back()" class=btn> <%= l 'home' %> </a>
-</nav>
+  <nav>
+    <a href="javascript:history.back()" class="pure-button">
+      %= l 'back'
+    </a>
+  </nav>
 
 </div>
diff --git a/templates/webmail/writemail.html.ep b/templates/webmail/writemail.html.ep
index 8375bdf..6342927 100644
--- a/templates/webmail/writemail.html.ep
+++ b/templates/webmail/writemail.html.ep
@@ -1,51 +1,46 @@
 % layout 'mainlayout';
 
-<div class=ow>
+<div class="jwm-base">
 
-<h1>Write Message</h1>
+  <h1>Write Message</h1>
 
-% if (my $msg = stash('warning')) {
-  <p class=warn> <%= $msg %> </p>
-% }
+  % if (my $msg = stash('warning')) {
+    <p class=warn> <%= $msg %> </p>
+  % }
 
-%= form_for '' => (method => 'post') => (enctype => 'multipart/form-data') => (id => 'write-form') => begin
+  %= form_for '' => (method => 'post') => (enctype => 'multipart/form-data') => (class => 'pure-form pure-form-stacked') => begin
+  <fieldset>
 
-  %= label_for mail => ucfirst l 'send_to'
-  %= email_field 'to', id => 'mail', multiple => '', required => ''
-  <br>
+    %= label_for mail => ucfirst l 'send_to'
+    %= email_field 'to' => (id => 'mail') => (multiple => '') => (required => '')
 
-  %= label_for subject => ucfirst l 'subject'
-  %= text_field 'subject', 'required' => ''
-  <br>
+    %= label_for subject => ucfirst l 'subject'
+    %= text_field 'subject' => (required => '')
 
-  %= label_for cc => 'CC'
-  %= email_field 'cc', 'multiple' => ''
-  <br>
+    %= label_for cc => 'CC'
+    %= email_field 'cc' => (multiple => '')
 
-  %= label_for bcc => 'BCC'
-  %= email_field 'bcc', 'multiple' => ''
-  <br>
+    %= label_for bcc => 'BCC'
+    %= email_field 'bcc' => (multiple => '')
 
-  %= label_for back_to => ucfirst l 'answer_to'
-  %= email_field 'back_to'
-  <br>
+    %= label_for back_to => ucfirst l 'answer_to'
+    %= email_field 'back_to'
 
-  %= label_for txt => ucfirst l 'content'
-  %= text_area body => (cols => 80) => (rows => 24) => (id => 'txt')
-  <br>
+    %= label_for txt => ucfirst l 'content'
+    %= text_area body => (cols => 80) => (rows => 24) => (name => 'txt')
 
-  %= file_field 'attach'
-  <br>
+    %= label_for attach => ucfirst l 'attach file'
+    %= file_field 'attach'
 
-  %= submit_button l 'send'
+    %= submit_button l('send') => (class => 'pure-button pure-button-primary')
 
-  %= csrf_field
+    %= csrf_field
 
-% end
+  </fieldset>
+  % end
 
-<nav>
-  %#<a href="<%= url_for('displayheaders') %>" class=btn> <%= l 'home' %> </a>
-  <a href="javascript:history.back()" class=btn> <%= l 'home' %> </a>
-</nav>
+  <nav>
+    <a href="javascript:history.back()" class="pure-button"> <%= ucfirst l 'back' %> </a>
+  </nav>
 
 </div>