242 lines
5.6 KiB
Stylus
242 lines
5.6 KiB
Stylus
#dash-index-content
|
|
width 100%
|
|
height 100%
|
|
margin 0 auto
|
|
|
|
#dash-index
|
|
width 100%
|
|
height 100%
|
|
z-index 10
|
|
position relative
|
|
|
|
#dash-index-wrapper
|
|
width 100%
|
|
height 100%
|
|
margin 0 auto
|
|
|
|
.dash-init
|
|
width 100%
|
|
max-width 900px
|
|
margin 0 auto
|
|
color $secondary
|
|
label
|
|
color $primary
|
|
|
|
form
|
|
background $white
|
|
padding 10px
|
|
input[type=email], input[type=password], input[type=text]
|
|
margin-bottom 15px
|
|
button
|
|
height 30px
|
|
width 100px
|
|
|
|
#dash-login
|
|
width 100%
|
|
max-width 900px
|
|
margin 0 auto
|
|
|
|
#dash-form
|
|
width 300px
|
|
padding 0.75em
|
|
background $primary
|
|
border-radius 3px
|
|
|
|
input
|
|
width 290px
|
|
margin 0 0 10px 0
|
|
height 30px
|
|
|
|
button
|
|
width 300px
|
|
|
|
#dash-menu
|
|
padding 10px
|
|
width 90%
|
|
max-width 900px
|
|
margin 50px auto
|
|
|
|
a
|
|
display inline-block
|
|
vertical-align top
|
|
background $primary - 60%
|
|
width 30%
|
|
padding 5px
|
|
border-radius 3px
|
|
color $white
|
|
margin 0 10px 10px 0
|
|
|
|
&:hover
|
|
background $primary - 50%
|
|
|
|
svg
|
|
display inline-block
|
|
vertical-align top
|
|
fill $white
|
|
|
|
label
|
|
display inline-block
|
|
margin-top 5px
|
|
width 85%
|
|
text-align center
|
|
cursor pointer
|
|
|
|
#dash-recent
|
|
width 100%
|
|
max-width 900px
|
|
height 100%
|
|
padding 5px 0 0 0
|
|
margin 0 auto
|
|
|
|
#recent-list
|
|
padding 0.75em
|
|
position relative
|
|
|
|
.recent-header
|
|
height 50px
|
|
|
|
h3
|
|
vertical-align top
|
|
display inline-block
|
|
width 50%
|
|
|
|
.index-menu
|
|
width 50%
|
|
text-align right
|
|
vertical-align top
|
|
display inline-block
|
|
margin 24px 0 24px 0
|
|
right 10px
|
|
color $white
|
|
|
|
a
|
|
text-decoration-color $highlight
|
|
|
|
a.post-link
|
|
font-size 1.5em
|
|
font-weight 300
|
|
display inline-block
|
|
border-radius 3px
|
|
vertical-align top
|
|
text-decoration none
|
|
position relative
|
|
|
|
label
|
|
font-size 1.4em
|
|
font-weight 700
|
|
color $white
|
|
padding 5px
|
|
vertical-align top
|
|
display inline-block
|
|
word-wrap break-word
|
|
width 100%
|
|
text-align center
|
|
text-drop-shadow($black, 1, 2px, 2px, 0)
|
|
|
|
span
|
|
vertical-align top
|
|
margin 0 auto
|
|
width 300px
|
|
display block
|
|
font-family $monoType
|
|
font-size 0.5em
|
|
padding 7px
|
|
color $white
|
|
text-align: center
|
|
//background $primary - 60%
|
|
border-radius 0 0 3px 3px
|
|
|
|
div
|
|
width 100%
|
|
position absolute
|
|
bottom 0
|
|
border-radius 0 0 3px 3px
|
|
//background-opacity($black, .35)
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
|
|
|
|
#options
|
|
display block
|
|
vertical-align: top
|
|
width 300px
|
|
position relative
|
|
text-align: center
|
|
margin 0 auto
|
|
background none
|
|
.item-options
|
|
border-radius 3px
|
|
margin 5px
|
|
display inline-block
|
|
.item-options[data-active='false']
|
|
width 65px
|
|
background $primary - 60%
|
|
color $white
|
|
|
|
.item-options[data-active='true']
|
|
width 70px
|
|
background $tertiary + 50%
|
|
color $primary - 60%
|
|
|
|
a:nth-child(3)
|
|
width 100%
|
|
margin-bottom 20px
|
|
height 500px
|
|
|
|
a:nth-child(4)
|
|
width 49%
|
|
height 275px
|
|
margin 0 15px 15px 0
|
|
|
|
a:nth-child(5)
|
|
width 49%
|
|
height 550px
|
|
|
|
a:nth-child(6)
|
|
width 49%
|
|
height 550px
|
|
margin -260px 15px 0 0
|
|
|
|
a:nth-child(7)
|
|
width 49%
|
|
height 275px
|
|
margin 15px 0 0 0
|
|
|
|
/**
|
|
-------------------------------
|
|
-- Responsive
|
|
-------------------------------
|
|
* */
|
|
@media only screen and (max-width: 768px)
|
|
#dash-index-content
|
|
#dash-index
|
|
#dash-index-wrapper
|
|
#dash-recent
|
|
#recent-list
|
|
a:nth-child(4), a:nth-child(6)
|
|
width 48.9%
|
|
|
|
@media only screen and (max-width: 640px)
|
|
#dash-index-content
|
|
#dash-index
|
|
#dash-index-wrapper
|
|
#dash-recent
|
|
#recent-list
|
|
a:nth-child(4), a:nth-child(6)
|
|
width 48.5%
|
|
|
|
@media only screen and (max-width: 480px)
|
|
#dash-index-content
|
|
#dash-index
|
|
#dash-index-wrapper
|
|
#dash-recent
|
|
#recent-list
|
|
.recent-header
|
|
h3
|
|
width 40%
|
|
|
|
.index-menu
|
|
width 60%
|
|
|
|
a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7)
|
|
width 100%
|
|
margin 15px 0 0 0
|
|
height 400px
|