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

234 lines
3.6 KiB
CSS

/* screenwidth less than 1000px
------------------------------------*/
@media only screen and (max-width: 1150px) {
body {
font-size: 85%;
}
/* sidebar */
#sidebar {
display: none;
}
#flex .columns {
width: 50%;
}
}
/* mobile wide/smaller tablets
------------------------------------*/
@media only screen and (max-width: 830px) {
a {
font-size: 85%;
}
strong {
font-size: 85%;
}
.narrow {
max-width: 90%;
margin: 0 auto
}
/* breadcrumbs display improvments */
#breadcrumbs {
height: 1rem;
line-height: 1.2rem;
padding-left: 1rem;
height: auto;
}
#breadcrumbs span {
display: inline-block;
padding: 0 0.2rem;
}
#breadcrumbs i {
width: 10px;
}
/* Simple search plugin
------------------------------------*/
.simplesearch {
width: 90%;
margin: 0 auto;
padding: 20px;
}
.search-item {
margin-left: 10px;
margin-bottom: 10px;
}
.search-image {
}
.search-image img {
display: none;
}
.search-wrapper .search-input {
width: 100%;
}
.search-title h3 {
color: white;
background-color: #1F5C60;
border-radius: 5px;
padding: 0.7% 2%;
}
/* 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;
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 20px 20px;
background: #50162D;
margin: -15px 30px 0px 30px;
clear: both;
}
/* Howto: Services */
#flex {
width: 100vw;
left: auto;
}
#flex .columns {
height: auto;
}
#flex .three {
padding-right: 60px;
margin-bottom: 20px;
}
.three {
min-height: auto;
}
.language-selector {
position: fixed;
top: -10px;
right: 80px;
width: 50px;
}
.language-selector .btn {
top: 35px;
font-size: 1.2rem;
padding: 19px 12px;
}
.language-selector ul#langSelectorList {
position: absolute;
top: 50px;
right: 0;
}
.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;
}
}
/* mobile narrow
------------------------------------*/
@media only screen and (max-width: 600px) {
}