// Body $base-font-size: 16px; $base-font-style: normal; $base-font-variant: normal; $base-font-weight: normal; $base-font-family: 'Nunito', sans-serif; $base-line-height: 28px;
*, *::after, *::before {
box-sizing: border-box;
}
body {
font-family: $base-font-family; font-size: $base-font-size; line-height: $base-line-height; color: $body-color; background: $background; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; input, textarea { border: $border-color 1px solid; outline: none; &:focus:required:invalid { border-color: $danger; } &:required:valid { border-color: $success; } }
}
::placeholder {
color: #666;
}
*::selection {
color: $white; background-color: $primary-color;
}
// Headings $heading-font-weight: 700; $heading-font-family: 'Nunito', -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif;
$font-size-h1: 36px; $font-size-h2: 28px; $font-size-h3: 24px; $font-size-h4: 20px; $font-size-h5: 18px; $font-size-h6: 16px;
$heading-line-height: 1.2;
h1, h2, h3, h4, h5, h6 {
line-height: initial;
}
h1 {
font-size: $font-size-h1;
}
h2 {
font-size: $font-size-h2;
}
h3 {
font-size: $font-size-h3;
}
h4 {
font-size: $font-size-h4;
}
h5 {
font-size: $font-size-h5;
}
h6 {
font-size: $font-size-h6;
}
// Blockquote blockquote {
padding-left: $base-spacing-unit; border-left: 3px solid $primary-color; font-style: normal;
}
// Pre pre {
overflow: auto; padding: 15px; margin-bottom: 0; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; word-break: break-all;
}
// Images img {
max-width: 100%; height: auto; vertical-align: middle; &+em { text-align: center; display: block; margin-top: 10px; font-weight: normal; font-size: 16px; color: $gray-blue; }
}
// Links a {
text-decoration: none; color: $link-color; transition: $global-transition; &:hover { color: $link-color-hover; }
}
// Hr hr {
display: block; height: 2px; padding: 0; margin: 30px 0; line-height: 0; border: 0; background-color: $border-color;
}
// Blockquote blockquote {
padding: 15px 15px 15px 30px; font-size: 18px; font-style: normal; border-left: 4px solid $primary-color; p { margin-bottom: 0; }
}
// Pre pre {
overflow: auto; padding: 15px; margin-bottom: 0; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; word-break: break-all;
}
// Table .table-container {
max-width: 100%; overflow-x: auto;
}
table {
font-size: 12px; color:$black; width: 100%; border-width: 1px; border-color: $gray-blue; border-collapse: collapse;
}
table th {
padding: 8px; font-size: 16px; text-align: left; border: 1px solid $gray-blue; color: $white; background-color: $primary-color;
}
table tr {
background-color: lighten($primary-color, 45%); transition: all .3s ease; &:nth-child(even) { background-color: $white; }
}
table td {
padding: 8px; font-size: 14px; border: 1px solid $gray-blue;
}
table tr:hover {
background-color: $white;
}