Improve user header

static/main.css

@@ -468,7 +468,6 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
 	flex-direction: row;
 	align-items: center;
 	margin-bottom: 0;
-	z-index: -20;
 }
 .badge {
 	margin-left: 1em;
@@ -758,4 +757,5 @@ figcaption {
 .avatar.medium {
     width: 100px;
     height: 100px;
+    margin: 20px;
 }

templates/users/header.html.tera

@@ -1,9 +1,8 @@
 <div class="user">
-    <div>
+    <div class="flex">
         <img class="avatar medium" src="{{ user.avatar }}" alt="{{ "{{ name}}'s avatar'" | _(name=user.name) }}">
-    </div>
 
-    <h1>
+        <h1 class="grow">
             {{ user.name }}
 
             <small>@{{ user.fqn }}</small>
@@ -16,6 +15,7 @@
                 <span class="badge">{{ "It is you" | _ }}</span>
             {% endif %}
         </h1>
+    </div>
 
     {% if is_self %}
         <a href="/@/{{ user.username }}/edit" class="button inline-block">{{ "Edit your profile" | _ }}</a>