hello-theme/dev/scss/theme/_layout.scss

115 lines
1.5 KiB
SCSS

/**
* Responsive layouts
*/
@use "../reset/variables" as variables;
$containers: '.site-header .header-inner,.site-header:not(.dynamic-header), .site-footer .footer-inner, .site-footer:not(.dynamic-footer),body:not([class*="elementor-page-"]) .site-main, .page-header .entry-title';
#{$containers} {
margin-inline-start: auto;
margin-inline-end: auto;
width: 100%;
}
@media (max-width: variables.$screen-xs - variables.$screen-diff){
#{$containers} {
padding-inline-start: 10px;
padding-inline-end: 10px;
}
}
@media (min-width: variables.$screen-xs){
#{$containers} {
max-width: 500px;
}
.site-header {
&.header-full-width {
.header-inner {
max-width: 100%;
}
}
}
.site-footer {
&.footer-full-width {
.footer-inner {
max-width: 100%;
}
}
}
}
@media (min-width: variables.$screen-sm){
#{$containers} {
max-width: 600px;
}
.site-header {
&.header-full-width {
max-width: 100%;
}
}
.site-footer {
&.footer-full-width {
max-width: 100%;
}
}
}
@media (min-width: variables.$screen-md) {
#{$containers} {
max-width: 800px;
}
.site-header {
&.header-full-width {
max-width: 100%;
}
}
.site-footer {
&.footer-full-width {
max-width: 100%;
}
}
}
@media (min-width: variables.$screen-xl) {
#{$containers} {
max-width: 1140px;
}
.site-header {
&.header-full-width {
max-width: 100%;
}
}
.site-footer {
&.footer-full-width {
max-width: 100%;
}
}
}
.site-header + .elementor {
min-height: calc( 100vh - 320px );
}