Added blurred backdrop to scene tile banners to compensate for lack of upscaling.

components/campaigns/campaign.vue

@@ -29,15 +29,18 @@
 		:href="campaign.url || campaign.affiliate?.url"
 		target="_blank"
 		class="campaign"
+		:style="{ background: backdrop && `url(${bannerSrc})` }"
 		data-umami-event="campaign-click"
 		:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
 	>
-		<img
+		<div class="campaign-overlay">
-			:src="bannerSrc"
+			<img
-			:width="campaign.banner.width"
+				:src="bannerSrc"
-			:height="campaign.banner.height"
+				:width="campaign.banner.width"
-			class="campaign-banner"
+				:height="campaign.banner.height"
-		>
+				class="campaign-banner"
+			>
+		</div>
 	</a>
 </template>
 
@@ -52,6 +55,10 @@ const props = defineProps({
 		type: Object,
 		default: null,
 	},
+	backdrop: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 // console.log(props.campaign);
@@ -76,7 +83,8 @@ const bannerSrc = (() => {
 	height: 100%;
 	display: flex;
 	justify-content: center;
-	/* align-items: center; */
+	border-radius: .25rem;
+	overflow: hidden;
 }
 
 .frame {
@@ -84,11 +92,27 @@ const bannerSrc = (() => {
 	overflow: hidden;
 }
 
+.campaign-overlay {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	box-sizing: border-box;
+	padding: 4px; /* margin for drop shadow */
+	justify-content: center;
+	align-items: center;
+	backdrop-filter: blur(1rem) saturate(70%) brightness(125%);
+}
+
+.dark .campaign-overlay {
+	backdrop-filter: blur(1rem) saturate(70%) brightness(75%);
+}
+
 .campaign-banner {
 	height: auto;
 	max-height: 100%;
 	max-width: 100%;
 	object-fit: contain;
+	filter: drop-shadow(0 0 2px var(--shadow-weak-10));
 }
 
 .restricted {

components/scenes/scenes.vue

@@ -167,7 +167,10 @@
 							v-if="item === 'campaign' && sceneCampaign"
 							:key="`campaign-${item.id}`"
 						>
-							<Campaign :campaign="sceneCampaign" />
+							<Campaign
+								:campaign="sceneCampaign"
+								:backdrop="true"
+							/>
 						</li>
 
 						<li
@@ -433,11 +436,6 @@ function setView(newView) {
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 	gap: .5rem;
 	padding: .5rem 1rem 1rem 1rem;
-
-	:deep(.campaign) .campaign-banner {
-		border-radius: .25rem;
-		filter: drop-shadow(0 0 3px var(--shadow-weak-20));
-	}
 }
 
 :deep(.campaign-meta) .campaign-banner,