--- a/default/components/avatar.html	Mon Mar 26 08:13:53 2018 +0200
+++ b/default/components/avatar.html	Mon Mar 26 08:13:53 2018 +0200
@@ -1,9 +1,9 @@
-{% macro avatar(jid) %}
+{% macro avatar(jid, class) %}
     {%- if identities is defined -%}
         {%- if identities[jid].avatar_basename is defined %}
-            <img class="avatar" src="{{cache_path}}{{identities[jid].avatar_basename}}">
+            <img class="avatar {{class}}" src="{{cache_path}}{{identities[jid].avatar_basename}}">
         {% else %}
-            <span class="avatar generated">{{author|first|upper}}</span>
+            <span class="avatar avatar--generated {{class}}"><span class="avatar__content">{{identities[jid].nick|first|upper}}</span></span>
         {%- endif -%}
     {%- endif -%}
 {% endmacro %}

--- a/default/forum/view_topics.html	Mon Mar 26 08:13:53 2018 +0200
+++ b/default/forum/view_topics.html	Mon Mar 26 08:13:53 2018 +0200
@@ -17,14 +17,14 @@
         </div>
     {% endif %}
     {% if profile %}
-        <div class="forum_topic_create">
+        <div class="forum__topic_create">
             {% call textbox.textbox(service, node, placeholder=_("Your message"), submit_label=_("Create topic"), type="new_topic") %}
                 {{ field.text("title", placeholder=_("Your topic (try to be short and explicit)"), required=True) }}
             {% endcall %}
         </div>
     {% endif %}
 
-    <div id="forum_topics">
+    <div class="forum__topics">
         {% for topic in topics %}
             <div>
                 <a href="{{topic.http_uri}}">

--- a/default/static/chat.css	Mon Mar 26 08:13:53 2018 +0200
+++ b/default/static/chat.css	Mon Mar 26 08:13:53 2018 +0200
@@ -63,22 +63,6 @@
     color: #049282;
 }
 
-.avatar {
-	height: 2rem;
-	width: 2rem;
-	float: left;
-	background: #ccc;
-	border-radius: 0.2rem;
-	margin-right: 0.3rem;
-	margin-top: 0.3rem;
-}
-
-.generated {
-    font-size: 1.5rem;
-    text-align: center;
-    background:  #43d2f6;
-}
-
 .msg_header {
 	display: block;
 	font-size: 0.9em;

--- a/default/static/forum.css	Mon Mar 26 08:13:53 2018 +0200
+++ b/default/static/forum.css	Mon Mar 26 08:13:53 2018 +0200
@@ -36,11 +36,11 @@
     font-size: 0.8em;
 }
 
-#forum_topics {
+.forum__topics {
     margin-top: 3em;
 }
 
-#forum_topics>div {
+.forum__topics>div {
     box-sizing: border-box;
     width: 80%;
     margin: 0.5em auto;
@@ -49,17 +49,16 @@
 
 }
 
-#forum_topics>:hover {
+.forum__topics>:hover {
     background-color: #43d2f6;
 }
 
-#forum_topics img.avatar {
-    width: 1.5rem;
+.forum__topics img.avatar {
     vertical-align: middle;
-    padding-right: 1em;
+    margin-right: 1em;
 }
 
-#forum_topics a {
+.forum__topics a {
     display: block;
     text-decoration: none;
     color: inherit;

--- a/default/static/styles.css	Mon Mar 26 08:13:53 2018 +0200
+++ b/default/static/styles.css	Mon Mar 26 08:13:53 2018 +0200
@@ -1,5 +1,6 @@
 :root {
   --select-bg-color: #ddd;
+  --size-medium: 3em;
 }
 
 
@@ -66,12 +67,12 @@
 /*** Generic ***/
 
 .button {
-	padding: 0.5em 1em;
-	background: #333;
-	color: #ccc;
-	border: 1px solid #555;
-	border-radius: 0.8em;
-	font-weight: bold;
+    padding: 0.5em 1em;
+    background: #333;
+    color: #ccc;
+    border: 1px solid #555;
+    border-radius: 0.8em;
+    font-weight: bold;
 }
 
 
@@ -85,8 +86,14 @@
 }
 
 .instructions--alt {
-	text-align: center;
-	font-style: italic;
+    text-align: center;
+    font-style: italic;
+}
+
+.items_vert--centered {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 /*** blocks ***/
@@ -98,14 +105,14 @@
 
 .block_separator__label {
     display: inline-block;
-	margin: 0 0.2em;
+    margin: 0 0.2em;
 }
 
 .block_separator__line {
-	height: 1px;
-	background: #ccc;
-	flex: 1;
-	margin-top: 0.7em;
+    height: 1px;
+    background: #ccc;
+    flex: 1;
+    margin-top: 0.7em;
 }
 
 /*** grids ***/
@@ -139,10 +146,39 @@
     background-color: var(--select-bg-color);
 }
 
+/*** avatars ***/
+
+.avatar {
+    height: 2rem;
+    width: 2rem;
+    display: inline-flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    background: #ccc;
+    border-radius: 0.2rem;
+}
+
+.avatar__content {
+
+}
+
+.avatar--medium {
+    height: var(--size-medium);
+    width: var(--size-medium);
+    border-radius: 0.5rem;
+}
+
+.avatar--generated {
+    text-align: center;
+    background:  #43d2f6;
+}
+
+
 /*** icons ***/
 
 .icon--medium {
-    height: 3em;
+    height: var(--size-medium);
     display: block;
     margin: 0 auto;
 }
@@ -311,12 +347,12 @@
 }
 
 .form_single input:not([type="submit"]) {
-	margin: 0 1em;
-	width: 15em;
-	border-radius: 0.7em;
-	outline: none;
-	border: 1px solid black;
-	padding: 0.4em;
+    margin: 0 1em;
+    width: 15em;
+    border-radius: 0.7em;
+    outline: none;
+    border: 1px solid black;
+    padding: 0.4em;
     box-shadow: none;
 }
 
@@ -419,24 +455,24 @@
 /*** Notifications ***/
 
 .notification.retry {
-	position: fixed;
-	top: 1rem;
-	margin: auto;
-	width: 80%;
-	background: #DB1616;
-	border: 3px solid silver;
-	left: 10%;
-	text-align: center;
+    position: fixed;
+    top: 1rem;
+    margin: auto;
+    width: 80%;
+    background: #DB1616;
+    border: 3px solid silver;
+    left: 10%;
+    text-align: center;
 }
 
 #retry_counter {
-	font-weight: bold;
+    font-weight: bold;
 }
 
 #retry_now {
-	color: blue;
-	text-decoration: underline;
-	cursor: pointer;
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
 }
 
 @media (min-width: 800px) {