html {
box-sizing: border-box; font-size: 62.5%;
}
*, *::before, *::after {
box-sizing: inherit;
}
html, body, p, ul, ol, dl, blockquote, pre, figure, table, iframe, audio, video, embed, h1, h2, h3, h4, h5, h6 {
margin: 0; padding: 0;
}
body {
background-color: $color-background; font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; color: $color-text; margin-top: 64px;
}
img {
max-width: 100%;
}
/*
Text Elements
*/
p, ul, ol, dl, blockquote, pre, figure, table, iframe, h1, h2, h3, h4, h5, h6 {
&:not(:last-child) { margin-bottom: $spacing-unit; }
}
strong, b, th {
font-weight: bold;
}
em, i, blockquote {
font-style: italic;
}
// Lists ul, ol {
margin-left: $spacing-unit; ul, ol { margin-bottom: 0; }
}
ul {
list-style: square; ul { list-style: disc; }
}
ol {
list-style: decimal; ol { list-style: lower-alpha; }
}
// Headings h2 {
text-align: center;
}
// Tables
table {
width: 100%; @include relative-font-size(0.875); overflow-x: auto; @include media-query($on-palm) { display: block; } th, td { text-align: right; padding: $spacing-unit / 4; &:first-child { text-align: left; @include media-query($on-palm) { min-width: 180px; } } } th { border-bottom: 1px solid $color-details; }
}
// Links a {
color: $color-accent; transition: color 250ms ease; font-weight: 500; text-decoration: none; &:hover, &:focus { text-decoration: underline; }
}
// Horizontal rule
hr {
border: none; display: block; content: " "; width: 50px; height: 4px; border-radius: 2px; background-color: $color-details; margin: $spacing-unit * 2 auto;
}
/*
Forms
*/
font: inherit; color: inherit; background: $color-background; border: 2px solid $color-details; border-radius: 6px; padding: $spacing-unit / 4; transition: border-color 250ms ease; display: block; width: 100%; max-width: $on-palm; &:focus, &:active { border-color: $color-accent; outline: none; }
}
textarea {
min-height: 150px; resize: none;
}
label {
font-weight: 700; @include relative-font-size(0.875);
}
button {
-webkit-appearance: none; appearance: none; padding: $spacing-unit / 4 $spacing-unit / 2; background-color: $color-background; color: $color-text; border: 2px solid $color-details; border-radius: 6px; font: inherit; font-weight: 700; transition-property: background-color, border-color, color; transition-timing-function: ease; transition-duration: 250ms; cursor: pointer; @include media-query($on-palm) { display: block; margin-left: auto; margin-right: auto; } &:hover, &:focus { background-color: $color-accent; border-color: $color-accent; color: $color-background; }
}