.all-posts {
.front-page & { padding-left: 1.5em; } @include breakpoint(medium) { .front-page & { padding-left: 2em; } } .post-meta { .no-flexbox & { padding-top: 2em; } } .post-emoji { display: inline-block; position: relative; text-indent: -1.5em; top: 2px; @include breakpoint(medium) { text-indent: -2em; } } .post-date { color: $text-color-light; }
}
.post-link {
@extend %flex; color: $text-color; display: block; padding-bottom: 0.5em; padding-top: 0.5em; &:hover { text-decoration: none; .post-img { background-color: transparent; transition: $link-transition; } }
}
.project-image, .post-img-container {
display: none; @include breakpoint(medium) { align-items: center; border-radius: $border-radius-img; display: flex; height: 7.5em; justify-content: left; margin-right: 2em; overflow: hidden; width: 10em; .post-img { //background-blend-mode: overlay; //background-color: rgba($body-bg, .3); background-position: center; background-size: cover; height: 100%; margin: 0; transition: $link-transition; width: 100%; } }
}
.post-title {
@extend %fancy-type; font-size: 1em;
}
.paginator {
margin-top: 1em;
}
.post-elsewhere-label .icon {
color: $link-color; font-size: 0.8em;
}
.categories {
@extend %xxs; display: none; margin-bottom: 2em; @include breakpoint(medium) { display: block; } /* @include breakpoint(big) { position: fixed; left: 2em; margin-top: 1.5em; width: 12em; } */ .category { @extend %btn; margin-bottom: 0.5em; @include breakpoint(medium) { display: inline-block; margin-bottom: 0; } @include breakpoint(big) { margin-bottom: 0.25em; } &.active, &:hover { background: $white; color: $link-hover; text-decoration: none; } } .emoji { left: -4px; position: relative; vertical-align: middle; }
}
.post-tags {
display: none; .post-page & { margin-top: 1em; } @include breakpoint(medium) { display: block; .front-page & { display: inline-block; margin-left: 0.5em; } } .post-tag { .front-page & { @extend %xs; } background: $light-accent; border-radius: 1em; display: inline-block; margin-right: 0.5em; padding: 0 0.75em; } a { color: darken($link-color, 15%); &:hover { background-color: darken($link-color, 15%); color: $white; text-decoration: none; } }
}