Improved character page design

pages/anime/anime.scarlet

@@ -32,8 +32,7 @@
 > 800px
 	.anime-header
 		horizontal
-		padding-bottom content-padding
-		border-bottom 1px solid rgba(0, 0, 0, 0.05)
+		page-header
 
 	.anime-title
 		text-align left

pages/character/character.pixy

@@ -37,7 +37,10 @@ component CharacterDetails(character *arn.Character, characterAnime []*arn.Anime
 					
 					.character-description.mountable!= markdown.Render(character.Description)
 			
-					h3.mountable Anime
+			.character-main-column
+				if len(characterAnime) > 0
+					.character-section
+						h3.character-section-name.mountable Anime
 
 						.character-anime.mountable
 							each anime in characterAnime
@@ -45,12 +48,12 @@ component CharacterDetails(character *arn.Character, characterAnime []*arn.Anime
 									img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
 
 				if len(quotes) > 0 && (len(quotes) > 1 || mainQuote != quotes[0])
-						h3.mountable Quotes
+					.character-section
+						h3.character-section-name.mountable Quotes
 
-						.character-quotes.mountable
+						.quotes.character-quotes.mountable
 							each quote in quotes
 								if mainQuote == nil || quote.ID != mainQuote.ID
-									.character-quote
 									Quote(quote, user)
 
 		.character-sidebar

pages/character/character.scarlet

@@ -16,7 +16,6 @@
 	vertical
 	justify-content flex-start
 	align-items center
-	margin-bottom 1rem
 
 .character-image-large
 	width 219px
@@ -50,9 +49,9 @@
 	anime-mini-item-image
 
 .character-quotes
-	vertical
+	justify-content flex-start
 
-.character-quote
+.character-quotes
 	footer,
 	.quote-footer
 		display none
@@ -64,12 +63,19 @@
 .relevant-characters
 	horizontal-wrap
 
+.character-section
+	margin-top 1rem
+
+.character-section-name
+	font-weight bold
+
 > 1250px
 	.character-page
 		horizontal
 
 	.character-header
 		horizontal
+		page-header
 
 	.character-name
 		text-align left

styles/mixins/page-header.scarlet

@@ -0,0 +1,3 @@
+mixin page-header
+	padding-bottom content-padding
+	border-bottom 1px solid rgba(0, 0, 0, 0.05)