Improved character pages

pages/character/character.pixy

@@ -1,10 +1,20 @@
 component CharacterDetails(character *arn.Character)
-	.character-header
-		.character-image-container
-			img.character-image-fullsize(src=character.Image, alt=character.Name)
-		.character-description-container
-			h1.character-name= character.Name
-			.anime-alternative-title
-				Japanese("日本語の名前無し")
-			.character-description!= markdown.Render(character.Description)
+	.character-page
+		.character-header
+			.character-image-container
+				img.character-image-fullsize(src=character.Image, alt=character.Name)
+			.character-description-container
+				h1.character-name= character.Name
+				.anime-alternative-title
+					Japanese("日本語の名前無し")
+				.character-description!= markdown.Render(character.Description)
+
+		if len(character.Attributes) > 0
+			.character-sidebar
+				h3 Information
+				table.character-attributes
+					each attribute in character.Attributes
+						tr.mountable(data-mountable-type="info")
+							td.character-attributes-name= attribute.Name + ":"
+							td.character-attributes-value= attribute.Value
 

pages/character/character.scarlet

@@ -1,3 +1,6 @@
+.character-page
+	vertical
+
 .character-header
 	vertical
 
@@ -12,10 +15,26 @@
 	margin-bottom 1rem
 
 .character-description
-	max-width 700px
 	margin-top 1.6rem
 
+.character-sidebar
+	vertical
+	margin-left 0
+	margin-top 1rem
+
+.character-attributes
+	margin 0
+
+.character-attributes-name
+	opacity 0.8
+
+.character-attributes-value
+	text-align right
+
 > 1250px
+	.character-page
+		horizontal
+
 	.character-header
 		horizontal
 
@@ -26,4 +45,13 @@
 		padding 0 content-padding
 
 	.character-description
-		margin-top typography-margin
+		margin-top typography-margin
+
+	.character-sidebar
+		margin-left content-padding
+		margin-top 0
+		min-width 270px
+
+> 1400px
+	.character-sidebar
+		min-width 300px