website/_sass/post_content/_post.scss
2018-10-29 17:32:29 +08:00

132 lines
2.3 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;
> p {
> img {
display: block;
margin: 0 auto;
}
word-spacing: 1px;
}
ul.resources-link {
list-style: none;
margin-left: 1.9em;
@include media-query($on-palm) {
margin-left: 0;
> li {margin-bottom: 0.75em;}
}
}
> h1:not(:first-of-type){margin-top: $spacing-unit * 1.65;}
h2 {
@include relative-font-size(2);
&::after, &::before {
content: "";
display: block;
border-bottom: 1px dashed black;
}
&::after {margin-top: .2em;}
&::before {margin-bottom: .2em;}
&:first-of-type {margin-top: $spacing-unit * 1.5;}
&:not(:first-of-type) {margin-top: $spacing-unit * 2.5;}
@include media-query($on-laptop) {
@include relative-font-size(1.75);
}
}
h2 ~ h3 {margin-top: $spacing-unit * 1.45;}
h2 + h3 {margin-top: 0;}
h3 {
@include relative-font-size(1.625);
@include media-query($on-laptop) {
@include relative-font-size(1.375);
}
}
h3 ~ h4 {margin-top: $spacing-unit * 1.35;}
h3 + h4 {margin-top: 0;}
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%;
display: block;
}
.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; max-width: 90%;}
}
}
.post-meta-icons {
width: 1.5em;
height: 1.5em;
padding: 0 .2em;
}