blog/themes/hugo-uno/static/scss/_media-queries.scss

208 lines
3.0 KiB
SCSS
Raw Normal View History

2016-08-22 00:12:29 -04:00
// ------------------------------
// MEDIA QUERIES
// ------------------------------
@media all and (min-width: 1300px) {
.content-wrapper {
margin-left: 530px;
}
}
// ------------------------------
// < 1100px
// ------------------------------
@media all and (max-width: 1100px) {
.panel-cover__logo {
width: 70px;
}
.panel-title {
font-size: 2em;
}
.panel-subtitle {
font-size: 1em;
}
.panel-cover__description {
margin: 0 10px;
font-size: .9em;
}
.navigation--social {
margin-top: 5px;
margin-left: 0;
}
}
// ------------------------------
// < 960px
// ------------------------------
@media all and (max-width: 960px) {
.btn-mobile-menu {
display: block;
}
.panel-main {
display: table;
position: relative;
}
.panel-cover--collapsed {
width: 100%;
max-width: none;
}
.panel-main__inner {
display: table-cell;
padding: 60px 10%;
}
.panel-cover__description {
display: block;
max-width: 600px;
margin: 0 auto;
}
.panel-cover__divider--secondary {
display: none;
}
.panel-cover {
width: 100%;
height: 100%;
background-position: center center;
&.panel-cover--collapsed {
display: block;
position: relative;
height: auto;
padding: 0;
background-position: center center;
.panel-main__inner {
display: block;
padding: 70px 0 30px 0;
}
.panel-cover__logo {
width: 60px;
border-width: 2px;
}
.panel-cover__description {
display: none;
}
.panel-cover__divider {
display: none;
margin: 1em auto;
}
}
}
.navigation-wrapper {
display: none;
position: fixed;
top: 42px;
right: 0;
left: 0;
width: 100%;
padding: 20px 0;
background: rgba($gray-darkest,.98);
border-bottom: 1px solid rgba(255,255,255,.15);
&.visible {
display: block;
}
}
.cover-navigation {
display: block;
position: relative;
float: left;
clear: left;
width: 100%;
.navigation {
display: block;
width: 100%;
li {
width: 80%;
margin-bottom: .4em;
}
}
&.navigation--social {
padding-top: 5px;
.navigation {
li {
display: inline-block;
width: 25.8%;
}
}
}
}
.content-wrapper {
width: 80%;
max-width: none;
margin: 0 auto;
}
.content-wrapper__inner {
margin-right: 0;
margin-left: 0;
}
.navigation__item {
width: 100%;
margin: 0 0 .4em 0;
}
}
// ------------------------------
// < 340px
// ------------------------------
@media all and (max-width: 340px) {
.panel-main__inner {
padding: 0 5%;
}
.panel-title {
margin-bottom: .1em;
font-size: 1.5em;
}
.panel-subtitle {
font-size: .9em;
}
.btn {
display: block;
margin-bottom: .4em;
}
}