$margin-bottom: $spacing * 4 / 5;
html {
color: $text-color; background-color: $background-color; font-family: $font-family; font-size: $font-size; font-weight: $font-weight-normal; font-synthesis: none; font-feature-settings: 'kern'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body {
margin: 0; padding: 0; min-width: $min-body-width; color: $text-color; background-color: $background-color;
}
h1, h2, h3, h4, h5, h6, ul, ol, p, blockquote, pre {
margin: 0; padding: 0;
}
h1, h2, h3, h4, h5, h6 {
color: $text-bright-color;
}
h1 {
font-weight: 700; font-size: $font-size * 2.25; margin-bottom: $spacing / 1.5;
}
h2 {
font-weight: 600; font-size: $font-size * 2; margin-bottom: $spacing / 1.75;
}
h3 {
font-weight: 500; font-size: $font-size * 1.75; margin-bottom: $spacing / 2;
}
h4 {
font-weight: 400; font-size: $font-size * 1.5; margin-bottom: $spacing / 2.25;
}
h5 {
font-weight: 400; font-size: $font-size * 1.25; margin-bottom: $spacing / 2.5;
}
h6 {
font-weight: 400; font-size: $font-size * 1; margin-bottom: $spacing / 2.75;
}
hr {
border: none; border-bottom: 1px solid $border-color; margin-top: $spacing * 1.5; margin-bottom: $spacing * 1.5;
}
strong, b {
font-weight: $font-weight-bold; color: $text-bright-color;
}
p {
margin: 0; padding: 0; margin-bottom: $margin-bottom; line-height: $font-size * 2.25;
}
-
{ + h1 {
margin-top: $spacing * 2.25;
}
+ h2 {
margin-top: $spacing * 1.75;
} + h3 {
margin-top: $spacing * 1.25;
}
+ h4, + h5, + h6 {
margin-top: $spacing * 0.75;
}
}
em {
font-family: $font-family-italic;
}
section {
margin-top: $spacing * 2; @media screen and (max-width: $medium-breakpoint - 1) { margin-top: $spacing; }
}
blockquote {
position: relative; padding-left: $spacing / 1.25; margin-bottom: $spacing * 2 / 3; font-style: italic; font-family: $font-family-italic; letter-spacing: 0.5px; &:before { content: " "; position: absolute; left: 0; top: 7px; bottom: 9px; width: 3px; border-radius: 1px; background-color: $quote-border-color; } p { &:first-child::first-letter { font-size: 1.5 * $font-size; } margin-bottom: 0px; > code::first-letter { font-size: inherit; } }
}
ul {
padding-left: $spacing * 2 / 3; li { margin-bottom: $margin-bottom / 1.5; line-height: $font-size * 1.5; p { margin: 0; line-height: initial; } } ol, ul { margin-top: $margin-bottom / 1.5; }
}
ol {
padding-left: 26px; li { margin-bottom: $margin-bottom / 1.5; line-height: $font-size * 1.5; p { margin: 0; line-height: initial; } } ol, ul { margin-top: $margin-bottom / 1.5; }
}
pre {
padding: $spacing / 3 $spacing / 2; font-family: $font-monospace; font-size: $font-size - 3; font-variant-ligatures: common-ligatures; line-height: round(($font-size - 2) * 1.6); background-color: $code-background-color; margin-bottom: $spacing / 2; border-radius: 4px; code { background-color: transparent; padding: 0; color: $text-color; }
}
code {
padding: ($spacing / 10) round($spacing / 4); border-radius: 4px; background-color: $code-background-color; font-family: $font-monospace; color: $accent-color; word-break: keep-all; word-wrap: break-word; line-height: $font-size * 1.75;
}
table {
width: 100%; border-collapse: collapse; margin-bottom: $margin-bottom; td, th { border: 1px solid $border-color; } td { padding: ($spacing / 2.5) ($spacing / 1.5); } th { color: $text-bright-color; font-weight: $font-weight-bold; padding: ($spacing / 2) ($spacing / 1.5); }
}
a {
position: relative; text-decoration: none; color: $link-color; &:hover { > * { color: $accent-color !important; } } &:visited { color: $link-visited-color; }
}
::selection {
background-color: rgba($accent-color, 0.2) // background-color: #b6c253;
}