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

243 lines
3.9 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;
}
.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;
}
}
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;
height: 270px;
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: $golden;
}
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;
}
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;
}
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
$taglist: (diaspora, $diaspora),
(friendica, $friendica),
(hubzilla, $hubzilla),
(gnusocial, $gnusocial),
(mastodon, $mastodon),
(socialhome, $socialhome),
2018-03-12 22:34:24 +00:00
(pleroma, $pleroma),
2018-03-12 19:31:14 +00:00
(ganggo, $ganggo),
2018-03-12 22:34:24 +00:00
(aardwolf, $aardwolf),
2018-04-23 01:52:58 +00:00
(postactiv, $postactiv),
2018-05-05 21:13:33 +00:00
(peertube, $peertube),
2018-10-21 16:15:12 +00:00
(misskey, $misskey),
(osada, $osada);
2018-03-12 19:31:14 +00:00
@each $tag, $color in $taglist {
2018-08-23 22:18:07 +00:00
svg.#{$tag} {
2018-03-12 19:31:14 +00:00
fill: $color;
}
}
@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.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
}