mirror of
https://github.com/foo-dogsquared/website.git
synced 2025-01-31 13:58:05 +00:00
154 lines
2.7 KiB
SCSS
154 lines
2.7 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);
|
|
}
|
|
}
|
|
|
|
h4 ~ h5 {margin-top: $spacing-unit * 1.25;}
|
|
h4 + h5 {margin-top: 0;}
|
|
|
|
h5 {
|
|
@include relative-font-size(1.20);
|
|
|
|
@include media-query($on-laptop) {
|
|
@include relative-font-size(1.120);
|
|
}
|
|
}
|
|
|
|
h5 ~ h6 {margin-top: $spacing-unit * 1.20;}
|
|
h5 + h6 {margin-top: 0;}
|
|
|
|
h6 {
|
|
@include relative-font-size(1.15);
|
|
|
|
@include media-query($on-laptop) {
|
|
@include relative-font-size(1.115);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
} |