This repository has been archived on 2024-04-08. You can view files and clone it, but cannot push or open issues or pull requests.
mystic/themes/hueman/source/css/_responsive.styl
2018-09-03 17:41:16 +10:00

203 lines
6.7 KiB
Stylus

/* ------------------------------------------------------------------------- *
* Style Fix : > 960px
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 960px)
.nav-container-inner
display: block !important
/* ------------------------------------------------------------------------- *
* 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