124 lines
2.1 KiB
SCSS
124 lines
2.1 KiB
SCSS
////////////////////
|
|
// Post Typography
|
|
////////////////////
|
|
|
|
// Bump of base font size for a comfortable reading experience
|
|
.post-content {
|
|
// actually 17.875px
|
|
font-size: rem-calc(22px);
|
|
// make sure really long words and links wrap
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
|
|
@media (min-width: $bp-lg) {
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
// Headings
|
|
// Add extra margin to all headings
|
|
.post-content h1,
|
|
.post-content h2,
|
|
.post-content h3,
|
|
.post-content h4,
|
|
.post-content h5,
|
|
.post-content h6 {
|
|
margin: 1.75em 0 .75em 0;
|
|
}
|
|
|
|
// Body
|
|
// Add extra margin to body text
|
|
p,
|
|
ul,
|
|
ol {
|
|
margin: 0 0 1.25em 0;
|
|
font-style: normal;
|
|
}
|
|
|
|
// Links
|
|
// Make sure all links have visible underlines
|
|
.post-content a {
|
|
@extend.link-inline;
|
|
}
|
|
|
|
// Unordered list
|
|
.post-content ul,
|
|
.post-content ol {
|
|
padding-left: 1.5em;
|
|
|
|
li {
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
li p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Blockquote
|
|
.post-content blockquote {
|
|
margin: 0 0 2em 0;
|
|
padding: 1.25em;
|
|
font-size: .85em;
|
|
line-height: 1.7;
|
|
border: 1px solid $border-color;
|
|
@extend .monospace;
|
|
@extend .rounded;
|
|
@extend .shadow;
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
////////////////////
|
|
// Post Images
|
|
////////////////////
|
|
|
|
.post-content img {
|
|
display: block;
|
|
margin: 1.5em auto;
|
|
border: 1px solid $border-color;
|
|
@extend .shadow;
|
|
@extend .rounded;
|
|
}
|
|
|
|
////////////////////
|
|
// Code Highlighter
|
|
////////////////////
|
|
|
|
// Inline code
|
|
.post-content code.highlighter-rouge {
|
|
display: inline-block;
|
|
margin: 0 .25em;
|
|
padding: 0 .5em;
|
|
font-size: .75em;
|
|
border: 1px solid $border-color;
|
|
border-radius: $border-radius-sm;
|
|
@extend .monospace;
|
|
@extend .shadow-sm;
|
|
}
|
|
|
|
// Full width code boxes
|
|
.post-content div.highlight {
|
|
margin-bottom: 1.5em;
|
|
padding: 1em;
|
|
font-size: .75em;
|
|
line-height: 1.5;
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch; // for iOS momentum scrolling
|
|
@extend .rounded;
|
|
|
|
pre {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
////////////////////
|
|
// Horizontal Rule
|
|
////////////////////
|
|
|
|
.post-content hr {
|
|
@extend .fancy-line;
|
|
}
|