style(station card): improved responsiveness and mobile sizing

frontend/components/pages/Home.vue

@@ -49,8 +49,21 @@
 									onerror="this.src='/assets/notes-transparent.png'"
 									class="ytThumbnail"
 								/>
+								<div
+									v-if="
+										station.type === 'official' &&
+											station.currentSong.thumbnail
+									"
+									class="albumArtBg"
+									v-bind:style="{
+										'background-image':
+											'url(' +
+											station.currentSong.thumbnail +
+											')'
+									}"
+								></div>
 								<img
-									v-else
+									v-if="station.currentSong.thumbnail"
 									:src="station.currentSong.thumbnail"
 									onerror="this.src='/assets/notes-transparent.png'"
 								/>
@@ -515,21 +528,35 @@ html {
 		height: auto;
 		.topContent {
 			.albumArt {
-				max-height: 100px;
+				max-height: 100%;
 				max-width: 100px;
+				.albumArtBg {
+					background: url("/assets/notes-transparent.png") no-repeat
+						center center;
+					background-size: cover;
+					height: 100%;
+					width: 100%;
+					position: absolute;
+					top: 0;
+					filter: blur(5px);
+					display: inline-flex;
+				}
+				img {
+					height: auto;
+					width: 100%;
+					top: 0;
+					margin-top: auto;
+					margin-bottom: auto;
+					z-index: 1;
+				}
 			}
 			.info {
 				width: calc(100% - 100px);
-				padding: 5px 2px 2px 10px !important;
 				.displayName {
-					font-size: 16px !important;
-					margin-bottom: 3px !important;
+					font-size: 18px !important;
 				}
 				.description {
-					font-size: 12px !important;
-					-webkit-line-clamp: 2;
-					line-height: 15px;
-					max-height: 30px;
+					font-size: 13px !important;
 				}
 			}
 		}