Files
wordpress-preseed/wp-content/themes/Pirate-Rogue/css/sass/_mediaqueries.scss
2019-08-31 00:48:20 +02:00

241 lines
4.6 KiB
SCSS

/*-----------------------------------------------------------------------------------*/
/* Media Queries
/*-----------------------------------------------------------------------------------*/
/* Minimum width of 1024 pixels (tablet landscape)
------------------------------------------------------------------------------------ */
@media screen and (min-width: $breakpoint-1024) {
p.text-big {
font-size: 32px;
font-size: 2rem;
}
.front-about-img {
width: 32.8%;
padding-right: 1.6%;
}
}
/* Minimum width of 1060 pixels (small desktop screens)
------------------------------------------------------------------------------------ */
@media screen and (min-width: $breakpoint-1060) {
/* --- General --- */
.headerimg-on.header-boxed #masthead {
border-bottom: 1px solid #ddd !important;
}
.front-section:first-of-type {
padding-top: 0;
}
.content-wrap {
margin-top: 0;
}
/* --- Image Fade In --- */
.js .imgfade-on .fadein {
opacity: 0;
transition: opacity 0.7s ease-in-out;
-webkit-transition: opacity 0.7s ease-in-out;
-webkit-transform: translateZ(0);
&.inview {
opacity: 1;
}
}
.singlepost-wrap,
.recommended-posts-wrap,
.front-section,
.headerimg-on.header-boxed .header-image {
padding-left: 0;
padding-right: 0;
}
.blog-wrap,
.front-section,
.singlepost-wrap,
.recommended-posts-wrap,
.footer-wrap,
.big-footer-feature,
.headerimg-on.header-boxed .header-image {
margin-left: 6.25%;
margin-right: 6.25%;
}
#front-section-four {
margin-left: auto;
margin-right: auto;
}
.page .site-content,
#primary {
width: 65.87301587301587%;
// 830px at 1440px
float: left;
}
#secondary,
#sidebar-page {
width: 31.74603174603175%;
/* -- 400px at 1440px ---*/
float: right;
padding-top: 0;
}
/* --- Left and no Sidebar Options --- */
.sidebar-left #primary,
.single-post.sidebar-left .contentwrap {
float: right;
}
.sidebar-left {
#secondary, #sidebar-page {
float: left;
padding-top: 0;
}
}
.no-sidebar.page .site-content,
.no-sidebar #primary {
width: 90%;
max-width: 1260px;
float: none;
margin-left: auto;
margin-right: auto;
}
.page-fullwidth .site-content,
.page-fullwidth #primary {
width: 100% !important;
max-width: none;
float: none;
margin-left: auto;
margin-right: auto;
}
/* --- Font Sizes --- */
p.site-title {
font-size: 60px;
font-size: 3.75rem;
line-height: 1.35;
text-align: center;
padding-right: 0;
}
p.text-big {
font-size: 48px;
font-size: 3rem;
}
.section-one-column-one {
.entry-author, .entry-date:before {
display: inline-block;
}
}
.headerimg-on.header-boxed .header-image {
margin-top: 30px;
}
/* --- Front Section One --- */
.page-template-shop-front {
.entry-text-wrap {
width: 48.80952380952381%;
/* -- 615px at 1440px ---*/
float: left;
clear: left;
}
.section-three-column-one {
.entry-header,
.entry-summary,
.entry-meta {
width: 100%;
}
}
}
}
/* Minimum width of 1360 pixels (larger desktop screens)
------------------------------------------------------------------------------------ */
@media screen and (min-width: 85em) {
.blog-wrap,
.front-section,
// .singlepost-wrap,
// .recommended-posts-wrap,
// .footer-wrap,
// .big-footer-feature,
.headerimg-on.header-boxed .header-image {
margin-left: auto;
margin-right:auto;
width: 80%;
}
/* --- Typography --- */
.entry-content p {
&.pull-left, &.pull-right {
margin-bottom: 20px;
}
}
/* --- No Sidebar --- */
.no-sidebar.page .site-content,
.no-sidebar #primary {
width: 80%;
}
.headerimg-on.header-fullscreen a.header-image {
max-height: 900px !important;
overflow: hidden;
}
}
/* Minimum width of 1800 pixels (larger desktop screens)
------------------------------------------------------------------------------------ */
@media screen and (min-width: 112.5em) {
/* --- General --- */
#page-start,
.content-wrap,
.singlepost-wrap,
.blog-wrap {
min-width: 1560px;
margin-left: auto;
margin-right: auto;
}
.footer-wrap,
.blog-wrap,
.big-footer-feature,
.headerimg-on.header-boxed .header-image {
width: 70%;
margin-left: auto;
margin-right: auto;
}
}
/* Minimum width of 2200 pixels (larger desktop screens)
------------------------------------------------------------------------------------ */
@media screen and (min-width: 137.5em) {
/* --- General --- */
.footer-wrap,
.big-footer-feature,
.headerimg-on.header-boxed .header-image {
width: 56%;
}
}