Tweaked scene and actor tile design, tags grid breakpoints.

assets/components/releases/scene-tile.vue

@@ -233,22 +233,27 @@ export default {
     height: 100%;
     box-shadow: 0 0 3px var(--darken-weak);
 
+	/*
 	&.new .poster::after {
-		content: '★';
+		content: 'new';
 		position: absolute;
-		top: 0;
-		left: 0;
-		width: 1rem;
-		height: 1rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		bottom: 0;
+		right: .5rem;
+		width: 2rem;
 		box-sizing: border-box;
-		margin: .25rem;
-		border-radius: 0 0 .5rem 0;
-		color: var(--primary);
-		font-size: 1rem;
+		padding: .1rem 0 .05rem 0;
+		border-radius: .25rem .25rem 0 0;
+		background: var(--info);
+		color: var(--text-light);
+		font-size: .7rem;
 		font-weight: bold;
 		line-height: 1;
-		text-shadow: 0 0 2px var(--darken-weak);
+		box-shadow: 0 0 3px var(--shadow);
 	}
+	*/
 
 	&:hover .unstashed,
 	&:hover .unstash {
@@ -323,12 +328,12 @@ export default {
     align-items: center;
     box-sizing: border-box;
     padding: 0 .5rem;
-    margin: 0 0 .1rem 0;
 }
 
 .info {
     display: flex;
     flex-direction: column;
+	align-items: flex-start;
     flex-grow: 1;
 	overflow: hidden;
 }
@@ -340,7 +345,7 @@ export default {
 .title {
     margin: 0;
     color: var(--text);
-    font-size: 1rem;
+    font-size: .9rem;
     line-height: 1.5;
 	white-space: nowrap;
     text-overflow: ellipsis;
@@ -366,8 +371,9 @@ export default {
 }
 
 .actor-link {
-    color: var(--link);
+    color: var(--text);
     text-decoration: none;
+	font-size: .9rem;
 
     &:hover {
         color: var(--primary);
@@ -375,7 +381,7 @@ export default {
 }
 
 .labels {
-    padding: 0 .5rem 1.5rem .5rem;
+    padding: 0 .5rem 1.25rem .5rem;
     max-height: .5rem;
     overflow-y: hidden;
 	font-size: 0;
@@ -406,11 +412,11 @@ export default {
 }
 
 .tag-link {
-	background: var(--background);
+	background: var(--shadow-touch);
     color: var(--shadow);
     display: inline-block;
     padding: .25rem .5rem;
-	border: solid 1px var(--shadow-hint);
+	margin: 0 1px 0 0;
     font-size: .75rem;
     font-weight: bold;
     text-decoration: none;
@@ -422,7 +428,7 @@ export default {
 }
 
 .details-wide {
-	margin: 0 0 .5rem 0;
+	margin: 0 0 .4rem 0;
 }
 
 .details-compact {
@@ -474,15 +480,18 @@ export default {
 		display: none;
 	}
 
+	/*
 	.tile.new .poster::after {
-		bottom: 0;
-		top: auto;
-		margin: .1rem .25rem;
+		top: 0;
+		right: .25rem;
+		bottom: auto;
+		border-radius: 0 0 .25rem .25rem;
+		padding: .05rem 0 .1rem 0;
 	}
+	*/
 
 	.stash {
 		left: 0;
-		right: auto;
 		padding: .25rem .5rem .5rem .25rem;
 	}
 }

assets/components/releases/tile-details.vue

@@ -57,10 +57,7 @@
 			target="_blank"
 			rel="noopener noreferrer"
 			class="date"
-		><Icon
-			v-if="release.url"
-			icon="share2"
-		/>{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</a>
+		>{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</a>
 
 		<a
 			v-else
@@ -91,27 +88,22 @@ export default {
     width: 100%;
     display: flex;
     justify-content: space-between;
+	z-index: 1;
 	white-space: nowrap;
-    background: var(--profile);
+    background: var(--info);
     font-size: 0;
 	font-weight: bold;
 
     .favicon {
 		width: 2rem;
 		box-sizing: border-box;
-		padding: .5rem;
+		padding: .4rem .5rem;
     }
 
-	/*
 	&.new .date::before {
-		content: '';
-		width: .5rem;
-		height: .5rem;
-		border-radius: 50%;
-		margin: 0 .25rem 0 0;
-		background: var(--primary);
+		content: '★';
+		margin: 0 .5rem 0 0;
 	}
-	*/
 }
 
 .site,
@@ -120,7 +112,7 @@ export default {
     align-items: center;
     position: relative;
     font-size: .8rem;
-    padding: .5rem;
+    padding: .4rem .5rem;
     color: var(--text-light);
     text-decoration: none;