Explore page improvements

mixins/AnimeGrid.pixy

@@ -3,4 +3,5 @@ component AnimeGrid(animeList []*arn.Anime, user *arn.User)
 		each anime in animeList
 			a.anime-grid-cell.ajax(href="/anime/" + toString(anime.ID))
 				img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji)
-				p.anime-grid-title= anime.Title.ByUser(user)
+				.anime-grid-title
+					.anime-grid-title-text= anime.Title.ByUser(user)

styles/anime-grid.scarlet

@@ -20,9 +20,11 @@
 	left 0
 	width 100%
 	padding 0.5rem
-	font-size 80%
+	background linear-gradient(to top, hsla(0, 0%, 0%, 0.8), hsla(0, 0%, 0%, 0))
+	default-transition
+
+.anime-grid-title-text
 	text-align center
-	background linear-gradient(to top, hsla(0, 0%, 0%, 0.5), hsla(0, 0%, 0%, 0))
 	color white
 	text-shadow 0 0 3px black
-	transition opacity transition-speed ease
+	font-size 80%

styles/include/mixins.scarlet

@@ -59,7 +59,7 @@ mixin anime-mini-item-image
 	border-radius 2px
 	filter none
 	transition filter transition-speed ease, opacity transition-speed ease
-	
+
 	:hover
 		filter saturate(1.3)