Improved Likes / Reshares section

static/main.css

@@ -133,40 +133,94 @@ main .article-meta .reshares p { display: inline-block; margin: 0; }
 
 /* Like / Reshare button */
 
+main .article-meta .actions {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+}
+
 main .article-meta .likes,
 main .article-meta .reshares {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 	padding: 0.5em 0;
 }
 
-main .article-meta .likes a.button:before {
+main .article-meta .likes > p,
-	content: "";
+main .article-meta .reshares > p {
-	margin-right: 0.5em;
+	font-size: 1.5em;
-	color: #E92F2F;
-	font-family: "Font Awesome 5 Free";
-	font-weight: 400;
 }
-main .article-meta .reshares a.button:before {
+
-	content: "";
-	margin-right: 0.5em;
-	color: #7765E3;
-	font-family: "Font Awesome 5 Free";
-	font-weight: 600;
-}
-main .article-meta .likes a.button.liked:before,
-main .article-meta .reshares a.button.reshared:before { font-weight: 900; }
 main .article-meta .likes a.button,
 main .article-meta .reshares a.button {
-	display: inline-block;
+	display: flex;
-	margin: 0 1em;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	margin: 0;
 	padding: 0;
 	background: none;
 	color: #242424;
 	border: none;
 }
-main .article-meta .likes a.button:hover,
+
-main .article-meta .likes a.button.liked { color: #E92F2F; }
+main .article-meta .likes > p,
-main .article-meta .reshares a.button:hover,
+main .article-meta .likes a.button:hover { color: #E92F2F; }
-main .article-meta .reshares a.button.reshared { color: #7765E3; }
+main .article-meta .reshares > p,
+main .article-meta .reshares a.button:hover { color: #7765E3; }
+
+main .article-meta .likes a.button:before,
+main .article-meta .reshares a.button:before {
+	transition: background 0.1s ease-in;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	margin: 0.5em 0;
+	width: 2.5em;
+	height: 2.5em;
+
+	border-radius: 50%;
+	font-family: "Font Awesome 5 Free";
+}
+
+main .article-meta .likes a.button:before {
+	content: "";
+	color: #E92F2F;
+	border: solid #E92F2F thin;
+	font-weight: 400;
+}
+main .article-meta .likes a.button:hover:before {
+	background: rgba(233, 47, 47, 0.15);
+}
+
+main .article-meta .reshares a.button:before {
+	content: "";
+	color: #7765E3;
+	border: solid #7765E3 thin;
+	font-weight: 600;
+}
+main .article-meta .reshares a.button:hover:before {
+	background: rgba(119, 101, 227, 0.15);
+}
+
+main .article-meta .likes a.button.liked:before { background: #E92F2F; }
+main .article-meta .likes a.button.liked:hover:before {
+	background: rgba(233, 47, 47, 0.25);
+	color: #E92F2F;
+}
+main .article-meta .reshares a.button.reshared:before { background: #7765E3; }
+main .article-meta .reshares a.button.reshared:hover:before {
+	background: rgba(119, 101, 227, 0.25);
+	color: #7765E3;
+}
+
+main .article-meta .likes a.button.liked:before,
+main .article-meta .reshares a.button.reshared:before {
+	color: #F4F4F4;
+	font-weight: 900;
+}
 
 /* ~ Comments ~ */
 
@@ -373,6 +427,7 @@ form.new-post input[type="submit"] {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
+	padding: 0 5%;
 }
 .card {
 	flex: 1;
@@ -417,6 +472,7 @@ form.new-post input[type="submit"] {
 	font-size: 1em;
 	line-height: 1.25em;
 	text-align: left;
+	overflow: hidden;
 }
 
 /* ================= *

templates/posts/details.html.tera

@@ -36,10 +36,9 @@
     <div class="article-meta">
         <p>{{ "This article is under the {{ license }} license." | _(license=post.license) }}</p>
 
+        <div class="actions">
             <div class="likes">
-            <p>
+                <p aria-label="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}" title="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}">{{ n_likes }}</p>
-                {{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}
-            </p>
 
                 {% if has_liked %}
                     <a class="button liked" href="like">{{ "I don't like this anymore" | _ }}</a>
@@ -48,15 +47,15 @@
                 {% endif %}
             </div>
             <div class="reshares">
-            <p>
+                <p aria-label="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}" title="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}">{{ n_reshares }}</p>
-                {{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}
+
-            </p>
                 {% if has_reshared %}
                     <a class="button reshared" href="reshare">{{ "I don't want to reshare this anymore" | _ }}</a>
                 {% else %}
                     <a class="button" href="reshare">{{ "Reshare" | _ }}</a>
                 {% endif %}
             </div>
+        </div>
 
         <div class="comments">
             <h2>{{ "Comments" | _ }}</h2>