nfp_sites/app/pages/page.scss

234 lines
3.8 KiB
SCSS
Raw Normal View History

2019-09-13 13:33:10 +00:00
article.page {
padding-bottom: 0;
2019-09-13 13:33:10 +00:00
header {
text-align: center;
margin: 20px 20px 0;
2019-09-13 13:33:10 +00:00
padding: 10px;
background: $secondary-bg;
width: 100%;
max-width: 1920px;
align-self: center;
h1 {
color: $secondary-fg;
}
}
.page-banner {
2019-09-14 19:03:38 +00:00
background-size: cover;
2019-09-13 13:33:10 +00:00
background-repeat: no-repeat;
background-position: center;
2019-09-14 19:03:38 +00:00
height: 150px;
2019-09-13 13:33:10 +00:00
width: 100%;
max-width: 1920px;
align-self: center;
2019-09-14 19:03:38 +00:00
flex: 0 0 150px;
2019-09-13 13:33:10 +00:00
}
.page-cover {
margin: 0 -10px 20px;
2019-09-14 19:03:38 +00:00
&.single {
margin: 0 20px 20px;
padding: 0 20px;
width: calc(100% - 40px);
max-width: 800px;
flex: 2 0 0;
}
2019-09-13 13:33:10 +00:00
}
.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;
}
2019-09-14 19:03:38 +00:00
// a {
// display: inline-block;
// padding-top: 5px;
// text-decoration: none;
// color: $secondary-dark-bg;
// font-size: 14px;
// font-weight: bold;
// }
2019-09-13 13:33:10 +00:00
}
.container {
flex-direction: column;
align-items: center;
height: auto;
padding: 20px 0;
background: $newsitem-bg;
border-right: $newsitem-border;
border-left: $newsitem-border;
2019-09-13 13:33:10 +00:00
&.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;
2019-09-14 19:03:38 +00:00
text-decoration: none;
color: $secondary-dark-bg;
font-size: 14px;
font-weight: bold;
2019-09-13 13:33:10 +00:00
}
}
.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;
2019-09-14 19:03:38 +00:00
.loading-spinner {
position: relative;
height: 133px;
}
2019-09-13 13:33:10 +00:00
newsentry {
margin: 0 0 10px;
}
&.single {
max-width: 800px;
flex: 2 0 0;
2019-09-14 19:03:38 +00:00
padding: 0 20px 10px;
2019-09-13 13:33:10 +00:00
border-top: none;
margin-top: 0;
2019-09-14 19:03:38 +00:00
align-self: flex-start;
2019-09-13 13:33:10 +00:00
& > h4 {
2019-09-14 19:03:38 +00:00
padding: 0 5px 5px;
border-bottom: 1px solid $border;
2019-09-13 13:33:10 +00:00
}
}
}
2019-09-14 19:03:38 +00:00
@media screen and (max-width: 800px){
article.page aside.sidebar {
width: 200px;
flex: 0 0 200px;
}
}
@media screen and (max-width: 639px){
2019-09-13 13:33:10 +00:00
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;
}
}
2019-09-14 19:03:38 +00:00
@media screen and (max-width: 360px){
2019-09-13 13:33:10 +00:00
article.page {
.container {
flex-direction: column;
}
aside {
margin: 0px 0px 10px;
}
.fr-view {
margin: 0;
width: 100%;
padding: 0 5px;
}
}
}
.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;
}
}
}
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;
}
}
}