nfp_sites/app/frontpage/frontpage.scss

192 lines
3.2 KiB
SCSS
Raw Normal View History

2019-09-14 19:03:38 +00:00
.frontpage-banner {
background-color: $meta-light-fg;
2019-09-14 19:03:38 +00:00
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 150px;
width: calc(100% - 40px);
2019-09-14 19:03:38 +00:00
max-width: 1920px;
align-self: center;
flex: 0 0 150px;
margin-bottom: 20px;
color: white;
text-shadow: 0 0 0.3em #000000;
text-align: right;
font-size: 1.6em;
padding: 10px 20px;
text-decoration: none;
margin: 20px 0;
2019-09-14 19:03:38 +00:00
}
frontpage {
display: flex;
align-self: center;
width: calc(100% - 40px);
max-width: 1200px;
2019-09-14 19:03:38 +00:00
flex: 2 0 0;
.frontpage-news {
display: flex;
flex-direction: column;
2019-10-02 21:48:50 +00:00
flex-grow: 2;
}
aside.sidebar {
width: 250px;
flex: 0 0 250px;
align-self: flex-start;
margin-right: 20px;
display: flex;
flex-direction: column;
.categories {
padding: 10px 10px 20px;
margin-bottom: 20px;
background: $newsitem-bg;
border: $newsitem-border;
}
h4 {
font-size: 14px;
padding: 0 5px 5px;
font-weight: bold;
margin: 0 0 10px;
border-bottom: 1px solid $border;
}
ul {
margin: 0;
padding: 0;
li {
padding-left: 10px;
list-style-type: disc;
list-style-position: inside;
}
}
a {
2019-10-02 21:48:50 +00:00
padding: 2px 5px;
display: block;
text-decoration: none;
color: $secondary-dark-bg;
font-size: 14px;
font-weight: bold;
2019-10-02 21:48:50 +00:00
display: inline-block;
max-width: 200px;
}
}
2019-09-14 19:03:38 +00:00
.loading-spinner {
height: 100px;
2019-10-02 21:48:50 +00:00
position: relative;
2019-09-14 19:03:38 +00:00
}
newsitem {
margin-bottom: 30px;
}
2019-10-01 03:45:44 +00:00
.asunaside {
display: block;
width: 200px;
height: 480px;
background-size: contain;
background-repeat: no-repeat;
background-position: top left;
align-self: center;
2019-10-01 03:45:44 +00:00
}
}
@media screen and (max-width: 1000px) {
frontpage aside.sidebar {
width: 200px;
flex: 0 0 200px;
2019-10-02 21:48:50 +00:00
a {
max-width: 150px;
}
}
}
@media screen and (max-width: 900px){
frontpage {
flex-direction: column;
aside.sidebar {
width: auto;
flex: 0 0 auto;
align-self: stretch;
margin: 20px 0 30px;
border-bottom: 1px solid $border;
order: 2;
.categories {
display: flex;
flex-direction: column;
align-items: center;
h4 {
align-self: stretch;
}
}
a {
max-width: unset;
}
}
}
}
.daymode frontpage .asunaside {
background-image: url("/assets/img/asuna_frontpage.jpg");
}
2019-10-01 03:45:44 +00:00
.darkmodeon frontpage .asunaside {
background-image: url("/assets/img/dark_asuna_frontpage.jpg");
2019-10-01 03:45:44 +00:00
}
@media screen and (max-width: 480px){
.frontpage-banner {
width: 100%;
}
frontpage {
padding: 0 10px;
margin: 0;
width: 100%;
}
frontpage aside.sidebar a {
padding: 9px 10px;
}
}
@media (pointer:coarse) {
frontpage aside.sidebar a {
padding: 9px 10px;
}
2019-09-14 19:03:38 +00:00
}
.darkmodeon {
.frontpage-banner {
background-color: $dark_meta-light-fg;
}
frontpage {
aside.sidebar {
.categories {
background: $dark_newsitem-bg;
border: $dark_newsitem-border;
}
h4 {
border-bottom: 1px solid $dark_border;
}
a {
color: $dark_secondary-dark-bg;
}
}
}
}