Translated the basic style files to scarlet

pages/profile/profile.scarlet

@@ -0,0 +1,66 @@
+profile-boot-duration = 2s
+
+.profile
+	display flex
+	flex-flow row
+
+	position relative
+	left calc(content-padding * -1)
+	top calc(content-padding * -1)
+	min-width calc(100% + content-padding * 2)
+	padding calc(content-padding * 2)
+
+	color white
+	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
+
+	transition all transition-speed ease
+	animation-name appear
+	animation-duration transition-speed
+
+	overflow hidden
+
+// @keyframes appear
+// 	0%
+// 		transform rotateX(90deg)
+// 		filter opacity(0) saturate(0) blur(10px)
+// 	100%
+// 		transform rotateX(0)
+// 		filter opacity(1) saturate(1) blur(0)
+
+.profile-cover
+	position absolute
+	left 0
+	top 0
+	width 100%
+	height 100%
+	z-index -1
+	background-size cover
+	overflow hidden
+	
+	transition all transition-speed ease
+	animation cover-animation profile-boot-duration
+	animation-fill-mode forwards
+
+@keyframes cover-animation
+	0%
+		filter brightness(500%) blur(5px)
+	100%
+		filter brightness(35%) blur(0)
+
+.profile-image
+	border-radius 3px
+	width 320px !important
+	height 320px !important
+	object-fit cover
+
+.image-container
+	// ...
+
+.intro-container
+	display flex
+	flex-flow column
+	align-items flex-start
+	padding content-padding
+	padding-top 0
+	padding-left content-padding * 2
+	max-width 900px

pages/profile/profile.styl

@@ -2,17 +2,17 @@ profileBootDuration = 2s
 
 .profile
 	position relative
-	left contentPadding * -1
-	top contentPadding * -1
+	left content-padding * -1
+	top content-padding * -1
 	min-width calc(100% + 3rem)
-	padding contentPadding * 2
+	padding content-padding * 2
 
 	color white
 	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
 
-	transition all transitionSpeed ease
+	transition all transition-speed ease
 	animation-name appear
-	animation-duration transitionSpeed
+	animation-duration transition-speed
 
 	overflow hidden
 
@@ -38,7 +38,7 @@ profileBootDuration = 2s
 	background-size cover
 	overflow hidden
 	
-	transition all transitionSpeed ease
+	transition all transition-speed ease
 	animation cover-animation profileBootDuration
 	animation-fill-mode forwards
 
@@ -52,7 +52,7 @@ profileBootDuration = 2s
 	border-radius 3px
 	width 320px !important
 	height 320px !important
-	// padding contentPadding
+	// padding content-padding
 	object-fit cover
 
 #anime-list-container
@@ -74,7 +74,7 @@ profileBootDuration = 2s
 .image-container
 	float left
 	width auto
-	// padding contentPadding
+	// padding content-padding
 
 .intro-container
 	float left
@@ -82,9 +82,9 @@ profileBootDuration = 2s
 	display flex
 	flex-flow column
 	align-items center
-	padding contentPadding
+	padding content-padding
 	padding-top 0
-	padding-left contentPadding * 2
+	padding-left content-padding * 2
 	max-width 900px
 	// rotate-y()