server card

src/components/TabsMenuElements/ServersView/ServerCard.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="md-layout-item md-size-100">
-    <md-card>
+  <div class="md-layout-item md-size-100" style="padding-bottom: 1%">
+    <md-card st>
       <md-card-media-cover md-solid>
-        <md-card-media>
+        <md-card-media class="card-size" md-ratio="16:9">
           <img :src="serverImage" :alt="serverName" crossorigin="anonymous">
         </md-card-media>
-        <md-card-area>
+        <md-card-area class="md-card-area-server">
           <md-card-header>
-            <span class="md-title">{{serverName}}</span>
-            <span class="md-subhead">{{serverCurrentPlayer}}/{{serverMaxPlayer}}</span>
+            <span class="md-title" style="text-align: left; font-family: tf2build; font-size: 2.5em">{{serverName}}</span>
+            <br>
+            <span class="md-subhead" style="text-align: left; font-family: tf2secondary; font-size: 3em">{{serverCurrentPlayer}}/{{serverMaxPlayer}}</span>
           </md-card-header>
         </md-card-area>
       </md-card-media-cover>
@@ -30,4 +31,14 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style>
+.card-size:before {
+  padding-top: 22.25% !important;
+}
+
+.md-card-area-server {
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)) !important;
+}
+</style>