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

styled site with grid and shade as in xarxaprod header

This commit is contained in:
jorge 2022-12-30 00:55:10 +01:00
parent d2fa402323
commit b9552e5265
3 changed files with 37 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,47 +2,36 @@
.no-sidebar { .no-sidebar {
.site { .site {
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: 1fr minmax(0,35em) minmax(0,35em) 1fr;
grid-template-areas: grid-template-areas:
"header" "header"
"main" "main"
"aside"
"footer"; "footer";
margin: auto; margin: auto;
padding: 0 1rem; padding: 0;
max-width: 80em; header {
grid-column: 1 / -1;
}
main {
grid-column: 2 / 4;
}
aside {
grid-column: 2 / 4;
}
footer {
grid-column: 1 / -1;
}
} }
.site-header { .site-header {
position: sticky; position: sticky;
z-index: 900; z-index: 900;
top: 0; top: 0;
height: 10rem;
margin-bottom: 2rem; margin-bottom: 2rem;
background-color: hsla(0, 0%, 100%, 1); background-color: hsla(0, 0%, 100%, 1);
&::after { i-moz-box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.01);
content: ""; -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.01);
display: inline-block; box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.0);
width: 100%;
height: 3rem;
position: absolute;
top:10rem;
// https://css-tricks.com/easing-linear-gradients/
background-image: linear-gradient(
hsla(0, 0%, 100%, 1) 0%,
hsla(0, 0%, 100%, 0.95) 5%,
hsla(0, 0%, 100%, 0.738) 19%,
hsla(0, 0%, 100%, 0.541) 34%,
hsla(0, 0%, 100%, 0.382) 47%,
hsla(0, 0%, 100%, 0.278) 56.5%,
hsla(0, 0%, 100%, 0.194) 65%,
hsla(0, 0%, 100%, 0.126) 73%,
hsla(0, 0%, 100%, 0.075) 80.2%,
hsla(0, 0%, 100%, 0.042) 86.1%,
hsla(0, 0%, 100%, 0.021) 91%,
hsla(0, 0%, 100%, 0.008) 95.2%,
hsla(0, 0%, 100%, 0.002) 98.2%,
hsla(0, 0%, 100%, 0) 100%
);
}
.main { .main {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
@ -70,19 +59,13 @@
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
.no-sidebar { .no-sidebar {
.site { .site {
padding: 0 2rem;
} }
.site-header { .site-header {
height: 12rem;
&::after {
top: 12rem;
}
.main { .main {
flex-flow: column; flex-flow: column;
border-bottom: 1px solid $color__grey-lighter; border-bottom: 1px solid $color__grey-lighter;
} }
.secondary { .secondary {
//justify-content: center;
} }
} }
&.single { &.single {
@ -94,9 +77,7 @@
} }
.ofisuport-destacats,.ofisuport-featured,.archive-posts { .ofisuport-destacats,.ofisuport-featured,.archive-posts {
//display: grid;
grid-template-columns: repeat(4 , 1fr); grid-template-columns: repeat(4 , 1fr);
//gap: $grid__gap;
.entry-title { .entry-title {
min-height: 13rem; min-height: 13rem;
} }
@ -105,13 +86,10 @@
@media screen and (min-width: 80em) { @media screen and (min-width: 80em) {
.no-sidebar { .no-sidebar {
.site { .site {
padding: 0 3rem;
} }
.site-header { .site-header {
.main { .main {
flex-flow: row; flex-flow: row;
align-items: center;
justify-content: space-between;
} }
.secondary { .secondary {
} }

46
style.css
View File

@ -810,28 +810,32 @@ textarea {
@media screen { @media screen {
.no-sidebar .site { .no-sidebar .site {
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
grid-template-areas: "header" "main" "footer"; grid-template-areas: "header" "main" "aside" "footer";
margin: auto; margin: auto;
padding: 0 1rem; padding: 0;
max-width: 80em; }
.no-sidebar .site header {
grid-column: 1 / -1;
}
.no-sidebar .site main {
grid-column: 2 / 4;
}
.no-sidebar .site aside {
grid-column: 2 / 4;
}
.no-sidebar .site footer {
grid-column: 1 / -1;
} }
.no-sidebar .site-header { .no-sidebar .site-header {
position: sticky; position: sticky;
z-index: 900; z-index: 900;
top: 0; top: 0;
height: 10rem;
margin-bottom: 2rem; margin-bottom: 2rem;
background-color: white; background-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);
.no-sidebar .site-header::after { -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.01);
content: ""; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0);
display: inline-block;
width: 100%;
height: 3rem;
position: absolute;
top: 10rem;
background-image: linear-gradient(white 0%, rgba(255, 255, 255, 0.95) 5%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, rgba(255, 255, 255, 0) 100%);
} }
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
display: flex; display: flex;
@ -855,15 +859,6 @@ textarea {
} }
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
.no-sidebar .site {
padding: 0 2rem;
}
.no-sidebar .site-header {
height: 12rem;
}
.no-sidebar .site-header::after {
top: 12rem;
}
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
flex-flow: column; flex-flow: column;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
@ -881,13 +876,8 @@ textarea {
} }
@media screen and (min-width: 80em) { @media screen and (min-width: 80em) {
.no-sidebar .site {
padding: 0 3rem;
}
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
flex-flow: row; flex-flow: row;
align-items: center;
justify-content: space-between;
} }
} }

2
style.css.map
View File

File diff suppressed because one or more lines are too long