@media screen { //any screen html:not([data-scroll='0']) { .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; grid-template-areas: "header" "main" "aside" "footer"; margin: auto; padding: 0; min-height: 100vh; > header { grid-column: 1 / -1; } > main { grid-column: 1 / -1; } > aside { grid-column: 1 / -1; padding: 4em 0; } > footer { grid-column: 1 / -1; } } .site-header { position: sticky; top: 0; z-index: 500; width: 100%; padding: 0.5rem 0; background-color: transparent; .main { display: flex; flex-flow: row; align-items: center; justify-content: space-between; z-index: 900; } .secondary { display: flex; flex-flow: column; align-items: end; } } .site-main { padding: 0 1rem; gap: $grid__gap; > section { padding: 0; > header { padding: 1em 0; } } } .archive, .category { .site-main { display:grid; grid-template-columns: 1fr; > header { grid-column: 1 / -1; } } } .xarxaprod-filtered-content { display: grid; grid-template-columns: 1fr; gap: $grid__gap; .archive-posts { } } .site-footer { display: flex; flex-flow: row; background: $color__black; color: $color__white; margin-top: 4em; :where(.wp-block-columns.is-layout-flex) { gap: $grid__gap * 5; } .site-info { &> section { margin-top: 2em; padding: 2em 4em; border-top: $border__line; } } a { color: $color__white; &:hover,&:visited,&:active { color: $color__white; } } ul[id*="menu-footer"] { column-count: 3; a { text-decoration: underline; } } }//end .site-footer :where(.wp-block-columns.is-layout-flex) { gap: $grid__gap * 1.5; } .xarxaprod-destacats,.xarxaprod-featured, .xarxaprod-last-convos,.xarxaprod-ultimes-convocatories, .archive-posts { display: grid; grid-template-columns: repeat(1 , 1fr); gap: $grid__gap * 1.5; } } @media screen and (max-width: 48em) { //only smaller than 48em .site-header { .main{ padding-right: 1em; } } .site-footer { .is-layout-flex { flex-flow: column; align-items: flex-start; } } } @media screen and (min-width: 48em) { //only bigger than 48em html:not([data-scroll='0']) { .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; } } .site { > header { grid-column: 2 / 4; } > main { grid-column: 2 / 4; } > aside { grid-column: 2 / 4; } > footer { grid-column: 1 / -1; } } .site-header { padding: 0; .main { grid-column: 2/4; width: 100%; } .secondary { grid-column: 2/4; align-items: center; width: 100%; } } .page-template-agenda-archive { .site-main { > article { padding-bottom: 1rem; } } } .site-main { padding: 0; padding-top: 4rem; > article { padding-bottom: 4rem; &.xarxaprod-ajut, &.category-activitats { display: grid; > * { max-width: 40rem; } } &.xarxaprod-convo { display: grid; > * { max-width: 40rem; margin: 0 auto; } > header { grid-row-start: 2; } > aside, > .xarxaprod-espai-image { } > .entry-content { } > footer{ max-width: unset; } } > header { margin-bottom: 1rem; } > aside { margin-bottom: 1rem; } } > section { padding-bottom: 4rem; } } .archive, .category { .site-main { grid-template-columns: 1fr 3fr; > header { } } } .xarxaprod-filtered-content { grid-template-columns: 1fr 3fr; .archive-posts { } } .site-footer { flex-flow: column; } .home-featured { padding: 0 2rem; } &.single { .site-main { margin: 0 auto; } } .xarxaprod-destacats,.xarxaprod-featured, .xarxaprod-last-convos,.xarxaprod-ultimes-convocatories { grid-template-columns: repeat(3 , 1fr); } .archive-posts { grid-template-columns: repeat(2 , 1fr); min-height: 40vh; &.archive-posts-map,&.archive-xarxaprod-members,&archive-xarxaprod-associats { grid-template-columns: 1fr; } } .xarxaprod-faqs-aside { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 1rem; .xarxaprod-search-form { &:hover,&:active,&:focus,&:target { flex-grow: 1; } } } } @media screen and (min-width: 80em) { //only bigger than 80rem .site { > header { } > main { } > aside { } > footer { } } .site-header { .main { } .secondary { } } .site-main { } .site-footer { } .home-featured { padding: 0; } }