xarxaprod
/
oficinasuport-wp-theme
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

styled site as grid with columns padding properly and header max 80rem in big screens

This commit is contained in:
jorge-vitrubio 2022-12-30 01:20:14 +01:00
parent b9552e5265
commit 00b2e66250
3 changed files with 55 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
sass/layouts/_no-sidebar.scss
View File

@ -10,16 +10,18 @@
"footer"; "footer";
margin: auto; margin: auto;
padding: 0; padding: 0;
header { > header {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
main { > main {
grid-column: 2 / 4; grid-column: 2 / 4;
padding: 0 1rem;
} }
aside { > aside {
grid-column: 2 / 4; grid-column: 2 / 4;
padding: 0 1rem;
} }
footer { > footer {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
} }
@ -28,7 +30,7 @@
z-index: 900; z-index: 900;
top: 0; top: 0;
margin-bottom: 2rem; margin-bottom: 2rem;
background-color: hsla(0, 0%, 100%, 1); background-color: $color__white;
i-moz-box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.01); i-moz-box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.01);
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.01); -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.01);
box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.0); box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.0);
@ -59,13 +61,23 @@
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
.no-sidebar { .no-sidebar {
.site { .site {
> header {
}
> main {
padding: 0 2rem;
}
> aside {
padding: 0 2rem;
}
> footer {
}
} }
.site-header { .site-header {
.main { .main {
flex-flow: column; flex-flow: column;
border-bottom: 1px solid $color__grey-lighter;
} }
.secondary { .secondary {
border-top: 1px solid $color__grey-lighter;
} }
} }
&.single { &.single {
@ -86,9 +98,21 @@
@media screen and (min-width: 80em) { @media screen and (min-width: 80em) {
.no-sidebar { .no-sidebar {
.site { .site {
> header {
}
> main {
padding: 0;
}
> aside {
padding: 0;
}
> footer {
}
} }
.site-header { .site-header {
.main { .main {
width: 80em;
margin: auto;
flex-flow: row; flex-flow: row;
} }
.secondary { .secondary {

30
style.css
View File

@ -815,16 +815,18 @@ textarea {
margin: auto; margin: auto;
padding: 0; padding: 0;
} }
.no-sidebar .site header { .no-sidebar .site > header {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.no-sidebar .site main { .no-sidebar .site > main {
grid-column: 2 / 4; grid-column: 2 / 4;
padding: 0 1rem;
} }
.no-sidebar .site aside { .no-sidebar .site > aside {
grid-column: 2 / 4; grid-column: 2 / 4;
padding: 0 1rem;
} }
.no-sidebar .site footer { .no-sidebar .site > footer {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.no-sidebar .site-header { .no-sidebar .site-header {
@ -832,7 +834,7 @@ textarea {
z-index: 900; z-index: 900;
top: 0; top: 0;
margin-bottom: 2rem; margin-bottom: 2rem;
background-color: white; background-color: #fff;
i-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.01); i-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.01);
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.01); -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.01);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0);
@ -859,9 +861,17 @@ textarea {
} }
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
.no-sidebar .site > main {
padding: 0 2rem;
}
.no-sidebar .site > aside {
padding: 0 2rem;
}
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
flex-flow: column; flex-flow: column;
border-bottom: 1px solid #eee; }
.no-sidebar .site-header .secondary {
border-top: 1px solid #eee;
} }
.no-sidebar.single .site-main { .no-sidebar.single .site-main {
width: 45rem; width: 45rem;
@ -876,7 +886,15 @@ textarea {
} }
@media screen and (min-width: 80em) { @media screen and (min-width: 80em) {
.no-sidebar .site > main {
padding: 0;
}
.no-sidebar .site > aside {
padding: 0;
}
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
width: 80em;
margin: auto;
flex-flow: row; flex-flow: row;
} }
} }

2
style.css.map
View File

File diff suppressed because one or more lines are too long