2016-11-28 16:06:00 +00:00
|
|
|
profile-boot-duration = 2s
|
|
|
|
|
|
|
|
.profile
|
2017-06-07 23:14:45 +00:00
|
|
|
horizontal
|
2016-11-28 16:06:00 +00:00
|
|
|
|
|
|
|
position relative
|
|
|
|
left calc(content-padding * -1)
|
2016-12-02 15:23:05 +00:00
|
|
|
top calc(content-padding-top * -1)
|
2016-11-28 16:06:00 +00:00
|
|
|
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)
|
|
|
|
|
2016-11-30 15:29:36 +00:00
|
|
|
default-transition
|
2016-12-01 15:27:53 +00:00
|
|
|
animation appear transition-speed
|
2016-11-28 16:06:00 +00:00
|
|
|
|
|
|
|
overflow hidden
|
|
|
|
|
2017-06-08 12:46:38 +00:00
|
|
|
.profile-field
|
|
|
|
text-align center
|
|
|
|
|
|
|
|
< 600px
|
|
|
|
.profile
|
|
|
|
vertical
|
|
|
|
align-items center
|
|
|
|
|
|
|
|
.intro-container
|
|
|
|
align-items center
|
|
|
|
margin-top calc(content-padding * 1.5)
|
|
|
|
padding-left content-padding
|
|
|
|
|
2016-12-01 15:27:53 +00:00
|
|
|
animation appear
|
|
|
|
0%
|
|
|
|
transform rotateX(90deg)
|
|
|
|
filter opacity(0) saturate(0) blur(10px)
|
|
|
|
100%
|
|
|
|
transform rotateX(0)
|
|
|
|
filter opacity(1) saturate(1) blur(0)
|
2016-11-28 16:06:00 +00:00
|
|
|
|
|
|
|
.profile-cover
|
|
|
|
position absolute
|
|
|
|
left 0
|
|
|
|
top 0
|
|
|
|
width 100%
|
|
|
|
height 100%
|
|
|
|
z-index -1
|
2017-06-06 14:59:04 +00:00
|
|
|
object-fit cover
|
|
|
|
// background-size cover
|
2016-11-28 16:06:00 +00:00
|
|
|
overflow hidden
|
|
|
|
|
2016-11-30 15:29:36 +00:00
|
|
|
default-transition
|
2016-11-28 16:06:00 +00:00
|
|
|
animation cover-animation profile-boot-duration
|
|
|
|
animation-fill-mode forwards
|
|
|
|
|
2016-12-01 15:27:53 +00:00
|
|
|
animation cover-animation
|
2016-11-28 16:06:00 +00:00
|
|
|
0%
|
|
|
|
filter brightness(500%) blur(5px)
|
|
|
|
100%
|
|
|
|
filter brightness(35%) blur(0)
|
|
|
|
|
|
|
|
.profile-image
|
|
|
|
border-radius 3px
|
|
|
|
object-fit cover
|
2017-06-08 12:46:38 +00:00
|
|
|
width 100%
|
|
|
|
height auto
|
2016-11-28 16:06:00 +00:00
|
|
|
|
|
|
|
.image-container
|
2017-06-08 12:46:38 +00:00
|
|
|
flex 1
|
|
|
|
max-width 320px
|
2016-11-28 16:06:00 +00:00
|
|
|
|
|
|
|
.intro-container
|
2016-11-29 03:37:36 +00:00
|
|
|
vertical
|
2016-11-28 16:06:00 +00:00
|
|
|
align-items flex-start
|
|
|
|
padding content-padding
|
|
|
|
padding-top 0
|
2017-06-08 12:46:38 +00:00
|
|
|
padding-left calc(content-padding * 2)
|
|
|
|
max-width 900px
|
|
|
|
|
|
|
|
// Categories
|
|
|
|
|
|
|
|
.profile-category
|
|
|
|
// padding content-padding
|