body { background-color: $bg; background-image: url('../img/bg/bg-2.png'), url('../img/bg/bg-el-light.png'); transition: background-color 0.5s ease-in-out; background-position: $size-base $size-8, $size-8 $size-12; background-repeat-x: no-repeat; background-repeat-y: repeat; background-size: cover; background-attachment: fixed; display: flex; flex-direction: column; background-size: 100%; @include touch { background-attachment: scroll; } @include darkMode { background-color: $black; // &::after { // content: ''; // background-image: ; // opacity: 1; // background-position: 0 0; // background-repeat-x: no-repeat; // background-repeat-y: repeat; // background-size: 100%; // background-attachment: fixed; // height: 100vh; // width: 100vw; // position: fixed; // pointer-events: none; // } } } .page-content { max-width: 920px; margin: 0 auto; } html, body { height: 100%; } .content { flex: 1 0 auto; max-width: $size-512 + $size-128; } footer.page-footer { flex-shrink: 0; } .textbox { @include textbox; } .textbox-sm { @include textbox; padding: $size-8 $size-16; }