[S] Make "Other" links cards

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

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>