275 lines
9.2 KiB
Stylus
275 lines
9.2 KiB
Stylus
/* ------------------------------------------------------------------------- *
|
|
* Style Fix : > 960px
|
|
/* ------------------------------------------------------------------------- */
|
|
@media only screen and (min-width: 960px)
|
|
#header
|
|
padding-bottom: sidebar-toggle-width
|
|
.nav-container-inner
|
|
display: block !important
|
|
|
|
.main-body
|
|
margin-top: - sidebar-toggle-width
|
|
|
|
.main-body-inner
|
|
if sidebar is right
|
|
padding-right: sidebar-toggle-width
|
|
background-position: -340px 0 !important
|
|
else
|
|
padding-left: sidebar-toggle-width
|
|
background-position: -290px 0 !important
|
|
#sidebar
|
|
clearfix()
|
|
if sidebar is right
|
|
right: 0
|
|
background: url(images/s-left.png) repeat-y right 0
|
|
else
|
|
left: 0
|
|
background: url(images/s-left.png) repeat-y left 0
|
|
margin: 0
|
|
height: 100%
|
|
position: absolute
|
|
overflow: hidden
|
|
width: sidebar-toggle-width
|
|
transition: width 0.2s ease-in 0.2s
|
|
.sidebar-toggle
|
|
display: block
|
|
padding: 6px
|
|
color: rgba(255,255,255,0.7)
|
|
text-align: center
|
|
height: sidebar-toggle-width
|
|
background: color-theme
|
|
box-sizing: border-box
|
|
.toggle
|
|
line-height: 38px
|
|
font-size: 38px
|
|
width: 38px
|
|
font-family: fontawesome
|
|
&:before
|
|
if sidebar is right
|
|
content: '\f100'
|
|
else
|
|
content: '\f101'
|
|
.sidebar-top
|
|
padding: 10px 30px
|
|
background: none
|
|
border-bottom: 1px solid color-border
|
|
p, a, i
|
|
color: #666
|
|
#article-nav, .widgets-container, .sidebar-top
|
|
opacity: 0
|
|
transition: opacity 0.2s ease-in
|
|
&.expend
|
|
width: sidebar-width
|
|
overflow-y: auto
|
|
z-index: 2
|
|
transition: width 0.2s ease-in
|
|
.toggle
|
|
&:before
|
|
content: '\f100'
|
|
#article-nav, .widgets-container, .sidebar-top
|
|
opacity: 1
|
|
transition: opacity 0.2s ease-in 0.2s
|
|
.sidebar-top
|
|
display: block
|
|
.social-links
|
|
.social-tooltip
|
|
&:after,
|
|
&:before
|
|
display: none
|
|
|
|
/* ------------------------------------------------------------------------- *
|
|
* Toggle Sidebar s1 : 959px > 480px
|
|
/* ------------------------------------------------------------------------- */
|
|
@media only screen and (min-width: 480px) and (max-width: 959px)
|
|
#header
|
|
padding-bottom: sidebar-toggle-width
|
|
.nav-container-inner
|
|
display: block !important
|
|
#main-nav
|
|
.main-nav-more > ul
|
|
.main-nav-list-child
|
|
position: relative
|
|
padding: 0px
|
|
.search-form-input
|
|
&:focus
|
|
width: 100px
|
|
.main-body
|
|
margin-top: - sidebar-toggle-width
|
|
.main-body-inner
|
|
if sidebar is right
|
|
padding-right: sidebar-toggle-width
|
|
background-position: -340px 0 !important
|
|
else
|
|
padding-left: sidebar-toggle-width
|
|
background-position: -290px 0 !important
|
|
#sidebar
|
|
clearfix()
|
|
if sidebar is right
|
|
right: 0
|
|
background: url(images/s-left.png) repeat-y right 0
|
|
else
|
|
left: 0
|
|
background: url(images/s-left.png) repeat-y left 0
|
|
margin: 0
|
|
height: 100%
|
|
position: absolute
|
|
overflow: hidden
|
|
width: sidebar-toggle-width
|
|
transition: width 0.2s ease-in 0.2s
|
|
.sidebar-toggle
|
|
display: block
|
|
padding: 6px
|
|
color: rgba(255,255,255,0.7)
|
|
text-align: center
|
|
height: sidebar-toggle-width
|
|
background: color-theme
|
|
box-sizing: border-box
|
|
.toggle
|
|
line-height: 38px
|
|
font-size: 38px
|
|
width: 38px
|
|
font-family: fontawesome
|
|
&:before
|
|
if sidebar is right
|
|
content: '\f100'
|
|
else
|
|
content: '\f101'
|
|
.sidebar-top
|
|
padding: 10px 30px
|
|
background: none
|
|
border-bottom: 1px solid color-border
|
|
p, a, i
|
|
color: #666
|
|
#article-nav, .widgets-container, .sidebar-top
|
|
opacity: 0
|
|
transition: opacity 0.2s ease-in
|
|
&.expend
|
|
width: sidebar-width
|
|
overflow-y: auto
|
|
z-index: 2
|
|
transition: width 0.2s ease-in
|
|
.toggle
|
|
&:before
|
|
content: '\f100'
|
|
#article-nav, .widgets-container, .sidebar-top
|
|
opacity: 1
|
|
transition: opacity 0.2s ease-in 0.2s
|
|
.sidebar-top
|
|
display: block
|
|
.social-links
|
|
.social-tooltip
|
|
&:after,
|
|
&:before
|
|
display: none
|
|
|
|
#main
|
|
.main-body-header,
|
|
.archive-year-wrap
|
|
padding: 12px 30px
|
|
|
|
/* ------------------------------------------------------------------------- *
|
|
* Mobile (Low Res) : 479px > 0 (320px)
|
|
/* ------------------------------------------------------------------------- */
|
|
@media only screen and (max-width: 479px)
|
|
.container
|
|
padding: 0px
|
|
#header
|
|
.logo-wrap
|
|
width: 100%
|
|
display: block
|
|
text-align: center
|
|
.logo
|
|
margin: 0 auto
|
|
.subtitle-wrap
|
|
display: block
|
|
width: 100%
|
|
margin-left: 0px
|
|
.nav-container
|
|
padding: 0px
|
|
#main-nav-toggle
|
|
float: none
|
|
display: block
|
|
.nav-container-inner
|
|
display: none
|
|
#main-nav
|
|
display: block
|
|
float: none
|
|
.main-nav-list-item,
|
|
.main-nav-list-link
|
|
clearfix()
|
|
display: block
|
|
float: none
|
|
box-shadow: none
|
|
box-sizing: border-box
|
|
font-size: font-size
|
|
.main-nav-list-item
|
|
&.top-level-menu
|
|
& > a
|
|
position: relative
|
|
&:after
|
|
display: none
|
|
&:hover > a
|
|
background: none
|
|
color: color-nav-foreground
|
|
& > a:hover
|
|
color: #fff
|
|
background: color-nav-hover-background
|
|
.main-nav-list-child
|
|
display: block !important
|
|
position: relative
|
|
width: 100%
|
|
padding: 0px
|
|
background: none
|
|
.main-nav-list-link
|
|
padding-left: 30px
|
|
a
|
|
border-bottom: 1px solid rgba(255,255,255,0.06)
|
|
#sub-nav
|
|
float: none
|
|
.search-form
|
|
&:before
|
|
font-size: font-size
|
|
.search-form-input
|
|
font-size: font-size
|
|
width: 90%
|
|
.main-body-inner
|
|
padding: 0px
|
|
background: none
|
|
#main
|
|
float: none
|
|
.main-body-header,
|
|
.archive-year-wrap
|
|
padding: 13px 15px 12px;
|
|
.main-body-content
|
|
.article-single,
|
|
#comments
|
|
padding: 15px
|
|
#page-nav
|
|
padding-right: 15px
|
|
box-sizing: border-box
|
|
.article-row
|
|
padding: 0 0 0 15px
|
|
border: none
|
|
.article-summary
|
|
width: 100%
|
|
.article-summary-inner
|
|
margin: 15px 15px 15px 0
|
|
#sidebar
|
|
float: none
|
|
margin: 0px
|
|
width: 100%
|
|
background: color-sidebar-background
|
|
.sidebar-top,
|
|
.widget-wrap
|
|
padding: 15px
|
|
.widgets-container
|
|
padding-bottom: 15px
|
|
#footer
|
|
margin-top: 0px
|
|
#back-to-top
|
|
box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.05);
|
|
.logo
|
|
margin: 0 auto
|
|
.credit
|
|
text-align: center
|