From 078a2ce5b998e9c60e5c91ccb89a6cee44cf508b Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Mon, 26 Dec 2022 09:32:59 -0500
Subject: [PATCH] [S] Make "Other" links cards

---
 src/css/colors.sass  |  1 +
 src/views/Others.vue | 36 +++++++++++++++++++++---------------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/css/colors.sass b/src/css/colors.sass
index f24f08b..8733e7c 100644
--- a/src/css/colors.sass
+++ b/src/css/colors.sass
@@ -5,4 +5,5 @@ $color-text-special: #ff8373
 // Lower means lighter
 $color-bg-6: #ffeedb
 $color-bg-5: #fff4eb
+$color-card: #fdf9f1
 $color-bg-4: #fffcf9
diff --git a/src/views/Others.vue b/src/views/Others.vue
index 689aaf6..aa727b1 100644
--- a/src/views/Others.vue
+++ b/src/views/Others.vue
@@ -1,15 +1,15 @@
 <template>
-  <div id="Others" class="general-page">
-    <div class="title">
-      <h2>更多链接</h2>
-      <div class="subtitle">欢迎点进来看看</div>
+    <div id="Others" class="general-page">
+        <div class="title">
+            <h2>更多链接</h2>
+            <div class="subtitle">欢迎点进来看看</div>
+        </div>
+        <div class="links">
+            <router-link class="rlink" to="/kitchen-menu">🍳 小桂桂的私房菜 菜单</router-link>
+            <router-link class="rlink" to="/friends">🎎 朋友们</router-link>
+            <a href="http://status.hydev.org/">🔌 看看服务器们过得怎么样</a>
+        </div>
     </div>
-    <div class="links">
-      <router-link class="rlink" to="/kitchen-menu">🍳 小桂桂的私房菜 菜单</router-link>
-      <router-link class="rlink" to="/friends">🎎 朋友们</router-link>
-      <a href="http://status.hydev.org/">🔌 看看服务器们过得怎么样</a>
-    </div>
-  </div>
 </template>
 
 <script lang="ts">
@@ -23,15 +23,21 @@ export default class Others extends Vue
 </script>
 
 <style lang="sass" scoped>
+@import "src/css/global"
 @import "src/css/colors"
 @import "src/css/responsive"
 
 .links
-  display: flex
-  flex-direction: column
-  align-items: flex-start
+    display: flex
+    gap: 10px
+    flex-direction: column
+    align-items: flex-start
 
 a
-  color: $color-text-main
-  margin-bottom: 0.5em
+    @extend .card
+    @extend .clickable
+
+    color: $color-text-main
+    text-decoration: none
+
 </style>