From 4e0f189983c3c921b7a65a23bd611bae506dd82d Mon Sep 17 00:00:00 2001
From: CodeF53 <fseusb@gmail.com>
Date: Sun, 23 Jun 2024 13:57:23 -0600
Subject: [PATCH] Minor tweaks to friends page

---
 assets/styles/font.scss |  3 +++
 pages/friends.vue       | 20 +++++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/assets/styles/font.scss b/assets/styles/font.scss
index 3404ff7..6246c70 100644
--- a/assets/styles/font.scss
+++ b/assets/styles/font.scss
@@ -15,3 +15,6 @@ dialog { color: inherit; }
 h1, h2, h3, h4, h5, h6, p, span, a, strong, em, blockquote, cite, q, abbr, del, ins, mark, sub, sup, code, pre, kbd, var, samp, ol, ul {
   margin: unset;
 }
+
+.dim { filter: opacity(0.8); }
+.small { font-size: 0.875rem; }
diff --git a/pages/friends.vue b/pages/friends.vue
index 2fad9d1..171ca54 100644
--- a/pages/friends.vue
+++ b/pages/friends.vue
@@ -19,13 +19,19 @@ const avatarProxy = 'https://dp.nea.moe/avatar/'
 </script>
 
 <template>
-  <ul class="friend_list wrap centerChildren">
-    <li v-for="friend in friends" :key="friend.id" class="interactive">
-      <NuxtLink :to="friend.url">
-        <img :src="`${avatarProxy}${friend.id}.png`">
-      </NuxtLink>
-    </li>
-  </ul>
+  <div class="col gap2 centerChildren">
+    <h1>Friends</h1>
+    <ul class="friend_list wrap centerChildren">
+      <li v-for="friend in friends" :key="friend.id" class="interactive">
+        <NuxtLink :to="friend.url">
+          <img :src="`${avatarProxy}${friend.id}.png`">
+        </NuxtLink>
+      </li>
+    </ul>
+    <p class="dim small">
+      DM me on discord to get added
+    </p>
+  </div>
 </template>
 
 <style>