Some improvements

pages/profile/profile.styl

@@ -1,183 +0,0 @@
-profileBootDuration = 2s
-
-.profile
-	position relative
-	left content-padding * -1
-	top content-padding * -1
-	min-width calc(100% + 3rem)
-	padding content-padding * 2
-
-	color white
-	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
-
-	default-transition
-	animation-name appear
-	animation-duration transition-speed
-
-	overflow hidden
-
-	// &:hover
-	// 	.profile-cover
-	// 		filter brightness(28%)
-
-@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
-	
-	default-transition
-	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 320px !important
-	height 320px !important
-	// padding content-padding
-	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
-	// padding content-padding
-
-.intro-container
-	float left
-	width auto
-	display flex
-	flex-flow column
-	align-items center
-	padding content-padding
-	padding-top 0
-	padding-left content-padding * 2
-	max-width 900px
-	// rotate-y()
-
-.user-actions
-	float right
-	display flex
-	flex-flow row
-	justify-content center
-
-.user-action
-	max-width 250px
-
-#nick
-	text-align left
-	margin-top 0
-	margin-bottom 0
-
-.profile-field
-	margin-bottom 0.2em
-
-.location
-	// ...
-
-.role
-	opacity 0.6
-
-.list-provider-username
-	margin-top 0
-	margin-bottom 0
-	font-size 0.9em
-
-.main
-	// ...
-
-.alternative
-	opacity 0.4
-
-.report-bug-hint
-	//
-
-.loading-message
-	margin 0 auto
-	text-align center
-	opacity 0.4
-
-#embedded-footer
-	position fixed
-	bottom 4em
-	right calc(16px + 1em)
-	text-align right
-	z-index 1
-	font-size 0.9em
-	display flex
-	flex-flow row
-
-	.user
-		display inline-block
-		width auto
-		height auto
-		margin-right 1em
-
-.embedded-footer-info
-	display flex
-	flex-flow column
-
-.embedded-footer-nick
-	text-align left
-	opacity 0.5
-
-.embedded-footer-separator
-	opacity 0.2
-
-@media only screen and (max-width: 900px)
-	.intro-container
-		margin 1em 0
-		padding 0
-		width 100%
-		text-align center !important
-
-	#anime-list-container
-	.image-container
-	.user-actions
-		width 100%
-
-	#nick
-	.profile-field
-		width 100%
-		text-align center
-
-@media only screen and (min-width: 900px)
-	#posts
-		margin-left 0.5em
-
-@media only screen and (max-width: 800px)
-	.airing-date-prefix
-		display none