Added an effect to cover images

main.go

@@ -22,9 +22,9 @@ func main() {
 	app.SetStyle(components.BundledCSS)
 
 	user, _ := arn.GetUserByNick("Akyoto")
-	user.CoverImage.URL = "https://i.imgur.com/6cJrxzx.jpg"
+	user.CoverImage.URL = "https://www.pixelstalk.net/wp-content/uploads/2016/10/Hanyijie-sky-scenery-ship-anime-art-1920x1080.jpg"
 	user.CoverImage.Position.X = "50%"
-	user.CoverImage.Position.Y = "85%"
+	user.CoverImage.Position.Y = "0%"
 	user.Save()
 
 	scripts, _ := ioutil.ReadFile("temp/scripts.js")

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
+	// &:hover
-		.profile-cover
+	// 	.profile-cover
-			filter brightness(28%)
+	// 		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
 
 @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%
+	width 320px !important
-	height auto
+	height 320px !important
-	max-width 320px
-	max-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