Added an effect to cover images

pages/profile/profile.pixy

@@ -11,11 +11,11 @@ component Profile(viewUser *arn.User, user *arn.User)
 			if viewUser.Tagline != ""
 				p.profile-field.tagline
 					Icon("comment")
-					span.tagline= viewUser.Tagline
+					span.tagline-text= viewUser.Tagline
 			else
 				p.profile-field.tagline
 					Icon("comment")
-					span.tagline No tagline yet.
+					span.tagline-text No tagline yet.
 			
 			//- if user != nil && viewUser.website
 			//- 	p.profile-field.website

pages/profile/profile.styl

@@ -1,3 +1,5 @@
+profileBootDuration = 2s
+
 .profile
 	position relative
 	left contentPadding * -1
@@ -6,27 +8,15 @@
 	padding contentPadding * 2
 
 	color white
-	text-shadow 0px 0px 1px rgba(0, 0, 0, 0.1)
+	text-shadow 0px 0px 1px rgb(0, 0, 0)
 
 	transition all transitionSpeed ease
 	animation-name appear
 	animation-duration transitionSpeed
 
-	&:hover
-		.profile-cover
-			filter brightness(28%)
-
-.profile-cover
-	position absolute
-	left 0
-	top 0
-	width 100%
-	height 100%
-	z-index -1
-	background-size cover
-
-	filter brightness(35%)
-	transition filter transitionSpeed ease
+	// &:hover
+	// 	.profile-cover
+	// 		filter brightness(28%)
 
 @keyframes appear
 	0%
@@ -36,18 +26,49 @@
 		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 transitionSpeed ease
+	animation cover-animation profileBootDuration
+	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 100%
-	height auto
-	max-width 320px
-	max-height 320px !important
+	width 320px !important
+	height 320px !important
 	// padding contentPadding
 	object-fit cover
 
 #anime-list-container
 	flex 1.5
 
+// rotate-y()
+// 	transform-origin 0% 0%
+// 	animation rotate-y-animation profileBootDuration
+// 	animation-fill-mode forwards
+
+// @keyframes rotate-y-animation
+// 	0%
+// 		opacity 0
+// 		transform rotateY(90deg)
+// 	100%
+// 		opacity 1
+// 		transform rotateY(0deg)
+
 .image-container
 	float left
 	width auto
@@ -63,6 +84,7 @@
 	padding-top 0
 	padding-left contentPadding * 2
 	max-width 900px
+	// rotate-y()
 
 .user-actions
 	float right