Using mixins now

config.json

@@ -8,6 +8,7 @@
 		"reset",
 		"font-awesome",
 		"config",
+		"mixins",
 		"base",
 		"typography",
 		"layout",

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
+	horizontal
-	flex-flow row
 
 .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
+	horizontal-wrap
-	display flex
-	flex-flow row wrap
 
 .relation
-	display flex
+	vertical
-	flex-flow column
-	font-size 0.9rem
 	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
+	vertical
-	flex-flow column
 	align-items flex-start
 	padding content-padding
 	padding-top 0

styles/content.scarlet

@@ -1,5 +1,4 @@
 #content
-	display flex
+	vertical
-	flex-flow column
 	padding content-padding
 	line-height 1.7em

styles/grid.scarlet

@@ -1,6 +1,5 @@
 .grid
-	display flex
+	horizontal-wrap
-	flex-flow row wrap
 	justify-content center
 
 .grid-cell
@@ -57,10 +56,9 @@
 		border none
 
 .grid-text
+	vertical
 	width 100%
 	height 100%
-	display flex
-	flex-flow column
 	align-items center
 	justify-content center
 	font-size 1rem

styles/layout.scarlet

@@ -1,7 +1,6 @@
 #container
+	vertical
 	height 100%
-	display flex
-	flex-flow column
 
 #header
 	background-color header-color

styles/mixins.scarlet

@@ -0,0 +1,15 @@
+mixin horizontal
+	display flex
+	flex-direction row
+
+mixin horizontal-wrap
+	display flex
+	flex-flow row wrap
+
+mixin vertical
+	display flex
+	flex-direction column
+
+mixin vertical-wrap
+	display flex
+	flex-flow column wrap

styles/navigation.scarlet

@@ -1,6 +1,5 @@
 #navigation
-	display flex
+	horizontal
-	flex-flow row
 	padding 0 content-padding
 	height nav-height
 	overflow hidden