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

styled header and widths with better solution for scroll and possitions

This commit is contained in:
jorge 2024-03-14 17:21:02 +01:00
parent b40bb55e74
commit 84f6205721
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,24 @@
@media screen { @media screen {
html:not([data-scroll='0']) { 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; background-color: $color__white;
} }
} }
.no-sidebar { .no-sidebar {
} }
.site { .site {
position: relative;
display: grid; display: grid;
grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto; grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-auto-rows: min-content auto min-content min-content; grid-auto-rows: min-content auto min-content min-content;
@ -36,14 +48,8 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 500; z-index: 500;
display: grid; width: 100%;
grid-template-areas:
"main"
"secondary ";
grid-row: auto;
align-items: center;
padding: 0.5rem 0; padding: 0.5rem 0;
width: 100vw;
background-color: transparent; background-color: transparent;
.main { .main {
@ -127,7 +133,8 @@
.site { .site {
//grid-template-columns: 1fr 2fr 2fr 1fr; //grid-template-columns: 1fr 2fr 2fr 1fr;
> header { > header {
grid-column: 1 / -1; //grid-column: 1 / -1;
grid-column: 2 / 4;
} }
> main { > main {
grid-column: 2 / 4; grid-column: 2 / 4;
@ -140,11 +147,6 @@
} }
} }
.site-header { .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: auto;
margin-bottom: 2rem; margin-bottom: 2rem;
padding: 0; padding: 0;
@ -160,7 +162,7 @@
} }
} }
.site-main { .site-main {
padding: 0 2rem; padding: 0;
> section { > section {
padding: 4em 0; padding: 4em 0;
} }