styled header and widths with better solution for scroll and possitions

This commit is contained in:
jorge-vitrubio 2024-03-14 17:21:02 +01:00
parent b40bb55e74
commit 84f6205721
1 changed files with 17 additions and 15 deletions

View File

@ -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;
}