@media screen { .no-sidebar { .site { display: grid; grid-template-columns: auto; grid-template-areas: "header" "main" "footer"; margin: auto; padding: 0 1rem; max-width: 80em; } .site-header { position: sticky; z-index: 900; top: 0; height: 10rem; margin-bottom: 2rem; background-color: hsla(0, 0%, 100%, 1); &::after { content: ""; display: inline-block; width: 100%; height: 3rem; position: absolute; top:10rem; // https://css-tricks.com/easing-linear-gradients/ background-image: linear-gradient( hsla(0, 0%, 100%, 1) 0%, hsla(0, 0%, 100%, 0.95) 5%, hsla(0, 0%, 100%, 0.738) 19%, hsla(0, 0%, 100%, 0.541) 34%, hsla(0, 0%, 100%, 0.382) 47%, hsla(0, 0%, 100%, 0.278) 56.5%, hsla(0, 0%, 100%, 0.194) 65%, hsla(0, 0%, 100%, 0.126) 73%, hsla(0, 0%, 100%, 0.075) 80.2%, hsla(0, 0%, 100%, 0.042) 86.1%, hsla(0, 0%, 100%, 0.021) 91%, hsla(0, 0%, 100%, 0.008) 95.2%, hsla(0, 0%, 100%, 0.002) 98.2%, hsla(0, 0%, 100%, 0) 100% ); } .main { display: flex; flex-flow: row; align-items: center; justify-content: space-around; } .secondary { display: flex; flex-flow: column; align-items: center; } } .site-main { h1,h2,h3,h4,h5,h6,.entry-content { margin:0; } } } } @media screen and (min-width: 48em) { .no-sidebar { .site { padding: 0 2rem; .ofisuport-destacats,.ofisuport-featured,.archive-posts { display: grid; grid-template-columns: repeat(4 , 1fr); gap: $grid__gap; } } .site-header { height: 12rem; &::after { top: 12rem; } .main { flex-flow: column; border-bottom: 1px solid $color__grey-lighter; } .secondary { //justify-content: center; } } } } @media screen and (min-width: 80em) { .no-sidebar { .site { padding: 0 3rem; } .site-header { .main { flex-flow: row; align-items: center; justify-content: space-between; } .secondary { } } } }