Split mixins into multiple files

config.json

@@ -7,7 +7,13 @@
 	"styles": [
 		"include/config",
 		"include/dark",
-		"include/mixins",
+		"mixins/layout",
+		"mixins/utils",
+		"mixins/effects",
+		"mixins/ui",
+		"mixins/sidebar",
+		"mixins/anime-grid",
+		"mixins/feature-card",
 		"reset",
 		"base",
 		"typography",

pages/editor/editor.pixy

@@ -13,6 +13,16 @@ component Editor(url string, score int, scoreTitle string, scoreTypes map[string
 				RawIcon("tv")
 			p.feature-card-text Anime
 
+		a.feature-card.mountable(href="/editor/tracks")
+			.feature-card-icon
+				RawIcon("music")
+			p.feature-card-text SoundTracks
+		
+		a.feature-card.mountable(href="/editor/companies")
+			.feature-card-icon
+				RawIcon("building-o")
+			p.feature-card-text Companies
+	
 	//- .footer
 	//- 	for objectType, score := range scoreTypes
 	//- 		.mountable

pages/support/support.scarlet

@@ -53,9 +53,7 @@
 	font-weight bold
 
 .payment-amount-converted
-	font-size 0.9rem
+	feature-card-footer
-	opacity 0.5
-	margin-top 0
 
 .feature-cards-alternative-color
 	.feature-card-icon,

styles/include/mixins.scarlet

@@ -1,136 +0,0 @@
-mixin default-transition
-	transition all transition-speed ease
-
-mixin horizontal
-	display flex
-	flex-direction row
-
-mixin horizontal-wrap
-	display flex
-	flex-flow row wrap
-
-mixin horizontal-wrap-center
-	horizontal-wrap
-	justify-content center
-
-mixin vertical
-	display flex
-	flex-direction column
-
-mixin vertical-wrap
-	display flex
-	flex-flow column wrap
-
-mixin vertical-wrap-center
-	horizontal-wrap
-	align-items center
-
-mixin noise-light
-	background-image url("//media.notify.moe/images/elements/noise-light.png")
-
-mixin noise-strong
-	background-image url("//media.notify.moe/images/elements/noise-strong.png")
-
-mixin ui-element
-	border 1px solid ui-border-color
-	background ui-background
-	border-radius ui-element-border-radius
-	default-transition
-	:hover
-		border-color ui-hover-border-color
-		// background ui-hover-background
-		// box-shadow outline-shadow-medium
-
-mixin ui-disabled
-	background-color ui-disabled-color
-	cursor not-allowed
-
-mixin clip-long-text
-	overflow hidden
-	white-space nowrap
-	text-overflow ellipsis
-
-mixin anime-mini-item
-	margin 0.25rem
-
-mixin anime-generic-item-image
-	object-fit cover
-	border-radius 2px
-	filter none
-	transition filter transition-speed ease, opacity transition-speed ease
-
-	:hover
-		filter saturate(1.3)
-
-mixin anime-mini-item-image
-	width anime-image-small-width !important
-	height anime-image-small-height !important
-	anime-generic-item-image
-
-	// Make it easier for the browser to layout by specifying max size as well
-	max-width anime-image-small-width
-	max-height anime-image-small-height
-
-mixin anime-list-item-image
-	width anime-image-tiny-width
-	height anime-image-tiny-height
-	border-radius 2px
-	object-fit cover
-
-	// Make it easier for the browser to layout by specifying max size as well
-	max-width anime-image-tiny-width
-	max-height anime-image-tiny-height
-
-mixin sidebar
-	vertical
-	margin-left 0
-	margin-top 1rem
-	flex-shrink 0
-
-mixin sidebar-medium
-	margin-left content-padding
-	margin-top 0
-	flex-basis 270px
-
-mixin sidebar-big
-	flex-basis 300px
-
-mixin bg-dark-up
-	background-color transparent
-	:hover
-		background-color rgba(0, 0, 0, 0.015)
-
-mixin bg-light-up
-	background-color transparent
-	:hover
-		background-color rgba(255, 255, 255, 0.015)
-
-mixin light-up
-	filter brightness(0.4) saturate(1)
-	:hover
-		filter brightness(1) saturate(1.3)
-
-mixin saturate-up
-	filter saturate(1)
-	:hover
-		filter saturate(1.3)
-
-mixin saturate-up
-	filter saturate(1)
-	:hover
-		filter saturate(1.3)
-
-mixin scale-up
-	transform scale(1)
-	:hover
-		transform scale(1.056338)
-
-mixin shadow-up
-	box-shadow shadow-light
-	:hover
-		box-shadow shadow-medium
-
-mixin outline-shadow-up
-	box-shadow outline-shadow-light
-	:hover
-		box-shadow outline-shadow-medium

styles/mixins/anime-grid.scarlet

@@ -0,0 +1,30 @@
+mixin anime-mini-item
+	margin 0.25rem
+
+mixin anime-generic-item-image
+	object-fit cover
+	border-radius 2px
+	filter none
+	transition filter transition-speed ease, opacity transition-speed ease
+
+	:hover
+		filter saturate(1.3)
+
+mixin anime-mini-item-image
+	width anime-image-small-width !important
+	height anime-image-small-height !important
+	anime-generic-item-image
+
+	// Make it easier for the browser to layout by specifying max size as well
+	max-width anime-image-small-width
+	max-height anime-image-small-height
+
+mixin anime-list-item-image
+	width anime-image-tiny-width
+	height anime-image-tiny-height
+	border-radius 2px
+	object-fit cover
+
+	// Make it easier for the browser to layout by specifying max size as well
+	max-width anime-image-tiny-width
+	max-height anime-image-tiny-height

styles/mixins/effects.scarlet

@@ -0,0 +1,39 @@
+mixin bg-dark-up
+	background-color transparent
+	:hover
+		background-color rgba(0, 0, 0, 0.015)
+
+mixin bg-light-up
+	background-color transparent
+	:hover
+		background-color rgba(255, 255, 255, 0.015)
+
+mixin light-up
+	filter brightness(0.4) saturate(1)
+	:hover
+		filter brightness(1) saturate(1.3)
+
+mixin saturate-up
+	filter saturate(1)
+	:hover
+		filter saturate(1.3)
+
+mixin saturate-up
+	filter saturate(1)
+	:hover
+		filter saturate(1.3)
+
+mixin scale-up
+	transform scale(1)
+	:hover
+		transform scale(1.056338)
+
+mixin shadow-up
+	box-shadow shadow-light
+	:hover
+		box-shadow shadow-medium
+
+mixin outline-shadow-up
+	box-shadow outline-shadow-light
+	:hover
+		box-shadow outline-shadow-medium

styles/mixins/feature-card.scarlet

@@ -0,0 +1,4 @@
+mixin feature-card-footer
+	font-size 0.9rem
+	opacity 0.5
+	margin-top 0

styles/mixins/layout.scarlet

@@ -0,0 +1,23 @@
+mixin horizontal
+	display flex
+	flex-direction row
+
+mixin horizontal-wrap
+	display flex
+	flex-flow row wrap
+
+mixin horizontal-wrap-center
+	horizontal-wrap
+	justify-content center
+
+mixin vertical
+	display flex
+	flex-direction column
+
+mixin vertical-wrap
+	display flex
+	flex-flow column wrap
+
+mixin vertical-wrap-center
+	horizontal-wrap
+	align-items center

styles/mixins/sidebar.scarlet

@@ -0,0 +1,13 @@
+mixin sidebar
+	vertical
+	margin-left 0
+	margin-top 1rem
+	flex-shrink 0
+
+mixin sidebar-medium
+	margin-left content-padding
+	margin-top 0
+	flex-basis 270px
+
+mixin sidebar-big
+	flex-basis 300px

styles/mixins/ui.scarlet

@@ -0,0 +1,13 @@
+mixin ui-element
+	border 1px solid ui-border-color
+	background ui-background
+	border-radius ui-element-border-radius
+	default-transition
+	:hover
+		border-color ui-hover-border-color
+		// background ui-hover-background
+		// box-shadow outline-shadow-medium
+
+mixin ui-disabled
+	background-color ui-disabled-color
+	cursor not-allowed

styles/mixins/utils.scarlet

@@ -0,0 +1,13 @@
+mixin default-transition
+	transition all transition-speed ease
+
+mixin noise-light
+	background-image url("//media.notify.moe/images/elements/noise-light.png")
+
+mixin noise-strong
+	background-image url("//media.notify.moe/images/elements/noise-strong.png")
+
+mixin clip-long-text
+	overflow hidden
+	white-space nowrap
+	text-overflow ellipsis