90 lines
1.8 KiB
Stylus
90 lines
1.8 KiB
Stylus
|
|
||
|
|
// apple product
|
||
|
|
//
|
||
|
|
// macbook air
|
||
|
|
color-macbook = white
|
||
|
|
color-macbook-darken = darken(color-macbook, 5%)
|
||
|
|
|
||
|
|
//
|
||
|
|
// browser
|
||
|
|
color-browser-light = white
|
||
|
|
color-browser-btns =
|
||
|
|
close #eb6b60
|
||
|
|
minimize #f4be4f
|
||
|
|
maximize #66c655
|
||
|
|
|
||
|
|
scrolling-wrap-height = 30rem
|
||
|
|
|
||
|
|
//
|
||
|
|
// macbook air
|
||
|
|
.macbook
|
||
|
|
position relative
|
||
|
|
.macbook-screen
|
||
|
|
position relative
|
||
|
|
background-color transparent
|
||
|
|
border-style solid
|
||
|
|
border-color color-macbook
|
||
|
|
border-radius 1rem
|
||
|
|
border-width 1.25rem
|
||
|
|
box-shadow 0 1rem 3rem rgba(black, .15), 0 0 .5rem rgba(black, .15) inset
|
||
|
|
|
||
|
|
.macbook-keyboard
|
||
|
|
display none
|
||
|
|
position relative
|
||
|
|
box-sizing content-box
|
||
|
|
background-color color-macbook
|
||
|
|
border-bottom solid .75rem color-macbook-darken
|
||
|
|
border-bottom-radius(50%)
|
||
|
|
margin -.5rem -5rem 0
|
||
|
|
height .5rem
|
||
|
|
box-shadow 0 .5rem 3rem rgba(0,0,0,.15)
|
||
|
|
&::before
|
||
|
|
content ''
|
||
|
|
position absolute
|
||
|
|
center-x()
|
||
|
|
background linear-gradient(90deg, color-macbook-darken, color-macbook, color-macbook-darken)
|
||
|
|
box-shadow 0 0 .1rem rgba(0, 0, 0, .05) inset
|
||
|
|
width 20%
|
||
|
|
height .3rem
|
||
|
|
border-radius .125rem
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
@media (min-width: 768px)
|
||
|
|
.macbook
|
||
|
|
.macbook-screen
|
||
|
|
border-width 2rem 1.25rem 1.25rem
|
||
|
|
.macbook-keyboard
|
||
|
|
display block
|
||
|
|
|
||
|
|
//
|
||
|
|
// markdown article
|
||
|
|
.macbook-wrap
|
||
|
|
padding 1rem 9rem
|
||
|
|
|
||
|
|
//
|
||
|
|
// markdown article shwo scrolling page
|
||
|
|
@keyframes scrolling-animation
|
||
|
|
0%
|
||
|
|
top 0
|
||
|
|
10%
|
||
|
|
top 0
|
||
|
|
transform translateY(0)
|
||
|
|
30%
|
||
|
|
transform translateY(-35%)
|
||
|
|
60%
|
||
|
|
transform translateY(-75%)
|
||
|
|
90%
|
||
|
|
transform translateY(-100%)
|
||
|
|
100%
|
||
|
|
transform translateY(-100%)
|
||
|
|
|
||
|
|
.scrolling-wrap
|
||
|
|
min-height scrolling-wrap-height
|
||
|
|
overflow hidden
|
||
|
|
.scrolling
|
||
|
|
position absolute
|
||
|
|
top scrolling-wrap-height
|
||
|
|
width 100%
|
||
|
|
animation scrolling-animation 10s ease-in-out 1s infinite
|