Improve user page on small screens

Center avatar's alt text, since the only fix to display them on a single line would
break valid avatars

static/css/main.css

@@ -542,10 +542,10 @@ main .article-meta .tags li a {
  	display: flex;
  	flex-direction: row;
  	align-items: center;
- 	margin-bottom: 0;
+    margin: 0px;
  }
  .badge {
- 	margin-left: 1em;
+ 	margin-right: 1em;
  	padding: 0.35em 1em;
 
  	background: #F4F4F4;
@@ -664,6 +664,16 @@ main .article-meta .tags li a {
     flex: 1;
 }
 
+.flex.vertical {
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: flex-start;
+}
+
+.flex.vertical small {
+    margin: initial;
+}
+
 .left-icon {
     align-self: center;
     padding: 1em;
@@ -718,6 +728,7 @@ figcaption {
 
 .avatar {
     border-radius: 100%;
+    text-align: center; /* for alt-text */
 }
 
 .avatar.small {
@@ -875,4 +886,6 @@ figcaption {
         align-items: center;
     }
     body > footer * { margin: 1em auto; }
+
+    .flex.wrap { flex-direction: column; }
  }

templates/users/header.html.tera

@@ -1,12 +1,13 @@
 <div class="user">
-    <div class="flex">
+    <div class="flex wrap">
         <img class="avatar medium" src="{{ user.avatar }}" alt="{{ "{{ name}}'s avatar'" | _(name=user.name) }}">
 
-        <h1 class="grow">
+        <h1 class="grow flex vertical">
             {{ user.name }}
-
             <small>@{{ user.fqn }}</small>
+        </h1>
 
+        <p>
             {% if user.is_admin %}
                 <span class="badge">{{ "Admin" | _ }}</span>
             {% endif %}
@@ -14,10 +15,11 @@
             {% 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 %}
+        </p>
     </div>
 
     {% if is_remote %}