asteroid/css/modules/_about.sass

189 lines
3.2 KiB
Sass

.about
position: relative
display: flex
width: 900px
max-width: 75%
height: 100%
flex-direction: column
justify-content: center
margin: 0 auto
@media (max-width: 1180px)
max-width: 100%
&--banner
position: relative
height: 475px
&::before
content: ""
position: absolute
top: 20px
left: 200px
transform: rotate(-25deg)
border: 5px solid $highlight
border-right-color: transparent
border-bottom-color: transparent
&::after
content: ""
position: absolute
top: 75px
left: 400px
transform: rotate(45deg)
width: 10px
height: 10px
background-color: $highlight
h2
position: relative
margin-top: 35px
font-size: 68px
font-weight: 900
line-height: 1
z-index: 1
&::before
content: ""
position: absolute
top: 60px
left: 268px
width: 30px
height: 30px
background-color: $highlight
border-radius: 50%
&::after
content: ""
position: absolute
top: 255px
left: 255px
width: 10px
height: 10px
background-color: $highlight
a
padding: 5px 17px 5px 0
text-decoration: none
color: $white
font-weight: 700
text-transform: uppercase
background-color: transparent
&:hover
svg
left: 10px
svg
position: relative
left: 5px
width: 15px
fill: $white
transition: left .2s ease-in-out
img
position: absolute
bottom: -90px
right: -12px
&--options
display: flex
max-width: 600px
justify-content: space-between
margin: 0
padding: 0
list-style: none
& > a
position: relative
width: 150px
height: 75px
text-decoration: none
color: $white
border: 10px solid $highlight
background:
position: center
size: cover
repeat: no-repeat
&:nth-child(1)
background-image: url("../img/about-winners.jpg")
&:nth-child(2)
background-image: url("../img/about-philosophy.jpg")
&:nth-child(3)
background-image: url("../img/about-history.jpg")
&:hover
h3
bottom: -50px
h3
position: absolute
bottom: -38px
left: 10px
font-size: 16px
text-transform: uppercase
transition: bottom .2s ease-in-out, left .2s ease-in-out
@media (max-width: 767px)
.about
&--banner
height: 305px
&::before
top: 0
left: 125px
&::after
top: 35px
left: 260px
h2
margin-top: 10px
font-size: 44px
&::before
top: 28px
left: 168px
&::after
top: 163px
left: 163px
img
width: 315px
@media (max-width: 600px)
.about
&--banner
height: auto
&::before
left: 155px
&::after
left: 310px
h2
margin-top: 0
font-size: 55px
&::before
top: 43px
left: 214px
&::after
top: 205px
left: 205px
img
display: none
&--options
display: none