diff --git a/res/templates/mail.css b/res/templates/mail.css
new file mode 100644
index 0000000000000000000000000000000000000000..be63b8c33760b93afeea83775193d89242783e40
--- /dev/null
+++ b/res/templates/mail.css
@@ -0,0 +1,35 @@
+body {
+ font-family: "Open Sans", Helvetica, Arial, sans-serif;
+ font-size: 12pt;
+ margin: 1em;
+}
+
+#page {
+ margin: auto;
+ width: 640px;
+ padding: 1em;
+ border: 1px solid #76cfa6;
+ border-radius: 5px;
+}
+
+.room_avatar {
+ width: 48px;
+ height: 48px;
+ float: left;
+}
+
+.room_content {
+ clear: left;
+}
+
+.historical {
+ color: #888;
+}
+
+.sender_name {
+ display: inline;
+}
+
+.message_time {
+ display: inline;
+}
diff --git a/res/templates/notif_mail.html b/res/templates/notif_mail.html
index fbfb0a767c88f073bb48ea539149dfe90f5619ca..cc3573e65a5626c9e4b058402e266e7fc9d1b747 100644
--- a/res/templates/notif_mail.html
+++ b/res/templates/notif_mail.html
@@ -1,15 +1,22 @@
<!doctype html>
<html lang="en">
+ <head>
+ <style type="text/css">
+ {% include 'mail.css' without context %}
+ </style>
+ </head>
<body>
- <div className="salutation">Hi {{ user_display_name }},</div>
- <div className="summarytext">{{ summary_text }}</div>
- <div class="content">
- {% for room in rooms %}
- {% include 'room.html' with context %}
- {% endfor %}
- </div>
- <div class="footer">
- <a href="{{ unsubscribe_link }}">Unsubscribe</a>
+ <div id="page">
+ <div className="salutation">Hi {{ user_display_name }},</div>
+ <div className="summarytext">{{ summary_text }}</div>
+ <div class="content">
+ {% for room in rooms %}
+ {% include 'room.html' with context %}
+ {% endfor %}
+ </div>
+ <div class="footer">
+ <a href="{{ unsubscribe_link }}">Unsubscribe</a>
+ </div>
</div>
</body>
</html>
diff --git a/res/templates/room.html b/res/templates/room.html
index 6c68ee1fdcd41a977507e1b604425ca4a273d30d..3c0a4607b33f8b85a4b83809cde7f2a91a47fb91 100644
--- a/res/templates/room.html
+++ b/res/templates/room.html
@@ -1,5 +1,4 @@
<div class="room">
- <h2>{{ room.title }}</h2>
<div class="room_avatar">
{% if room.avatar_url %}
<img src="{{ room.avatar_url|mxc_to_http(48,48) }}" />
@@ -13,13 +12,14 @@
{% endif %}
{% endif %}
</div>
- {% if room.invite %}
- <a href="{{ room.link }}">Join the conversation.</a>
- {% else %}
- <div>
+ <h2>{{ room.title }}</h2>
+ <div class="room_content">
+ {% if room.invite %}
+ <a href="{{ room.link }}">Join the conversation.</a>
+ {% else %}
{% for notif in room.notifs %}
{% include 'notif.html' with context %}
{% endfor %}
- </div>
- {% endif %}
+ {% endif %}
+ </div>
</div>