hexo-theme-ayer/source/css/_partial/ayer.styl

85 lines
1.3 KiB
Stylus
Raw Normal View History

2019-12-03 11:37:44 +00:00
@keyframes down
0%
margin-bottom 0
opacity 1
100%
margin-bottom -15px
opacity .1
//
.cover-frame
position relative
min-width 100%
height 100vh
.bg-box
width 100%
height 100%
&>img
display block
width 100vw
height 100vh
object-fit cover
object-position center center
.cover-inner
position absolute
top 50%
left 50%
transform translate(-50%, -100%)
h1
2019-12-15 06:30:16 +00:00
font-size 7rem
2019-12-03 11:37:44 +00:00
margin 0
2019-12-05 14:17:35 +00:00
opacity .95
2019-12-03 11:37:44 +00:00
h2
font-size 3rem
margin .5rem 0 1.5rem
a, &
color white
text-decoration none
video, img
position relative
.cover-logo
width cover-logo-size
.cover-learn-more
position absolute
z-index 1
bottom 10px
left 0
width 100%
a > i
font-size 3rem
color white
animation down 1s linear infinite
&:hover
color sea
.to_top
position fixed
bottom 10rem
right 50px
z-index 9
text-align center
2019-12-05 14:17:35 +00:00
transform scale(1.2)
2019-12-03 11:37:44 +00:00
2019-12-16 15:48:13 +00:00
#mask
position fixed
left 0
top 0
width 100%
height 100%
background-color rgba(0,0,0,.8)
z-index 9998
display none
2019-12-03 11:37:44 +00:00
// Media Query
@media (max-width: 768px)
.cover-inner
2019-12-05 14:17:35 +00:00
transform translate(-50%, -70%);
width 100%
2019-12-03 11:37:44 +00:00
h1
2019-12-15 06:30:16 +00:00
font-size 4.5rem
2019-12-03 11:37:44 +00:00
h2
2019-12-15 06:30:16 +00:00
font-size 2rem
2019-12-03 11:37:44 +00:00
.to_top
right 10px