Howto/themes/grav-theme-howto/css/media-queries.css

151 lines
2.4 KiB
CSS

@media (min-width:1201px) {
}
@media (max-width: 1200px) and (min-width:901px) {
}
@media (max-width: 1040px) {
body {
font-size: 85%;
}
/* sidebar */
#sidebar {
display: none;
}
}
@media only screen and (max-width: 767px) {
.narrow{
max-width: 100%;
margin: 0 auto
}
/* mobile navigation
------------------------------------*/
#main-nav {
font: 12px 'opensans-bold', sans-serif;
background: transparent !important;
letter-spacing: 1.5px;
width: auto;
position: fixed;
top: 0;
right: 0;
}
.main-nav .has-children > a:after {
/*content: '\f107';*/
content: '';
}
.main-nav .has-children .has-children > a:after {
content: '';
}
#main-nav > a {
width: 48px;
height: 48px;
text-align: left;
background: #50162D;
position: relative;
border: none;
float: right;
text-shadow: none;
color: transparent;
position: relative;
top: 0px;
right: 30px;
}
#main-nav > a:before,
#main-nav > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#main-nav > a:after { top: 60%; }
/* toggle buttons */
#main-nav:not( :target ) > a:first-of-type,
#main-nav:target > a:last-of-type {
display: block;
}
/* hide menu panel */
#main-nav ul {
height: auto;
display: none;
clear: both;
width: auto;
float: right;
position: relative;
top: 12px;
right: 0;
}
.main-nav ul li {
display: block;
letter-spacing: normal;
}
/* display menu panels */
#main-nav:target > ul#nav {
display: block;
padding: 30px 20px 48px 20px;
background: #50162D;
margin: 0 30px;
clear: both;
}
}
@media (max-width: 900px) and (min-width:601px) {
/* Language menu*/
.language-selector {
position: fixed;
top: -10px;
right: 30px;
}
.language-selector .btn {
top: 35px;
font-size: 1.2rem;
padding: 19px 15px;
}
.language-selector .btn i {
top: 40px;
right: 20px;
}
.language-selector .dropdown-menu {
right: 150px;
top: 200px;
color: #b9a2ab;
background-color: #50162D;
border-color: #50162D;
font-size: 1.1rem;
}
.language-selector .dropdown-menu>li>a {
padding: 12px 15px;
}
}
@media (max-width: 600px) {
}
@media (max-width: 400px) {
}