src/_Text.scss
html {
box-sizing: border-box;
// The base font-size is set at 62.5% for having the convenience
// of sizing rems in a way that is similar to using px. 1.6rem=16px
font-size: 62.5%;
}
body {
color: $foreground-color;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-weight: 400;
letter-spacing: .01em;
}
@mixin reset {
// Set box-sizing globally to handle padding and border widths
box-sizing: inherit;
font-size: 1.5rem;
line-height: 1.6;
// Include a basic reset as many text elements have spacing which interferes with the vertical flow.
margin: 0;
padding: 0;
}
// Reset options
* {
@include reset;
::after,
::before {
@include reset;
}
}
// Link styling
a {
&:link,
&:visited,
&:hover,
&:active {
color: $theme-color;
}
:hover {
text-decoration: none;
}
}
// Header styling
h1 {
background-color: $background-color-shaded;
border-bottom: .1rem solid $theme-color;
font-size: 3rem;
font-weight: 100;
margin: 2.4rem 0 - $gutter-width 2.3rem;
padding: 0 $gutter-width;
}
h2,
h3,
h4,
h5,
h6 {
display: inline-block; // Prevent margins collapsing.
min-width: 100%;
}
h2 {
font-size: 2.2rem;
margin-top: 1.3rem;
}
h3 {
font-size: 2rem;
margin-top: 1.6rem;
}
h4 {
font-size: 1.8rem;
margin-top: 2rem;
}
h5 {
font-size: 1.6rem;
margin-top: 2.3rem;
}
h6 {
font-size: 1.4rem;
margin-top: 1.3rem;
}
// Text element styling
p {
margin-bottom: 2.4rem;
}
small {
color: $foreground-color-lightened;
font-size: .75em;
}
// List styling
ul,
ol {
display: inline-block;
margin-bottom: 2.4rem;
margin-left: $gutter-width * 3;
}
// Code styling, both inline and multi-line
@mixin code-font {
background-color: $theme-color-light;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
code {
@include code-font;
font-size: .9em;
padding: 0 .3em;
}
pre {
@include code-font;
display: block;
code {
@include code-font;
display: block;
font-size: 1.5rem;
margin: 0 1.2rem;
padding: 1.2rem;
}
}