113 lines
2.3 KiB
Sass
113 lines
2.3 KiB
Sass
*
|
|
margin: 0
|
|
padding: 0
|
|
box-sizing: border-box
|
|
|
|
&::after, &::before
|
|
margin: 0
|
|
padding: 0
|
|
box-sizing: border-box
|
|
|
|
html
|
|
font-size: 62.5%
|
|
|
|
body
|
|
--background-color:hsl(180, 20%, 90%)
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
|
|
min-height: 100vh
|
|
padding: 2rem
|
|
color: hsla(0, 0%, 0%, 0.6)
|
|
background: var(--background-color)
|
|
text-align: center
|
|
|
|
h1
|
|
font-size: 3.2rem
|
|
padding-top: 2rem
|
|
|
|
+ p
|
|
font-size: 1.8rem
|
|
padding: 2rem 0 3rem
|
|
|
|
.main
|
|
display: flex
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
.wrap
|
|
margin: 2rem
|
|
transform-style: preserve-3d
|
|
transform: perspective(100rem)
|
|
cursor: pointer
|
|
|
|
.container
|
|
--rX:0
|
|
--rY:0
|
|
--bX:50%
|
|
--bY:80%
|
|
width: 30rem
|
|
height: 36rem
|
|
border: 1px solid var(--background-color)
|
|
border-radius: 1.6rem
|
|
padding: 4rem
|
|
display: flex
|
|
align-items: flex-end
|
|
position: relative
|
|
transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg))
|
|
background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)), url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9")
|
|
background-position: var(--bX) var(--bY)
|
|
background-size: 40rem auto
|
|
box-shadow: 0 0 3rem 0.5rem hsla(0, 0%, 0%, 0.2)
|
|
transition: transform .6s 1s
|
|
|
|
&::before, &::after
|
|
content: ""
|
|
width: 2rem
|
|
height: 2rem
|
|
border: 1px solid #fff
|
|
position: absolute
|
|
z-index: 2
|
|
opacity: .3
|
|
transition: .3s
|
|
|
|
&::before
|
|
top: 2rem
|
|
right: 2rem
|
|
border-bottom-width: 0
|
|
border-left-width: 0
|
|
|
|
&::after
|
|
bottom: 2rem
|
|
left: 2rem
|
|
border-top-width: 0
|
|
border-right-width: 0
|
|
|
|
.container--active
|
|
transition: none
|
|
|
|
.container--portfolio
|
|
filter: hue-rotate(80deg) saturate(140%)
|
|
|
|
.container--homepage
|
|
filter: hue-rotate(160deg) saturate(140%)
|
|
|
|
.container--yugen
|
|
filter: hue-rotate(180deg) saturate(40%)
|
|
|
|
.container--thaldrin
|
|
filter: hue-rotate(180deg) saturate(140%)
|
|
|
|
.container--kaito
|
|
filter: hue-rotate(180deg) saturate(140%)
|
|
|
|
.container--yiff
|
|
filter: hue-rotate(180deg) saturate(140%)
|
|
|
|
.container p
|
|
color: hsla(0, 0%, 100%, 0.6)
|
|
font-size: 2.2rem
|
|
|
|
.wrap:hover .container
|
|
&::before, &::after
|
|
width: calc(100% - 4rem)
|
|
height: calc(100% - 4rem) |