Various design improvements

pages/anime/amvs.pixy

@@ -0,0 +1,16 @@
+component AnimeAMVs(anime *arn.Anime, amvs []*arn.AMV, amvAppearances []*arn.AMV, user *arn.User)
+	if len(amvs) > 0
+		section.anime-section.mountable
+			h3.anime-section-name AMVs
+
+			.anime-amvs
+				each amv in amvs
+					AMVMini(amv, user)
+	
+	if len(amvAppearances) > 0
+		section.anime-section.mountable
+			h3.anime-section-name Appears in AMVs
+
+			.anime-amvs
+				each amv in amvAppearances
+					AMVMini(amv, user)

pages/anime/amvs.scarlet

@@ -0,0 +1,2 @@
+.anime-amvs
+	horizontal-wrap

pages/anime/anime.pixy

@@ -31,23 +31,6 @@ component AnimeMainColumn(anime *arn.Anime, listItem *arn.AnimeListItem, tracks
 	AnimeAMVs(anime, amvs, amvAppearances, user)
 	AnimeEpisodes(anime, episodes, user, false)
 
-component AnimeAMVs(anime *arn.Anime, amvs []*arn.AMV, amvAppearances []*arn.AMV, user *arn.User)
-	if len(amvs) > 0
-		section.anime-section.mountable
-			h3.anime-section-name AMVs
-
-			.amvs
-				each amv in amvs
-					AMV(amv, user)
-	
-	if len(amvAppearances) > 0
-		section.anime-section.mountable
-			h3.anime-section-name Appears in AMVs
-
-			.amvs
-				each amv in amvAppearances
-					AMV(amv, user)
-
 component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
 	AnimeTrailer(anime)
 	AnimeInformation(anime)

pages/anime/anime.scarlet

@@ -72,10 +72,10 @@
 
 .anime-soundtracks
 	vertical
-	margin-top 1rem
 
-	.soundtrack
-		flex-basis auto
+	.soundtrack-content
+		border-bottom-left-radius ui-element-border-radius !important
+		border-top-left-radius ui-element-border-radius !important
 
 	.soundtrack-anime-image
 		display none
@@ -84,10 +84,10 @@
 	.anime-soundtracks
 		horizontal-wrap
 		justify-content flex-start
-		margin-top 0
 
 		.soundtrack
 			max-width 200px
+			padding 0.5rem
 
 		.soundtrack-content
 			min-height 112px

pages/anime/character.scarlet

@@ -19,12 +19,6 @@
 	width 112px
 	height 112px
 
-// .character-name
-// 	font-size 0.75rem
-// 	color text-color
-// 	opacity 0.5
-// 	transition opacity transition-speed ease
-
 .character-image-small
 	width 56px
 	height 56px

pages/anime/episodes.scarlet

@@ -1,21 +1,16 @@
+const episode-margin = 0.5rem
+
 .episodes
-	vertical
-
-> 700px
-	.episodes
-		horizontal-wrap
-		justify-content flex-start
-
-	.episode
-		flex-basis 190px
+	horizontal-wrap
+	justify-content space-evenly
 
 .episode
 	vertical
 	ui-element
 	button-hover
-	flex 0
-	margin 0.5rem
+	margin episode-margin
 	padding 0.5rem
+	flex-basis calc(50% - episode-margin * 2)
 	overflow hidden
 	color text-color
 	box-shadow shadow-light
@@ -28,6 +23,13 @@
 		&.mounted
 			opacity 0.25 !important
 
+> 700px
+	.episodes
+		justify-content flex-start
+
+	.episode
+		flex-basis 190px
+
 .episode-number
 	display flex
 	justify-content center

pages/anime/genres.scarlet

@@ -1,10 +1,12 @@
 .anime-genres
 	horizontal-wrap
 	justify-content center
+	margin-bottom typography-margin
 
 .anime-genre
 	genre-tag
 
 > 800px
 	.anime-genres
-		justify-content flex-start
+		justify-content flex-start
+		margin-bottom 0

pages/anime/tracks.pixy

@@ -10,4 +10,4 @@ component AnimeTracks(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User
 
 			.soundtracks.anime-soundtracks
 				each track in tracks
-					SoundTrack(track)
+					SoundTrackMini(track)