1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-06-16 17:43:14 +02:00
blog/src/components/atoms/PostContent.module.scss
2018-08-08 23:52:43 +02:00

91 lines
1.6 KiB
SCSS

@import 'variables';
@import 'mixins';
.content {
h1,
h2 {
@include heading-band();
}
h1 {
font-size: $font-size-h2;
}
h2 {
font-size: $font-size-h3;
}
h3 {
font-size: $font-size-h4;
}
h4 {
font-size: $font-size-h5;
}
p:last-child {
margin-bottom: 0;
}
.gatsby-resp-image-figure,
.gatsby-resp-image-wrapper {
margin-bottom: $spacer;
}
figcaption {
font-size: $font-size-small;
color: $brand-grey;
font-style: italic;
text-align: center;
margin-top: -$spacer / 2;
}
.anchor {
margin-top: $spacer / 3;
}
// Quotes
/////////////////////////////////////
q {
font-style: italic;
}
cite {
font-style: normal;
text-transform: uppercase;
}
// stylelint-disable no-descending-specificity
blockquote,
blockquote > p {
font-style: italic;
color: $brand-grey;
}
// stylelint-enable no-descending-specificity
blockquote {
margin: 0 0 $spacer;
position: relative;
padding-left: $spacer * 1.5;
// quotation marks
&::before {
content: '';
font-size: 300%;
color: lighten($brand-grey-light, 20%);
position: absolute;
left: -10px;
top: -20px;
@media (min-width: $screen-xs) {
left: 0;
}
@media (min-width: $screen-lg) {
top: -30px;
}
}
}
}