feat(team): upgrade img and align with design spec

Author: flynnhou

public/img/graphic-team.png

@@ -1,14 +1,12 @@
 <template>
-    <div
-        class="staff-info"
-    >
-        <img
-        class="staff-info--avatar"
-        :src="`https://www.gravatar.com/avatar/${member.emailHash}?s=320&d=https://golang.tw/2020/img/gophercon-logo.png&r=g`"
-        :alt="`${member.name}'s Avatar`"
-        />
-        <div class="staff-info--name">{{ member.name }}</div>
-    </div>
+  <div class="staff-info">
+    <img
+      class="staff-info--avatar"
+      :src="`https://www.gravatar.com/avatar/${member.emailHash}?s=320&d=https://golang.tw/2020/img/gophercon-logo.png&r=g`"
+      :alt="`${member.name}'s Avatar`"
+    />
+    <div class="staff-info--name">{{ member.name }}</div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -21,30 +19,31 @@ interface Person {
 
 @Component
 export default class StaffInfo extends Vue {
-  @Prop({default: {}}) member!: Person;
+  @Prop({ default: {} }) member!: Person;
 }
 </script>
 
-
 <style lang="scss" scoped>
 .staff-info {
-    text-align: center;
+  text-align: center;
 
-    .staff-info--avatar {
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-    }
+  .staff-info--avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+  }
 
-    .staff-info--name {
-      margin-top: 8px;
-      font-size: 14px;
-      font-weight: normal;
-      font-stretch: normal;
-      font-style: normal;
-      line-height: normal;
-      letter-spacing: normal;
-      color: #333943;
-    }
+  .staff-info--name {
+    margin-top: 8px;
+    font-family: SourceHanSansTW, 'Noto Sans TC', sans-serif;
+    font-size: 14px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    text-align: center;
+    color: #333943;
+  }
 }
 </style>

public/img/graphic-team@2x.png

@@ -22,6 +22,11 @@
       </div>
     </div>
     <div class="content">
+      <div class="card-container individual-sponsor">
+        <div class="card">
+          <h2 class="font-black subtitle">贊助</h2>
+        </div>
+      </div>
       <div class="sponsor-wrapper">
         <div
           v-for="(leveledSponsors, sponsorOrder) in sponsorList"
@@ -186,7 +191,7 @@ export default class SponsorPage extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '@/assets/scss/mixin.scss';
 @import '@/assets/scss/variables.scss';
 
@@ -489,5 +494,21 @@ $logo-margin-bottom: 20px;
     letter-spacing: normal;
     color: #333943;
   }
+
+  .sponsor-text-container {
+    margin-top: 8px;
+    font-family: SourceHanSansTW;
+    font-size: 14px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #333943;
+
+    &:first-child:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
 }
 </style>

public/img/graphic-team@3x.png

@@ -33,9 +33,9 @@
         </div>
       </div>
       <div class="sponsor-wrapper">
-        <div v-for="group in staffs" :key="`staff-group-${group.name}`" class="sponsor-card">
-          <h2 class="sponsor-name">
-            <span>{{ group.name }}</span>
+        <div v-for="group in staffs" :key="`staff-group-${group.name}`" class="sponsor-card-container">
+          <h2 class="sponsor-level">
+            <span class="sponsor-level-text">{{ group.name }}</span>
           </h2>
           <div class="sponsor-text-container">{{ group.description }}</div>
           <div class="staff-wrapper">