Improved anime view on characters

mixins/cards/Anime/AnimeCard.pixy

@@ -0,0 +1,7 @@
+component AnimeCard(anime *arn.Anime, note string, user *arn.User)
+	a.anime-card.mountable(href=anime.Link())
+		.anime-card-image-container
+			img.anime-card-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
+		.anime-card-info
+			.anime-card-info-main= anime.Title.ByUser(user)
+			.anime-card-info-details= note

mixins/cards/Anime/anime-card.scarlet

@@ -0,0 +1,32 @@
+.anime-cards
+	horizontal-wrap
+
+.anime-card
+	card
+
+> 600px
+	.anime-card
+		max-width 300px
+
+.anime-card-image-container
+	width anime-image-small-width
+	height anime-image-small-width
+
+	img
+		width anime-image-small-width
+		height anime-image-small-width
+		border-radius ui-element-border-radius
+		object-fit cover
+
+.anime-card-info
+	vertical
+	margin-left card-padding
+	font-size 0.95em
+
+.anime-card-info-main
+	flex 1
+	line-height 1.3em
+
+.anime-card-info-details
+	color text-color
+	opacity 0.5

mixins/cards/User/UserCard.pixy

@@ -0,0 +1,7 @@
+component UserCard(user *arn.User, note string)
+	a.user-card.mountable(href=user.Link(), data-pro=user.IsPro())
+		.user-card-image-container
+			AvatarNoLink(user)
+		.user-card-info
+			.user-card-info-main= user.Nick
+			.user-card-info-details= note

mixins/cards/User/user-card.scarlet

@@ -0,0 +1,33 @@
+.user-cards
+	horizontal-wrap
+	justify-content center
+
+.user-card
+	card
+
+> 600px
+	.user-card
+		max-width 230px
+
+.user-card-image-container
+	width avatar-size
+	height avatar-size
+
+	img
+		width avatar-size
+		height avatar-size
+		border-radius ui-element-border-radius
+		box-shadow none
+
+.user-card-info
+	vertical
+	margin-left card-padding
+	overflow hidden
+
+.user-card-info-main
+	clip-long-text
+
+.user-card-info-details
+	clip-long-text
+	color text-color
+	opacity 0.5