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";
margin: auto;
padding: 0;
header {
> header {
grid-column: 1 / -1;
}
main {
> main {
grid-column: 2 / 4;
padding: 0 1rem;
}
aside {
> aside {
grid-column: 2 / 4;
padding: 0 1rem;
}
footer {
> footer {
grid-column: 1 / -1;
}
}
@ -28,7 +30,7 @@
z-index: 900;
top: 0;
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);
-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);
@ -59,13 +61,23 @@
@media screen and (min-width: 48em) {
.no-sidebar {
.site {
> header {
}
> main {
padding: 0 2rem;
}
> aside {
padding: 0 2rem;
}
> footer {
}
}
.site-header {
.main {
flex-flow: column;
border-bottom: 1px solid $color__grey-lighter;
}
.secondary {
border-top: 1px solid $color__grey-lighter;
}
}
&.single {
@ -86,9 +98,21 @@
@media screen and (min-width: 80em) {
.no-sidebar {
.site {
> header {
}
> main {
padding: 0;
}
> aside {
padding: 0;
}
> footer {
}
}
.site-header {
.main {
width: 80em;
margin: auto;
flex-flow: row;
}
.secondary {

30
style.css
View File

@ -815,16 +815,18 @@ textarea {
margin: auto;
padding: 0;
}
.no-sidebar .site header {
.no-sidebar .site > header {
grid-column: 1 / -1;
}
.no-sidebar .site main {
.no-sidebar .site > main {
grid-column: 2 / 4;
padding: 0 1rem;
}
.no-sidebar .site aside {
.no-sidebar .site > aside {
grid-column: 2 / 4;
padding: 0 1rem;
}
.no-sidebar .site footer {
.no-sidebar .site > footer {
grid-column: 1 / -1;
}
.no-sidebar .site-header {
@ -832,7 +834,7 @@ textarea {
z-index: 900;
top: 0;
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);
-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);
@ -859,9 +861,17 @@ textarea {
}
@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 {
flex-flow: column;
border-bottom: 1px solid #eee;
}
.no-sidebar .site-header .secondary {
border-top: 1px solid #eee;
}
.no-sidebar.single .site-main {
width: 45rem;
@ -876,7 +886,15 @@ textarea {
}
@media screen and (min-width: 80em) {
.no-sidebar .site > main {
padding: 0;
}
.no-sidebar .site > aside {
padding: 0;
}
.no-sidebar .site-header .main {
width: 80em;
margin: auto;
flex-flow: row;
}
}

2
style.css.map
View File

File diff suppressed because one or more lines are too long