website/_sass/post_content/_post.scss
2018-10-20 15:30:02 +08:00

90 lines
1.4 KiB
SCSS

/**
* Posts
*/
.post-header {
margin-bottom: $spacing-unit;
}
.post-title {
@include relative-font-size(2.625);
letter-spacing: -1px;
line-height: 1;
@include media-query($on-laptop) {
@include relative-font-size(2.25);
}
}
.post-content {
margin-bottom: $spacing-unit;
h2 {
@include relative-font-size(2);
@include media-query($on-laptop) {
@include relative-font-size(1.75);
}
}
h3 {
@include relative-font-size(1.625);
@include media-query($on-laptop) {
@include relative-font-size(1.375);
}
}
h4 {
@include relative-font-size(1.25);
@include media-query($on-laptop) {
@include relative-font-size(1.125);
}
}
}
.caption {
color: $grey-color;
font-size: $small-font-size;
padding-bottom: 1.5em;
text-align: center;
width: 100%;
}
.relative-posts {
color: $grey-color-dark;
display: flex;
font-size: $small-font-size;
justify-content: space-between;
margin-top: 2em;
a {
font-size: $base-font-size * 1.2;
}
.previous-post {
text-align: left;
max-width: 45%;
}
.next-post {
text-align: right;
max-width: 45%;
}
@include media-query($on-laptop) {
flex-flow: column wrap;
align-content: center;
justify-content: center;
text-align: center;
> * {
margin-top: 2em;
}
.previous-post, .next-post {
text-align: center;
}
}
}