@media screen { html:not([data-scroll='0']) { .site-header { background-color: $color__white; } } .no-sidebar { } .site { 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; } :where(.wp-block-columns.is-layout-flex) { gap: $grid__gap * 2; } .xarxaprod-destacats,.xarxaprod-featured, .xarxaprod-last-convos,.xarxaprod-ultimes-convocatories, .archive-posts { display: grid; grid-template-columns: repeat(1 , 1fr); gap: $grid__gap * 3; } } .site-header { position: sticky; top: 0; z-index: 500; display: grid; grid-template-areas: "main" "secondary "; grid-row: auto; align-items: center; padding: 0.5rem 0; width: 100vw; 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; > section { padding: 0; > header { padding: 2em 0; } } } .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; //8em; } .wp-block-column:last-of-type { //padding-left: 4em; } .site-info { &> section { margin-top: 2em; padding: 2em 4em; border-top: 0.1em solid $color__white; } } a { color: $color__white; &:hover,&:visited,&:active { color: $color__white; } } ul[id*="menu-footer"] { column-count: 3; a { text-decoration: underline; } } ul[id*="menu-legal"] li { float: left; padding-left: 0.8em; font-size: 0.8em; } ul[id*="menu-social-media"] { display:flex; flex-flow: row; li { height: 1.5em; width: 1.5em; background-color: $color__white; border-radius: 5em; margin-right: 0.3em; &:before { content:"A"; display: block; color: $color__black; font-size: 1em; width: 2em; height: 2em; text-align:center; } a { font-size: 0px; } } } } } @media screen and (max-width: 48em) { //only smaller than 48em .site-header { .main{ padding-right: 1em; } } .site-main { } .site-footer { .is-layout-flex { flex-flow: column; align-items: flex-start; } } .page-template-funds-search { } .home-featured { } } @media screen and (min-width: 48em) { //only bigger than 48em .site { //grid-template-columns: 1fr 2fr 2fr 1fr; > header { grid-column: 1 / -1; } > main { grid-column: 2 / 4; } > aside { grid-column: 2 / 4; } > footer { grid-column: 1 / -1; } :where(.wp-block-columns.is-layout-flex) { gap: $grid__gap * 4; } } .site-header { display: grid; //grid-template-columns: 1fr 2fr 2fr 1fr; 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; .main { grid-column: 2/4; width: 100%; } .secondary { grid-column: 2/4; align-items: center; width: 100%; } } .site-main { padding: 0 2rem; > section { padding: 4em 0; } } .site-footer { flex-flow: column; } .home-featured { padding: 0 2rem; } &.single { .site-main { //width: 45rem; margin: 0 auto; } } .xarxaprod-destacats,.xarxaprod-featured, .xarxaprod-last-convos,.xarxaprod-ultimes-convocatories, .archive-posts { grid-template-columns: repeat(3 , 1fr); } .xarxaprod-faqs-aside { display: flex; flex-direction: row; align-items: center; justify-content: space-between; .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 { padding: 0; } .site-footer { } .home-featured { padding: 0; } }