95 lines
1.7 KiB
Stylus
95 lines
1.7 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-family: Titillium Web,PingFang SC,Hiragino Sans GB,"Microsoft JhengHei","Microsoft YaHei",Helvetica Neue,Helvetica,Arial,sans-serif
|
|
font-size 7rem
|
|
margin 0
|
|
opacity .95
|
|
#subtitle-box
|
|
font-family: Titillium Web,PingFang SC,Hiragino Sans GB,"Microsoft JhengHei","Microsoft YaHei",Helvetica Neue,Helvetica,Arial,sans-serif
|
|
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
|
|
|
|
.float_btns
|
|
position sticky
|
|
bottom 10rem
|
|
right 50px
|
|
z-index 9996
|
|
text-align center
|
|
transform scale(1.2)
|
|
width: 50px
|
|
float: right
|
|
|
|
#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
|
|
#subtitle-box
|
|
font-size 2rem
|
|
|
|
.float_btns
|
|
right 10px |