From 591f665cef3d10af3f111f5fcc65470e65712aff Mon Sep 17 00:00:00 2001
From: Dominik Picheta <dominikpicheta@gmail.com>
Date: Mon, 7 May 2018 20:56:27 +0100
Subject: [PATCH] Better avatars.

---
 redesign/index.html    | 39 ++++++++++++++++++++++++++++-----------
 redesign/nimforum.scss |  9 ++++++++-
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/redesign/index.html b/redesign/index.html
index d14cc27..82c750b 100644
--- a/redesign/index.html
+++ b/redesign/index.html
@@ -67,11 +67,18 @@
             <td>Few mixed up questions</td>
             <td>help</td>
             <td>
-              <img src="https://www.gravatar.com/avatar/4831aedc3469e317e581e9e7348519a1?s=20&amp;d=identicon" title="DTxplorer">
-              <img src="https://www.gravatar.com/avatar/ed45a09ddafbe85bd1f3917f6ee57593?s=20&amp;d=identicon" title="mashingan">
-              <img src="https://www.gravatar.com/avatar/b3ed6848f575cc54c49f4916d15b65fd?s=20&amp;d=identicon" title="mratsim">
-              <img src="https://www.gravatar.com/avatar/bd68fd5a3c41111e89cc9c71d25d5a06?s=20&amp;d=identicon" title="Hlaaftana">
-              <img src="https://www.gravatar.com/avatar/aa81bb8117f158b6d9e6f3f174092573?s=20&amp;d=identicon" title="ErikCampobadal">
+              <figure class="avatar avatar-sm">
+                <img src="https://www.gravatar.com/avatar/4831aedc3469e317e581e9e7348519a1?s=40&amp;d=identicon" title="DTxplorer">
+              </figure>
+              <figure class="avatar avatar-sm">
+              <img src="https://www.gravatar.com/avatar/ed45a09ddafbe85bd1f3917f6ee57593?s=40&amp;d=identicon" title="mashingan">
+              </figure>
+              <figure class="avatar avatar-sm">
+              <img src="https://www.gravatar.com/avatar/b3ed6848f575cc54c49f4916d15b65fd?s=40&amp;d=identicon" title="mratsim"></figure>
+              <figure class="avatar avatar-sm">
+              <img src="https://www.gravatar.com/avatar/bd68fd5a3c41111e89cc9c71d25d5a06?s=40&amp;d=identicon" title="Hlaaftana"></figure>
+              <figure class="avatar avatar-sm">
+              <img src="https://www.gravatar.com/avatar/aa81bb8117f158b6d9e6f3f174092573?s=40&amp;d=identicon" title="ErikCampobadal"><i class="avatar-presence online"></i></figure>
             </td>
             <td>5</td>
             <td>547</td>
@@ -81,7 +88,8 @@
             <td>Lexers and parsers in Nim</td>
             <td>community</td>
             <td>
-              <img src="https://www.gravatar.com/avatar/aa81bb8117f158b6d9e6f3f174092573?s=20&amp;d=identicon" title="ErikCampobadal">
+              <figure class="avatar avatar-sm">
+              <img src="https://www.gravatar.com/avatar/aa81bb8117f158b6d9e6f3f174092573?s=40&amp;d=identicon" title="ErikCampobadal"><i class="avatar-presence online"></i></figure>
             </td>
             <td>0</td>
             <td>14</td>
@@ -91,9 +99,14 @@
             <td>I need help</td>
             <td>help</td>
             <td>
-              <img src="https://www.gravatar.com/avatar/4831aedc3469e317e581e9e7348519a1?s=20&amp;d=identicon" title="DTxplorer">
-              <img src="https://www.gravatar.com/avatar/ed45a09ddafbe85bd1f3917f6ee57593?s=20&amp;d=identicon" title="mashingan">
-              <img src="https://www.gravatar.com/avatar/b3ed6848f575cc54c49f4916d15b65fd?s=20&amp;d=identicon" title="mratsim">
+              <figure class="avatar avatar-sm">
+                <img src="https://www.gravatar.com/avatar/4831aedc3469e317e581e9e7348519a1?s=40&amp;d=identicon" title="DTxplorer">
+              </figure>
+              <figure class="avatar avatar-sm">
+              <img src="https://www.gravatar.com/avatar/ed45a09ddafbe85bd1f3917f6ee57593?s=40&amp;d=identicon" title="mashingan">
+              </figure>
+              <figure class="avatar avatar-sm">
+              <img src="https://www.gravatar.com/avatar/b3ed6848f575cc54c49f4916d15b65fd?s=40&amp;d=identicon" title="mratsim"></figure>
             </td>
             <td>4</td>
             <td>24.5k</td>
@@ -103,8 +116,12 @@
             <td>Nim v1.0 is here!</td>
             <td>announcement</td>
             <td>
-              <img src="https://www.gravatar.com/avatar/4831aedc3469e317e581e9e7348519a1?s=20&amp;d=identicon" title="DTxplorer">
-              <img src="https://www.gravatar.com/avatar/ed45a09ddafbe85bd1f3917f6ee57593?s=20&amp;d=identicon" title="mashingan">
+              <figure class="avatar avatar-sm">
+                <img src="https://www.gravatar.com/avatar/4831aedc3469e317e581e9e7348519a1?s=40&amp;d=identicon" title="DTxplorer">
+              </figure>
+              <figure class="avatar avatar-sm">
+              <img src="https://www.gravatar.com/avatar/ed45a09ddafbe85bd1f3917f6ee57593?s=40&amp;d=identicon" title="mashingan">
+              </figure>
             </td>
             <td>4</td>
             <td>86.1k</td>
diff --git a/redesign/nimforum.scss b/redesign/nimforum.scss
index 47f997d..601c6b4 100644
--- a/redesign/nimforum.scss
+++ b/redesign/nimforum.scss
@@ -13,6 +13,12 @@ $primary-color: #2e5bec;
   margin-left: $control-padding-x;
 }
 
+// Spectre fixes.
+// - Weird avatar outline.
+.avatar {
+  background: transparent;
+}
+
 // Custom styles.
 // - Navigation bar.
 $navbar-height: 60px;
@@ -36,4 +42,5 @@ $logo-height: $navbar-height - 20px;
 #main-buttons {
   margin-top: $control-padding-y;
   margin-bottom: $control-padding-y;
-}
\ No newline at end of file
+}
+