////////////////// // // // LAYOUT // // // ////////////////// body { display: flex; flex-direction: column; height: 100vh; margin: 0 auto 0 auto; } .body-fixed { position: fixed; width: 100%; } main.container { flex-grow: 1; max-width: $content-max-width; margin: 5rem auto 0 auto; h2 { text-align: center; } .post-info { margin-bottom: 1rem; } } main.home { height: 100%; } .content { @include breakpoint(laptop) { margin: 0 1rem 0 1rem; } @include breakpoint(tablet) { margin: 0 1rem 0 1rem; } @include breakpoint(mobile) { margin: 0 1rem 0 1rem; } } .home-info { position: relative; top: 30%; text-align: center; letter-spacing: -0.05em; font-weight: bold; color: white; @include breakpoint(small-height-desktop) { top: 20%; } h1 { font-size: 2.25em; line-height: 1em; } p { margin-top: -1em; font-size: .8em; } } .home-info.pushed-down { margin-top: 12rem; } .pushed-down { flex-grow: 1; max-width: $content-max-width; margin: 24rem auto 0 auto; @include breakpoint(small-mobile) { margin: 26rem auto 0 auto; } h2 { text-align: center; } }