@media screen { .no-sidebar { .site { display: grid; grid-template-columns: 1fr minmax(0,35em) minmax(0,35em) 1fr; grid-template-areas: "header" "main" "aside" "footer"; margin: auto; padding: 0; > header { grid-column: 1 / -1; } > main { grid-column: 2 / 4; } > aside { grid-column: 2 / 4; } > footer { grid-column: 1 / -1; } } .site-header { position: sticky; z-index: 900; top: 0; margin-bottom: 2rem; background-color: $color__white; box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.0); .main { display: flex; flex-flow: row; align-items: center; justify-content: space-around; } .secondary { display: flex; flex-flow: column; align-items: center; } } .site-main { padding: 0 1rem; h1,h2,h3,h4,h5,h6,.entry-content { margin: 0; } } .home-featured { padding: 0 1rem; } .site-footer { } } .ofisuport-destacats,.ofisuport-featured,.archive-posts { display: grid; grid-template-columns: repeat(1 , 1fr); gap: $grid__gap; .entry-title { border-bottom: 1px solid $color__black; margin: 0; } p { margin:0; } } .ofisuport-fund-info-fields { display: grid; .ofisuport-fund-info-fields ul { margin: 1rem 0; border-bottom: 1px solid $color__black; padding-bottom: 1rem; .ofisuport-fund-info-fields li { font-size: 1.3rem; } } } .oficina-suport-label { } .ofisuport-funder-name, .ofisuport-fund-contact-name, .ofisuport-fund-web { display: flex; margin:0; padding: 0.3rem 0; font-variant: all-petite-caps; font-size: 1.1rem; line-height: 0.9; border-bottom: 1px solid $color__black; align-items: center; a { text-decoration: none; font-size: 0.8rem; } } } @media screen and (max-width: 48em) { //only smaller than 48em .no-sidebar { .site-header { } .site-main { } .home-featured { } .site-footer { } } } @media screen and (min-width: 48em) { //only bigger than 48em .no-sidebar { .site { > header { } > main { } > aside { } > footer { } } .site-header { .main { flex-flow: column; } .secondary { border-top: 1px solid $color__grey-lighter; } } .site-main { padding: 0 2rem; h1,h2,h3,h4,h5,h6,.entry-content { margin:0; } } .home-featured { padding: 0 2rem; } .site-footer { } &.single { .site-main { width: 45rem; margin: 0 auto; } } } .ofisuport-destacats,.ofisuport-featured,.archive-posts { grid-template-columns: repeat(4 , 1fr); } } @media screen and (min-width: 80em) { //only bigger than 80rem .no-sidebar { .site { > header { } > main { } > aside { } > footer { } } .site-header { .main { width: 80em; margin: auto; flex-flow: row; } .secondary { } } .site-main { padding: 0; } .home-featured { padding: 0; } .site-footer { } } }