// ============================================================================= // Base // =============================================================================
// Document // =============================================================================
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: $base-font-size;
}
body {
margin: 0 auto; font-family: $base-font-family; -webkit-font-smoothing: antialiased; font-weight: $base-font-weight; line-height: $base-line-height; color: $base-font-color; background: $body-background;
}
// Typography // =============================================================================
p {
margin: 0; font-weight: $base-font-weight;
}
b, strong {
font-weight: $base-font-weight-bold;
}
h1, h2, h3, h4, h5, h6 {
margin: 0; line-height: 1.5; text-rendering: optimizeLegibility;
}
h1 {
font-size: $base-font-size * 1.6; font-weight: 400; letter-spacing: -.03em; color: $article-header-title-color;
}
h2 {
font-size: $base-font-size * 1.5; font-weight: 400;
}
h3 {
font-size: $base-font-size * 1.3; font-weight: 500;
}
h4 {
font-size: $base-font-size * 1.1; font-weight: 500;
}
h5 {
font-size: $base-font-size * 1.17; font-weight: 500;
}
h6 {
font-size: $base-font-size;
}
@include breakpoint(small) {
h1 { font-size: $base-font-size * 1.5; } h2 { font-size: $base-font-size * 1.35; } h3 { font-size: $base-font-size * 1.25; }
}
a {
color: $base-accent-color; text-decoration: underline; transition: color $base-transition-speed linear; &:hover, &:active { color: $base-accent-highlighted-color; } &:focus { color: $base-accent-highlighted-color; outline: none; }
}
ul, ol {
padding-left: 40px; margin: 0;
}
abbr {
cursor: help; border-bottom: 1px dotted $base-border-color;
}
blockquote {
padding: 0 0 4px 15px; margin: 0 0 0 -20px; font-family: $sans-serif; font-size: 20px; font-style: italic; line-height: 1.6; color: $gray-light; border-left: 3px solid $gray-dark;
}
// Other // =============================================================================
hr {
margin: 0; border-top: 0; border-right: 0; border-bottom: 1px solid $base-border-color; border-left: 0;
}
img {
display: block; max-width: 100%; margin: 0;
}
::selection {
color: $white; background-color: $gray-darkest;
}