hexo-theme-ayer/source/css/_partial/ayer.styl
2020-01-07 20:13:38 +08:00

91 lines
1.4 KiB
Stylus

@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
font-size 7rem
margin 0
opacity .95
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
transform scale(1.2)
#mask
position fixed
left 0
top 0
width 100%
height 100%
background-color rgba(0,0,0,.8)
z-index 9998
display none
.word_count
margin-top 5px
color darken(gray,30%)
padding-bottom 1rem
border-bottom 1px solid darken(froth-light,2%)
// Media Query
@media (max-width: 768px)
.cover-inner
transform translate(-50%, -70%);
width 100%
h1
font-size 4.5rem
h2
font-size 2rem
.to_top
right 10px