fediparty/themes/starter/source/assets/scss/modules/_chronicles.scss
2018-06-04 17:30:53 +03:00

225 lines
3.7 KiB
SCSS

.chronicles {
line-height: 1.4;
}
.chronicles .heading {
text-align: center;
margin-bottom: 3em;
}
.chronicles .links {
width: 150px;
height: 150px;
margin-bottom: 2em;
}
.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;
}
.post__preview {
padding: .8em 1.5em;
border: 1px solid $grey;
border-radius: 10px;
position: relative;
&:hover {
border: 1px solid $black;
}
}
.post__preview.wanted p {
margin: .3em 0;
line-height: 1.2;
}
.post__preview:not(.wanted) {
margin-top: 1em;
}
.post__preview:not(.wanted):nth-child(n+4) {
margin-top: 2em;
}
.post__preview:not(.wanted):not(.featured) {
flex: 32% 0 0;
height: 270px;
}
.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.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;
flex-wrap: wrap;
margin: 3em 0;
max-height: 300px;
&:hover,
&:active,
&:focus {
color: inherit;
opacity: .85;
}
}
.post__preview.featured p {
margin-top: 0;
}
.post__preview.featured .post__title {
line-height: 1;
}
.post__preview.featured > img:first-child,
.post__preview.featured .post__content {
flex: 45% 0 0;
}
.post__preview.featured > img:first-child {
border-radius: 10px;
}
.post__avatar {
position: absolute;
right: 50%;
top: -30px;
width: 85px;
height: 85px;
text-align: center;
border-radius: 50%;
border: 10px solid $white;
background: $white;
}
.post__preview.featured .post__content {
display: flex;
flex-direction: column;
overflow: hidden;
}
.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;
}
svg.f-tag {
position: absolute;
width: 20px;
height: 20px;
right: .5em;
top: .5em;
fill: $golden;
}
.post__preview .oneliner:hover,
.post__preview .oneliner:focus,
.post__preview .oneliner:active {
color: $black;
}
$taglist: (diaspora, $diaspora),
(friendica, $friendica),
(hubzilla, $hubzilla),
(gnusocial, $gnusocial),
(mastodon, $mastodon),
(socialhome, $socialhome),
(pleroma, $pleroma),
(ganggo, $ganggo),
(aardwolf, $aardwolf),
(postactiv, $postactiv),
(peertube, $peertube),
(misskey, $misskey);
@each $tag, $color in $taglist {
svg.f-tag.#{$tag} {
fill: $color;
}
}
@media screen and (max-width: $mq-large) {
.chronicles .urgent {
right: 9em;
}
.post__preview:not(.wanted):not(.featured) {
flex: 46% 0 0;
}
}
@media screen and (max-width: $mq-medium) {
.chronicles .urgent {
position: inherit;
width: auto;
margin: -90px auto 3em;
}
.post__preview.featured {
max-height: inherit;
}
.post__avatar {
right: 0%;
}
.post__preview.featured > img:first-child,
.post__preview.featured .post__content {
flex: 100% 0 0;
margin-bottom: 2em;
}
.post__preview:not(.wanted):not(.featured) {
flex: 100% 0 0;
height: 200px;
}
}
@media screen and (max-width: $mq-small) {
.contents.chronicles {
padding-top: 7em;
}
}