Better character description

pages/character/character.pixy

@@ -1,7 +1,10 @@
 component CharacterDetails(character *arn.Character)
-	h1= character.Name
-	
-	p
-		img(src=character.Image, alt=character.Name)
-	
-	p.character-description= character.Description
+	.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)
+

pages/character/character.scarlet

@@ -1,4 +1,29 @@
+.character-header
+	vertical
+
+.character-name
+	text-align center
+	margin-bottom 0.5rem
+
+.character-image-container
+	vertical
+	justify-content flex-start
+	align-items center
+	margin-bottom 1rem
+
 .character-description
-	max-width 800px
-	margin 0 auto
-	margin-top 1.6rem
+	max-width 700px
+	margin-top 1.6rem
+
+> 1250px
+	.character-header
+		horizontal
+
+	.character-name
+		text-align left
+
+	.character-description-container
+		padding 0 content-padding
+
+	.character-description
+		margin-top typography-margin