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,21 +37,24 @@ 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
-							a.character-anime-item.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user), data-mountable-type="anime")
-								img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
+						.character-anime.mountable
+							each anime in characterAnime
+								a.character-anime-item.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user), data-mountable-type="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
+				if len(quotes) > 0 && (len(quotes) > 1 || mainQuote != quotes[0])
+					.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)
+									Quote(quote, user)
 
 		.character-sidebar
 			if len(character.Attributes) > 0

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)