Better style for <small> tags

static/main.css

@@ -22,6 +22,13 @@ a, a:visited {
 	outline: none;
 }
 
+small {
+	margin-left: 1em;
+	color: #242424;
+	opacity: 0.6;
+	font-size: 0.75em;
+}
+
 .center {
 	text-align: center;
 	font-weight: bold;
@@ -290,20 +297,14 @@ main .article-meta .comments .list {
 	align-items: center;
 	align-content: center;
 }
-
+.comments .list .comment .author * {
+	transition: all 0.1s ease-in;
+}
 .comments .list .comment .author .display-name {
-	transition: color 0.1s ease-in;
 	color: #242424;
 }
 .comments .list .comment .author:hover .display-name { color: #7765E3; }
-
-.comments .list .comment .author .username {
-	transition: color 0.1s ease-in;
-	margin-left: 1em;
-	color: #777777;
-	font-size: 0.9em;
-}
-.comments .list .comment .author:hover .username { color: #444444; }
+.comments .list .comment .author:hover small { opacity: 1; }
 
 .comments .list .comment .text {
 	padding: 1.25em 0;

templates/blogs/details.html.tera

@@ -6,7 +6,7 @@
 {% endblock title %}
 
 {% block content %}
-    <h1>{{ blog.title }} (~{{ blog.actor_id }})</h1>
+    <h1>{{ blog.title }} <small>~{{ blog.actor_id }}</small></h1>
     <p>{{ blog.summary }}</p>
     <p>
         {{ "{{ count }} authors in this blog: " | _n(singular="One author in this blog: ", count = n_authors) }}

templates/posts/details.html.tera

@@ -87,7 +87,7 @@
                     <div class="comment" id="comment-{{ comment.id }}">
                         <a class="author" href="{{ comment.author.ap_url }}">
                             <span class="display-name">{{ comment.author.display_name }}</span>
-                            <span class="username">@{{ comment.author.username }}</span>
+                            <small>@{{ comment.author.username }}</small>
                         </a>
                         <div class="text">{{ comment.content | safe }}</div>
                         <a class="button" href="?responding_to={{ comment.id }}">{{ "Respond" | _ }}</a>

templates/users/followers.html.tera

@@ -22,7 +22,7 @@
             {% set follower_name = follower.username %}
         {% endif %}
         <div class="card">
-            <h3><a href="/@/{{ follower.fqn }}/">{{ follower_name }}</a> &mdash; @{{ follower.fqn }}</h3>
+            <h3><a href="/@/{{ follower.fqn }}/">{{ follower_name }}</a> <small>@{{ follower.fqn }}</small></h3>
             <main><p>{{ follower.summary | safe }}</p></main>
         </div>
     {% endfor %}