Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
125 lines (108 sloc) 2.14 KB
// responsive additional styles
@mixin responsive( $fontsize, $siteTitle ) {
body {
font-size: $fontsize;
}
p {
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
.site-branding {
a {
font-size: $siteTitle;
}
}
.content-area {
float: left;
margin: 0px 0px 0px 0px;
width: 100%;
}
.site-main {
margin: 0 0 0 0;
}
.site-content .widget-area {
clear: both;
overflow: hidden;
width: 100%;
}
.site-footer {
clear: both;
width: 100%;
}
img {
max-width: 100%;
}
/* responsive margins 0px */
body,
blockquote,
pre,
code,
.entry-content,
.entry-meta,
h1, h2,h3,h4,h5,h6,
.nav-menu,
li > ul,
li > ol,
.alignright,
.post-edit-link, .comments-link {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#menuButton {
background: #000;
color: #fff;
}
footer .site-info {
text-align: left;
}
} // end responsive mixin
/**
* PC, Laptop
**/
.content-area {
float: left;
margin: 0 -25% 0 0;
width: 100%;
}
.site-main {
margin: 0 25% 0 0;
}
.site-content .widget-area {
float: right;
overflow: hidden;
width: 25%;
}
.site-footer {
clear: both;
width: 100%;
}
// header image
#masthead {
img {
width: 100%;
height: auto;
}
}
/*! MEDIA QUERIES (mixin demo) */
@media only screen and (min-width:960px) and (max-width: 1024px) {
@include responsive( 100%, 2rem ); // sidebar to bottom);
}
@media only screen and (min-width:801px) and (max-width: 959px) {
@include responsive( 100%,2rem ); // sidebar to bottom);
}
@media only screen and (min-width:769px) and (max-width: 800px) {
@include responsive( 110%,2rem ); // sidebar to bottom);
}
@media only screen and (min-width:569px) and (max-width: 768px) {
@include responsive( 112%,1.5rem ); // sidebar to bottom);
}
@media only screen and (min-width:481px) and (max-width: 568px) {
@include responsive( 123%,2.7rem ); // sidebar to bottom);
}
@media only screen and (min-width:321px) and (max-width: 480px) {
@include responsive( 125%,2.4rem ); // sidebar to bottom);
}
@media only screen and (min-width:0px) and (max-width: 320px) {
@include responsive( 127%,2rem ); // sidebar to bottom); // sidebar to bottom
}