// Colors $navy: #001f3f; $blue: #0074D9; $aqua: #7FDBFF; $teal: #39CCCC; $olive: #3D9970; $green: #2ECC40; $lime: #01FF70; $yellow: #FFDC00; $orange: #FF851B; $red: #FF4136; $maroon: #85144b; $fuchsia: #F012BE; $purple: #B10DC9; $black: #212121; $gray: #AAAAAA; $silver: #DDDDDD; $white: #FFFFFF;
/* CSS Reset */
html {
box-sizing: border-box; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0; padding: 0; font-weight: normal;
}
/* Lists */
ul {
list-style: circle inside;
}
ol {
list-style: decimal inside;
}
li {
margin-bottom: .5rem;
}
li > ul, li > ol {
margin: 1rem 0 1rem 1rem;
}
img {
max-width: 100%; height: auto;
}
body {
line-height: 1; color: $black;
}
// Headers h1 {font-size: 3rem;} h2 {font-size: 2.5rem;} h3 {font-size: 2rem;} h4 {font-size: 1.75rem;} h5 {font-size: 1.5rem;} h6 {font-size: 1.25rem;} h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
}
/* Forms and buttons */
input:not():not():not():not():not(), optgroup, select, textarea {
font-family: inherit; font-size: 100%; margin: 0; margin-bottom: 1rem; background: #FFFFFF; padding: .2rem .4rem; color: $black; border: 1px solid $gray; border-radius: .2rem; display: block; transition: border-color 0.2s ease; width: 100%; &:focus { border-color: $blue; } &:disabled {background-color: $silver} &:invalid { border: 1px solid $red; box-shadow: none; }
}
label, legend {
display: block; margin-bottom: .5rem;
}
input:not():not(), select, button {
height: 2rem; display: inline-block;
}
input:not():not() {
height: 2rem; display: inline-block; -webkit-appearance: none;
}
fieldset {
border: 1px solid $silver; border-radius: .2rem;
}
/* Buttons */
button, *[type=submit], *[type=reset] {
background-color: $blue; border-radius: .1rem; color: $white; padding: 0 2rem; display: inline-block; border: 0; transition: background-color .3s ease; &:hover { background-color: $aqua; }
}
a {
color: $blue; text-decoration: none; transition: color .5s ease; &:hover {color: $black}
}
/* Tables */
table {
width: 100%; border-collapse: collapse; table-layout: fixed; margin: 10px 0; td, th { padding: 5px; line-height: 150%; border-top: 1px solid $gray; border-bottom: 1px solid $gray; text-align: left; }
}
/* Blockquote and pre */
blockquote, pre {
font-family: monospace; background-color: $black; color: $gray; border-radius: 3px; padding: 1rem; margin: 0;
}
pre {
white-space: pre-wrap;
}
ul, ol, p, table, blockquote, form, blockquote, pre, video, audio, fieldset, h1, h2, h3, h4, h5, h6 {
margin-bottom: 1.5rem;
}
video, audio {
width: 100%; max-width: 1280px; height: auto; display: block;
}
audio {
max-width: 640px;
}