Improved compact scene tile layout, added dark versions of entity favicons.

assets/components/releases/tile-details.vue

@@ -12,10 +12,17 @@
 				:title="`Part of ${release.entity.parent.name}`"
 				:to="`/${release.entity.parent.type}/${release.entity.parent.slug}`"
 				class="site-link"
-			><img
-				:src="`/img/logos/${release.entity.parent.slug}/favicon.png`"
-				class="favicon"
-			></router-link>
+			>
+				<img
+					:src="`/img/logos/${release.entity.parent.slug}/favicon_light.png`"
+					class="favicon favicon-light"
+				>
+
+				<img
+					:src="`/img/logos/${release.entity.parent.slug}/favicon_dark.png`"
+					class="favicon favicon-dark"
+				>
+			</router-link>
 
 			<router-link
 				v-tooltip.bottom="`More from ${release.entity.name}`"
@@ -29,10 +36,17 @@
 			v-else
 			:to="`/${release.entity.type}/${release.entity.slug}`"
 			class="site site-link"
-		><img
-			:src="`/img/logos/${release.entity.slug}/favicon.png`"
-			class="favicon"
-		>{{ release.entity.name }}</router-link>
+		>
+			<img
+				:src="`/img/logos/${release.entity.slug}/favicon_light.png`"
+				class="favicon favicon-light"
+			>
+
+			<img
+				:src="`/img/logos/${release.entity.slug}/favicon_dark.png`"
+				class="favicon favicon-dark"
+			>{{ release.entity.name }}
+		</router-link>
 
 		<a
 			v-if="release.date"
@@ -68,6 +82,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'breakpoints';
+
 .details {
     width: 100%;
     display: flex;
@@ -79,8 +95,9 @@ export default {
 	box-shadow: 0 0 3px var(--darken);
 
     .favicon {
-		width: 1rem;
-        margin: 0 .25rem 0 0;
+		height: 2rem;
+		box-sizing: border-box;
+		padding: .5rem;
     }
 
 	/*
@@ -115,9 +132,43 @@ export default {
 	}
 }
 
+.site {
+	padding: 0 .5rem 0 0;
+}
+
 .site-link {
     display: flex;
     color: var(--text-light);
     text-decoration: none;
 }
+
+.favicon-dark {
+	display: none;
+}
+
+@media(max-width: $breakpoint-kilo) {
+	/* light details bar
+	.details {
+		background: var(--background);
+		box-shadow: none;
+
+		.favicon-dark {
+			display: inline-block;
+		}
+
+		.favicon-light {
+			display: none;
+		}
+	}
+
+	.site-link,
+	.date {
+		color: var(--text);
+	}
+	*/
+
+	.site {
+		padding: 0 .5rem 0 0;
+	}
+}
 </style>