fediparty/themes/starter/source/assets/scss/modules/_chronicles.scss

228 lines
3.5 KiB
SCSS
Raw Normal View History

2018-03-12 19:31:14 +00:00
.chronicles {
line-height: 1.4;
}
.chronicles .heading {
text-align: center;
margin-bottom: 3em;
}
.chronicles .links {
2018-11-03 19:31:34 +00:00
width: 160px;
2018-03-12 19:31:14 +00:00
height: 150px;
margin-bottom: 2em;
2018-11-03 19:31:34 +00:00
line-height: 1.7;
2018-03-12 19:31:14 +00:00
}
.chronicles .section-title h4 {
color: $black;
text-align: center;
}
.chronicles .urgent {
position: absolute;
top: 8em;
right: 13em;
width: 450px;
overflow: hidden;
}
.chronicles .urgent .section-title {
border-bottom: none;
padding-bottom: 0;
}
2022-05-10 10:48:13 +00:00
.post {
min-height: 100vh;
}
2018-03-12 19:31:14 +00:00
.post__preview {
padding: .8em 1.5em;
2018-03-12 19:31:14 +00:00
border: 1px solid $grey;
border-radius: 10px;
position: relative;
&:hover {
border: 1px solid $black;
}
}
2019-07-15 21:49:09 +00:00
.post__preview.featured,
.post__preview a.oneliner {
padding: 0;
background: none;
}
2018-11-03 19:31:34 +00:00
.post__preview:not(.wanted):not(.featured) a:focus > p {
color: $coral;
}
2018-03-12 19:31:14 +00:00
.post__preview.wanted p {
margin: .3em 0;
line-height: 1.2;
}
.post__preview:not(.wanted) {
margin-top: 1em;
}
2018-03-12 22:34:24 +00:00
.post__preview:not(.wanted):nth-child(n+4) {
margin-top: 2em;
}
2018-03-12 19:31:14 +00:00
.post__preview:not(.wanted):not(.featured) {
flex: 32% 0 0;
2020-11-13 19:58:22 +00:00
height: 290px;
2018-03-12 19:31:14 +00:00
}
.post__preview:not(.wanted):not(.featured) .post__meta {
position: absolute;
bottom: 0;
width: 80%;
}
.post__preview .post__meta span:last-child {
position: absolute;
right: 0;
}
.post__preview .post__meta i:last-child {
display: none;
}
2018-03-12 19:31:14 +00:00
.post__preview.wanted .post__meta span:last-child {
right: 1.5em;
}
.post__preview:not(.wanted):not(.featured) .post__content {
width: 80%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.post__preview.featured {
border: none;
display: flex;
justify-content: space-between;
margin: 4em 0;
2018-03-12 19:31:14 +00:00
max-height: 300px;
&:hover,
&:active,
&:focus {
color: inherit;
opacity: .85;
}
2018-03-12 19:31:14 +00:00
}
.post__preview.featured p {
margin-top: 0;
}
2018-11-03 19:31:34 +00:00
.post__preview.featured:hover p:first-child,
.post__preview.featured:focus p:first-child {
color: $grey;
2018-11-03 19:31:34 +00:00
}
2018-03-12 19:31:14 +00:00
2018-10-14 18:09:20 +00:00
.post__preview.featured > .post__image,
2018-03-12 19:31:14 +00:00
.post__preview.featured .post__content {
flex: 48% 0 0;
2018-03-12 19:31:14 +00:00
}
2018-10-14 18:09:20 +00:00
.post__preview.featured img {
border-radius: 10px;
2018-10-14 18:09:20 +00:00
height: 220px;
}
2018-03-12 19:31:14 +00:00
.post__preview.featured .post__content {
display: flex;
flex-direction: column;
overflow: hidden;
2018-03-12 19:31:14 +00:00
}
.post__content > .post__text {
flex: 1 0 auto;
}
.post__preview.featured .post__meta {
margin-bottom: 0;
}
.news {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.post__preview .oneliner:hover,
.post__preview .oneliner:focus,
.post__preview .oneliner:active {
color: $black;
}
2018-06-16 15:25:14 +00:00
.page-nav {
margin: 2em 0;
}
.page-number {
margin: 0 .3em;
}
.page-number.current {
font-weight: bold;
color: $golden;
}
2018-03-12 19:31:14 +00:00
@media screen and (max-width: $mq-large) {
.chronicles .urgent {
right: 9em;
}
2018-05-05 03:55:44 +00:00
.post__preview:not(.wanted):not(.featured) {
flex: 46% 0 0;
}
2018-03-12 19:31:14 +00:00
.post__preview:not(.wanted):nth-child(n+4) {
margin-top: 1em;
}
2018-03-12 19:31:14 +00:00
.post__preview.featured {
2018-10-14 18:09:20 +00:00
flex-wrap: wrap;
2018-03-12 19:31:14 +00:00
max-height: inherit;
margin: 1.5em 0;
2018-03-12 19:31:14 +00:00
}
2018-10-14 18:09:20 +00:00
.post__preview.featured > .post__image,
2018-03-12 19:31:14 +00:00
.post__preview.featured .post__content {
flex: 100% 0 0;
2018-10-21 16:15:12 +00:00
margin-bottom: 2em;
}
2018-10-14 18:09:20 +00:00
}
@media screen and (max-width: $mq-medium) {
.chronicles .urgent {
position: inherit;
width: auto;
margin: -90px auto 3em;
2018-03-12 19:31:14 +00:00
}
.post__preview:not(.wanted):not(.featured) {
flex: 100% 0 0;
2018-10-14 18:21:30 +00:00
height: 220px;
2018-03-21 02:27:07 +00:00
}
}
@media screen and (max-width: $mq-small) {
.contents.chronicles {
padding-top: 7em;
2018-03-12 19:31:14 +00:00
}
2018-06-16 15:25:14 +00:00
2018-11-18 17:26:14 +00:00
.post__preview:not(.wanted):not(.featured) {
height: 230px;
}
2018-06-16 15:25:14 +00:00
.page-number {
margin: 0 .9em;
}
2018-03-12 19:31:14 +00:00
}