Use avatars for the online users box.

assets/less/classes/index.less

@@ -39,4 +39,26 @@
             }
         }
     }
+
+    &__online {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        overflow: hidden;
+
+        &__user {
+            color: var(--user-colour);
+            text-decoration: none;
+            font-size: 0;
+            width: 30px;
+            height: 30px;
+            background-image: var(--avatar-url);
+            margin: 2px;
+            transition: box-shadow .2s;
+
+            &:hover {
+                box-shadow: 0 1px 4px var(--user-colour);
+            }
+        }
+    }
 }

public/index.php

@@ -55,9 +55,10 @@ $onlineUsers = cache_get('index:online:v1', function () {
         LEFT JOIN `msz_roles` as r
         ON r.`role_id` = u.`display_role`
         WHERE u.`user_active` >= DATE_SUB(NOW(), INTERVAL 5 MINUTE)
-        ORDER BY u.`user_active` DESC
+        ORDER BY RAND()
+        LIMIT 104
     ')->fetchAll(PDO::FETCH_ASSOC);
-}, 30);
+}, -1);
 
 echo tpl_render('home.' . (user_session_active() ? 'home' : 'landing'), [
     'users_count' => $statistics['users'],

templates/home/landing.twig

@@ -29,19 +29,19 @@
                 </div>
             </div>
 
-            <div class="container index__container">
-                {{ container_title('Online users') }}
-                <div class="container__content">
-                    {% if online_users < 1 %}
-                        No one was online in the last 5 minutes.
-                    {% else %}
-                        Online users in the last 5 minutes:<br>
+            {% if online_users > 0 %}
+                <div class="container index__container">
+                    {{ container_title('Online users') }}
+
+                    <div class="index__online">
                         {% for user in online_users %}
-                            <a href="/profile.php?u={{ user.user_id }}" class="index__stats__emphasis index__stats__link" style="{{ user.user_colour|html_colour }}">{{ user.username }}</a>
+                            <a href="/profile.php?u={{ user.user_id }}" class="avatar index__online__user" style="{{ user.user_colour|html_colour }};--avatar-url: url('/profile.php?m=avatar&amp;u={{ user.user_id }}');" title="{{ user.username }}">
+                                {{ user.username }}
+                            </a>
                         {% endfor %}
-                    {% endif %}
+                    </div>
                 </div>
-            </div>
+            {% endif %}
 
             <div class="container index__container">
                 {{ container_title('Changelog', '/changelog.php') }}