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