Made profile page responsive

main.go

@@ -22,7 +22,7 @@ func main() {
 	app.SetStyle(components.BundledCSS)
 
 	user, _ := arn.GetUserByNick("Akyoto")
-	user.CoverImage.URL = "http://i.imgur.com/6cJrxzx.jpg"
+	user.CoverImage.URL = "https://i.imgur.com/6cJrxzx.jpg"
 	user.CoverImage.Position.X = "50%"
 	user.CoverImage.Position.Y = "85%"
 	user.Save()

pages/profile/profile.styl

@@ -2,9 +2,8 @@
 	position relative
 	left contentPadding * -1
 	top contentPadding * -1
-	min-width 100%
+	min-width calc(100% + 3rem)
-	padding contentPadding
+	padding contentPadding * 2
-	box-sizing content-box
 
 	color white
 	text-shadow 0px 0px 1px rgba(0, 0, 0, 0.1)
@@ -39,9 +38,11 @@
 
 .profile-image
 	border-radius 3px
-	width 320px
+	width 100%
-	height 320px !important
+	height auto
-	margin contentPadding
+	max-width 320px
+	max-height 320px !important
+	// padding contentPadding
 	object-fit cover
 
 #anime-list-container
@@ -50,6 +51,7 @@
 .image-container
 	float left
 	width auto
+	// padding contentPadding
 
 .intro-container
 	float left
@@ -57,7 +59,9 @@
 	display flex
 	flex-flow column
 	align-items center
-	padding 1.5em
+	padding contentPadding
+	padding-top 0
+	padding-left contentPadding * 2
 	max-width 900px
 
 .user-actions
@@ -129,16 +133,6 @@
 .embedded-footer-separator
 	opacity 0.2
 
-.appear
-	animation-name appear-animation
-	animation-duration 1s
-
-@keyframes appear-animation
-	0%
-		opacity 0
-	100%
-		opacity 1
-
 @media only screen and (max-width: 900px)
 	.intro-container
 		margin 1em 0

styles/config.styl

@@ -14,6 +14,7 @@ outlineShadowHeavy = 0 0 6px alpha(black, 0.6)
 transitionSpeed = 290ms
 fadeSpeed = 200ms
 contentPadding = 1.5rem
+contentPaddingMobile = 1rem
 
 uiElement()
 	border uiBorder

styles/mobile.styl

@@ -19,7 +19,7 @@
 			content ''
 
 	#content
-		padding 1em
+		padding contentPaddingMobile
 
 	#header
 		text-align center
@@ -29,6 +29,11 @@
 		display inline-block
 		width auto
 
+	.profile
+		left contentPaddingMobile * -1 !important
+		top contentPaddingMobile * -1 !important
+		min-width calc(100% + 2rem) !important
+
 @media only screen and (min-width: 1100px)
 	.anime-list-image
 		display block