/*
Resets
*/
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {
margin: 0; padding: 0;
}
/*
Basic styling
*/
html {
font-size: 16px;
}
body {
background-color: var(--color-body); font-family: var(--font); line-height: 1.5;
}
/*
Accessibility helpers
*/ .visually-hidden {
position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
/*
Text Elements
*/
.content-body {
p, pre, blockquote, dl, ul, ol, figure, iframe, table, .highlight { margin-bottom: var(--gap); }
}
// Links a {
color: var(--color-link); text-decoration: none; transition: color 250ms ease; &:hover, &:focus { color: var(--color-link-hover); text-decoration: underline; }
}
// Lists ul, ol {
margin-left: var(--gap); ul, ol { margin-bottom: 0; }
}
dl {
dt + dd { margin-bottom: calc(var(--gap) / 2); } dt + dd + dt { margin-top: calc(var(--gap) / 2); }
}
// Headings h1, h2, h3, h4, h5, h6 {
line-height: 1.2; font-family: var(--font-headings);
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: 0.875rem;
}
h6 {
font-size: 0.75rem;
}
// Code pre {
max-width: 100%; overflow-x: auto;
}
// Media img, iframe, video, audio {
max-width: 100%; border-radius: 3px; box-shadow: 0 2px 5px var(--color-details);
}
// Tables table {
border: 1px solid var(--color-details-lighter); border-radius: 3px; border-collapse: collapse; color: var(--color-details-darker); width: 100%; th, td { border-bottom: 1px solid var(--color-details-lighter); padding: calc(var(--gap) / 4); text-align: left; } th { background: var(--color-details-lighter); }
}
// Quotes
blockquote {
border-left: 4px solid var(--color-details-lighter); padding-left: calc(var(--gap) / 2); padding-top: calc(var(--gap) / 4); padding-bottom: calc(var(--gap) / 4); font-style: italic; color: var(--color-details-darker); > :last-child { margin-bottom: 0; }
}
// Horizontal rule hr {
width: 250px; height: 3px; margin: calc(var(--gap) * 2) auto; background-color: var(--color-details-lighter); border: none; border-radius: 3px;
}
// Forms input, input, input, input, input, input, input, input, input, input, input, textarea, button {
-webkit-appearance: none; -moz-appearance: none; border: none; border-radius: 0; box-shadow: none; background: var(--color-bg); padding: 5px; margin: 0; font: inherit;
}
input, input, input, input, input, input, input, input, textarea {
border-bottom: 3px dashed var(--color-details-lighter); transition: border-bottom-color 250ms ease; &:hover, &:focus { outline: none; border-bottom-color: var(--color-link); }
}
box-shadow: inset 0 0 0 var(--color-details-lighter); border-bottom: 3px solid var(--color-details-lighter); color: var(--color-link); transition-property: color, box-shadow, border-bottom-color; transition-duration: 250ms; transition-timing-function: ease; padding-left: 10px; padding-right: 10px; &:hover, &:focus { cursor: pointer; box-shadow: inset 0 -2.5em 0 var(--color-link); border-bottom-color: var(--color-link-hover); color: var(--color-details-lighter); } &:active { box-shadow: inset 0 -2.5em 0 var(--color-link-hover); }
}