styled site with grid and shade as in xarxaprod header
This commit is contained in:
jorge-vitrubio
parent
d2fa402323
commit
b9552e5265
|
|
@ -2,47 +2,36 @@
|
|||
.no-sidebar {
|
||||
.site {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-columns: 1fr minmax(0,35em) minmax(0,35em) 1fr;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"main"
|
||||
"aside"
|
||||
"footer";
|
||||
margin: auto;
|
||||
padding: 0 1rem;
|
||||
max-width: 80em;
|
||||
padding: 0;
|
||||
header {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
main {
|
||||
grid-column: 2 / 4;
|
||||
}
|
||||
aside {
|
||||
grid-column: 2 / 4;
|
||||
}
|
||||
footer {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
.site-header {
|
||||
position: sticky;
|
||||
z-index: 900;
|
||||
top: 0;
|
||||
height: 10rem;
|
||||
margin-bottom: 2rem;
|
||||
background-color: hsla(0, 0%, 100%, 1);
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
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%
|
||||
);
|
||||
}
|
||||
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);
|
||||
.main {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
|
@ -70,19 +59,13 @@
|
|||
@media screen and (min-width: 48em) {
|
||||
.no-sidebar {
|
||||
.site {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
.site-header {
|
||||
height: 12rem;
|
||||
&::after {
|
||||
top: 12rem;
|
||||
}
|
||||
.main {
|
||||
flex-flow: column;
|
||||
border-bottom: 1px solid $color__grey-lighter;
|
||||
}
|
||||
.secondary {
|
||||
//justify-content: center;
|
||||
}
|
||||
}
|
||||
&.single {
|
||||
|
|
@ -94,9 +77,7 @@
|
|||
}
|
||||
|
||||
.ofisuport-destacats,.ofisuport-featured,.archive-posts {
|
||||
//display: grid;
|
||||
grid-template-columns: repeat(4 , 1fr);
|
||||
//gap: $grid__gap;
|
||||
.entry-title {
|
||||
min-height: 13rem;
|
||||
}
|
||||
|
|
@ -105,13 +86,10 @@
|
|||
@media screen and (min-width: 80em) {
|
||||
.no-sidebar {
|
||||
.site {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
.site-header {
|
||||
.main {
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.secondary {
|
||||
}
|
||||
|
|
|
|||
46
style.css
46
style.css
|
|
@ -810,28 +810,32 @@ textarea {
|
|||
@media screen {
|
||||
.no-sidebar .site {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-areas: "header" "main" "footer";
|
||||
grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
|
||||
grid-template-areas: "header" "main" "aside" "footer";
|
||||
margin: auto;
|
||||
padding: 0 1rem;
|
||||
max-width: 80em;
|
||||
padding: 0;
|
||||
}
|
||||
.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 {
|
||||
position: sticky;
|
||||
z-index: 900;
|
||||
top: 0;
|
||||
height: 10rem;
|
||||
margin-bottom: 2rem;
|
||||
background-color: white;
|
||||
}
|
||||
.no-sidebar .site-header::after {
|
||||
content: "";
|
||||
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%);
|
||||
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);
|
||||
}
|
||||
.no-sidebar .site-header .main {
|
||||
display: flex;
|
||||
|
|
@ -855,15 +859,6 @@ textarea {
|
|||
}
|
||||
|
||||
@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 {
|
||||
flex-flow: column;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
|
@ -881,13 +876,8 @@ textarea {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 80em) {
|
||||
.no-sidebar .site {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
.no-sidebar .site-header .main {
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue