styled header and widths with better solution for scroll and possitions
This commit is contained in:
parent
b40bb55e74
commit
84f6205721
|
@ -1,12 +1,24 @@
|
|||
@media screen {
|
||||
html:not([data-scroll='0']) {
|
||||
.site-header {
|
||||
.site-header:before {
|
||||
content: "";
|
||||
display:inline-block;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
margin-left: -50vw;
|
||||
margin-right:-50vw;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background-color: $color__white;
|
||||
}
|
||||
}
|
||||
.no-sidebar {
|
||||
}
|
||||
.site {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
|
||||
grid-auto-rows: min-content auto min-content min-content;
|
||||
|
@ -36,14 +48,8 @@
|
|||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 500;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"secondary ";
|
||||
grid-row: auto;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0;
|
||||
width: 100vw;
|
||||
background-color: transparent;
|
||||
|
||||
.main {
|
||||
|
@ -127,7 +133,8 @@
|
|||
.site {
|
||||
//grid-template-columns: 1fr 2fr 2fr 1fr;
|
||||
> header {
|
||||
grid-column: 1 / -1;
|
||||
//grid-column: 1 / -1;
|
||||
grid-column: 2 / 4;
|
||||
}
|
||||
> main {
|
||||
grid-column: 2 / 4;
|
||||
|
@ -140,11 +147,6 @@
|
|||
}
|
||||
}
|
||||
.site-header {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
|
||||
grid-template-areas:
|
||||
"main "
|
||||
"secondary ";
|
||||
margin: auto;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0;
|
||||
|
@ -160,7 +162,7 @@
|
|||
}
|
||||
}
|
||||
.site-main {
|
||||
padding: 0 2rem;
|
||||
padding: 0;
|
||||
> section {
|
||||
padding: 4em 0;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue