nfp_sites/app/pages/page.scss

162 lines
2.5 KiB
SCSS
Raw Normal View History

2019-09-13 13:33:10 +00:00
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;
}
}
}