article.page { padding-bottom: 0; header { text-align: center; margin: 20px 20px 0; padding: 10px; background: $secondary-bg; width: 100%; max-width: 1920px; align-self: center; h1 { color: $secondary-fg; } } .loading-spinner { position: relative; flex-grow: 2; height: 300px; } .page-banner { background-size: cover; background-repeat: no-repeat; background-position: center; height: 150px; width: 100%; max-width: 1920px; align-self: center; flex: 0 0 150px; } .page-cover { margin: 0 0 20px; &.single { margin: 0 20px 20px; padding: 0 20px; width: calc(100% - 40px); max-width: 800px; flex: 2 0 0; } } .goback { width: 100%; max-width: 1050px; align-self: center; padding: 10px 5px 0; margin-bottom: -10px; a { font-weight: bold; text-decoration: none; color: $secondary-dark-bg; } } .admin-actions { margin-bottom: 20px; } 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-dark-bg; // font-size: 14px; // font-weight: bold; // } } .container { flex-direction: column; align-items: center; height: auto; padding: 20px 0; width: 100%; max-width: 1050px; align-self: center; background: $newsitem-bg; border-right: $newsitem-border; border-left: $newsitem-border; &.multi { align-items: flex-start; flex-direction: row; flex-grow: 2; } } 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; text-decoration: none; color: $secondary-dark-bg; font-size: 14px; font-weight: bold; } } .fr-view { margin: 0 20px; padding: 0 20px; width: calc(100% - 40px); max-width: 800px; flex: 2 0 0; .page-cover { margin: 0 -10px 20px; } 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; .loading-spinner { position: relative; height: 133px; } newsentry { margin: 0 0 10px; } &.single { // max-width: 800px; flex: 2 0 0; padding: 0 20px 10px; border-top: none; margin-top: 0; align-self: flex-start; margin: 0; & > h4 { padding: 0 5px 5px; border-bottom: 1px solid $border; } } } @media screen and (max-width: 800px){ article.page aside.sidebar { width: 200px; flex: 0 0 200px; } } @media screen and (max-width: 639px){ article.page { padding: 0; .container { flex-direction: column !important; border: none !important; } aside.sidebar { width: calc(100% - 80px); flex: 0 0 auto; margin: 0px 30px 30px; border-bottom: 1px solid $border; padding: 0 0 5px; } .news.single .page-cover { margin: 0 0 20px; } } } @media screen and (max-width: 360px){ article.page { .container { flex-direction: column; } aside { margin: 0px 0px 10px; } .fr-view { margin: 0; width: 100%; padding: 0 5px; } } } @media screen and (max-width: 480px){ article.page aside.sidebar a { padding: 9px 10px; } } @media (pointer:coarse) { article.page aside.sidebar a { padding: 9px 10px; } } .darkmodeon { article.page { header { background: $dark_secondary-bg; h1 { color: $dark_secondary-fg; } } .container { background: $dark_newsitem-bg; border-right: $dark_newsitem-border; border-left: $dark_newsitem-border; } aside.sidebar { h4 { border-bottom: 1px solid $dark_border; } a { color: $dark_secondary-dark-bg; } } .goback a { color: $dark_secondary-dark-bg; } } aside.news { &.single { & > h4 { border-bottom: 1px solid $dark_border; } } } @media screen and (max-width: 639px){ article.page aside.sidebar { border-bottom: 1px solid $dark_border; } } .goback a { color: $dark_secondary-dark-bg; } }