style cleanup

ErsatzTV/Shared/MediaCard.razor

@@ -1,21 +1,13 @@
-<div style="width: 152px" class="mx-3 pb-3">
+<div class="media-card-container mx-3 pb-3">
-    <MudPaper Style="display: flex; flex-direction: column; height: 220px; justify-content: center; width: 152px;">
+    <MudPaper Class="media-card">
-        <MudText Align="Align.Center"
+        <MudText Align="Align.Center" Typo="Typo.h1" Class="media-card-poster-placeholder mud-text-disabled">
-                 Typo="Typo.h1"
-                 Style="font-weight: bold"
-                 Class="mud-text-disabled">
             @Data.SortTitle.Substring(0, 1)
         </MudText>
     </MudPaper>
-    <MudText Align="Align.Center"
+    <MudText Align="Align.Center" Class="media-card-title" UserAttributes="@(new Dictionary<string, object> { { "title", Data.Title } })">
-             UserAttributes="@(new Dictionary<string, object> { { "title", Data.Title } })"
-             Style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;">
         @Data.Title
     </MudText>
-    <MudText Typo="Typo.body2"
+    <MudText Typo="Typo.body2" Align="Align.Center" Class="mud-text-secondary">
-             Align="Align.Center"
-             Style="text-overflow: ellipsis"
-             Class="mud-text-secondary">
         @Data.Subtitle
     </MudText>
 </div>

ErsatzTV/Shared/MediaItemsGrid.razor

@@ -2,7 +2,7 @@
 @using ErsatzTV.Application.MediaItems.Queries
 @inject IMediator Mediator
 
-<MudContainer MaxWidth="MaxWidth.False" Style="display: flex; flex-direction: row; flex-wrap: wrap">
+<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
     @foreach (AggregateMediaItemViewModel item in _data.OrderBy(i => i.SortTitle))
     {
         <MediaCard Data="@item"/>

ErsatzTV/wwwroot/css/site.css

@@ -1 +1,28 @@
-
+.media-card-grid {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.media-card-container {
+    width: 152px;
+}
+
+.media-card {
+    display: flex;
+    flex-direction: column;
+    height: 220px;
+    justify-content: center;
+    width: 152px;
+}
+
+.media-card-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.media-card-poster-placeholder {
+    font-weight: bold;
+}