[+] Style friends

src/views/others/Friends.vue

@@ -7,6 +7,8 @@
 
     <div class="friends" v-if="friends">
       <div class="friend card clickable" v-for="f in friends" :key="f.name" @click="click(f)">
+<!--           :style="{'background-image': `url(${f.banner})`}">-->
+        <div class="banner" :style="bgStyle(f)"></div>
         <img class="avatar" :src="f.avatar" alt="">
         <div class="info">
           <div class="name">{{ f.name }}</div>
@@ -41,6 +43,7 @@ export default class Friends extends Vue
     // Fix avatar relative url
     this.friends.forEach(f => {
       if (!f.avatar.startsWith('http')) f.avatar = `${hosts.content}/${f.avatar}`
+      if (f.banner && !f.banner.startsWith('http')) f.banner = `${hosts.content}/${f.banner}`
     })
   }
 
@@ -48,10 +51,61 @@ export default class Friends extends Vue
   {
     window.open(f.link)
   }
+
+  bgStyle(f: Friend)
+  {
+    if (f.banner) return {'background-image': `url(${f.banner})`}
+    else return {}
+  }
 }
 </script>
 
 <style lang="sass" scoped>
 @import "src/css/colors"
 @import "src/css/responsive"
+
+.friends
+  display: grid
+
+.friend
+  display: flex
+  position: relative
+
+  $top: 80px
+  $img: 80px
+
+  .banner
+    position: absolute
+    left: 0
+    top: 0
+    z-index: 1
+    width: 100%
+    height: $top
+    background-color: rgb(166 134 89 / 34%)
+    background-size: cover
+    background-position: center
+
+  .banner:after
+    content: " "
+    position: absolute
+    z-index: 2
+    width: 100%
+    height: 100%
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 50%)
+
+  .info
+    z-index: 10
+    display: flex
+    flex-direction: column
+    justify-content: end
+
+    .name
+      font-size: 1.2em
+
+  .avatar
+    margin-top: calc(#{$top} - #{$img} / 2 - 20px)
+    width: $img
+    border-radius: 100%
+    margin-right: 20px
+    z-index: 10
 </style>