article.page { background: white; padding: 0 0 20px; header { text-align: center; margin: 20px; padding: 10px; background: $secondary-bg; width: 100%; max-width: 1920px; align-self: center; h1 { color: $secondary-fg; } } .page-banner { background-size: auto 100%; background-repeat: no-repeat; background-position: center; height: 100px; width: 100%; max-width: 1920px; align-self: center; flex: 0 0 100px; } .page-cover { margin: 0 -10px 20px; } .admin-actions { margin-bottom: 20px; } & > .loading-spinner { width: 240px; height: 50px; position: relative; } aside.sidebar, aside.news { h4 { font-size: 14px; font-weight: bold; margin: 0 0 10px; } a { display: inline-block; padding-top: 5px; text-decoration: none; color: $secondary-bg; font-size: 14px; font-weight: bold; } } .container { flex-direction: column; align-items: center; height: auto; &.multi { align-self: center; align-items: flex-start; flex-direction: row; flex-grow: 2; width: 100%; max-width: 1050px; } } aside.sidebar { width: 250px; flex: 0 0 250px; padding: 0 10px; margin-bottom: 10px; h4 { padding: 0 5px 5px; border-bottom: 1px solid $border; } a { padding: 5px 5px 0px; display: block; } } .fr-view { margin: 0 20px; padding: 0 20px; width: calc(100% - 40px); max-width: 800px; flex: 2 0 0; main { padding: 0 5px; } } } aside.news { border-top: 1px solid #ccc; margin-top: 20px; padding: 10px 10px; margin: 0 -10px; width: 100%; align-self: center; newsentry { margin: 0 0 10px; } &.single { max-width: 800px; flex: 2 0 0; border-top: none; margin-top: 0; & > h4 { display: none; } } } @media screen and (max-device-width: 639px){ article.page .container { flex-direction: column !important; } article.page aside.sidebar { width: calc(100% - 80px); flex: 0 0 auto; margin: 0px 30px 30px; border-bottom: 1px solid $border; padding: 0 0 5px; } } @media screen and (max-device-width: 360px){ article.page { .container { flex-direction: column; } aside { margin: 0px 0px 10px; } .fr-view { margin: 0; width: 100%; padding: 0 5px; } } }