Using mixins now

pages/anime/anime.pixy

@@ -39,7 +39,7 @@ component Anime(anime *arn.Anime)
 			each relation in anime.Relations
 				a.relation.ajax(href="/anime/" + toString(relation.ID), title=relation.Anime().Title.Romaji)
 					img.anime-image.relation-image(src=relation.Anime().Image, alt=relation.Anime().Title.Romaji)
-					span= arn.Capitalize(relation.Type)
+					.relation-type= arn.Capitalize(relation.Type)
 
 	if len(anime.Genres) > 0
 		h3.anime-section-name Genres

pages/anime/anime.scarlet

@@ -1,11 +1,9 @@
 .anime-header
-	display flex
-	flex-flow row
+	horizontal
 
 .anime-image-container
+	horizontal
 	flex 1
-	display flex
-	flex-flow row
 	justify-content center
 	align-items flex-start
 
@@ -22,9 +20,8 @@
 		box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2)
 
 .anime-info
+	vertical
 	flex 9999999
-	display flex
-	flex-flow column
 	margin-left content-padding
 
 .anime-title
@@ -39,17 +36,17 @@
 	opacity 0.5
 
 .relations
-	float left
-	display flex
-	flex-flow row wrap
+	horizontal-wrap
 
 .relation
-	display flex
-	flex-flow column
-	font-size 0.9rem
+	vertical
 	align-items center
 	padding 0.5rem
 
+.relation-type
+	font-size 0.7rem
+	margin-top 0.1rem
+
 .relation-image
 	width 100px
 	height 141px

pages/anime/anime.styl

@@ -1,14 +1,10 @@
 .anime-container
-	float left
-	width 100%
 	padding 0
 	text-align left
 	border-radius 3px
 	box-sizing border-box
 
 .anime-links
-	float left
-	width 100%
 	display flex
 	flex-flow row wrap
 

pages/profile/profile.scarlet

@@ -57,8 +57,7 @@ profile-boot-duration = 2s
 	// ...
 
 .intro-container
-	display flex
-	flex-flow column
+	vertical
 	align-items flex-start
 	padding content-padding
 	padding-top 0