/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-
Base CSS built on a modified Skeleton:
*
-
Skeleton V2.0.4 | Dave Gamache | www.getskeleton.com
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Table of contents ––––––––––––––––––––––––––––––––––––––––––––––––––
-
Typography
-
Links
-
Buttons
-
Forms
-
Lists
-
Code
-
Tables
-
Spacing
-
Utilities
-
Misc
*/
/* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ $modular-scale-ratio: $augmented-fourth; $modular-scale-base: 18px; $base-line-height: 1.6;
body {
@include font-feature-settings("kern", "liga", "pnum"); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color: $text-color; font-family: $base-font-family; font-size: $base-font-size; line-height: $base-line-height;
}
h1, h2, h3, h4, h5, h6 {
font-family: $base-font-family; font-size: $base-font-size; line-height: $base-line-height; font-weight: 400; margin: 0 0 20px; color: $heading-color;
}
h1 {
font-size: modular-scale(3); line-height: 1.25; letter-spacing: -1px;
}
h2 {
font-size: modular-scale(2); line-height: 1.25; letter-spacing: -1px;
}
h3 {
font-size: modular-scale(1); line-height: 1.3; letter-spacing: -0.7px;
}
h4 {
font-size: modular-scale(0); line-height: 1.35; letter-spacing: -0.6px;
}
h5 {
font-size: modular-scale(-1); line-height: 1.5; letter-spacing: -0.5px;
}
h6 {
font-size: modular-scale(-2); line-height: 1.6; letter-spacing: 0;
}
@include media($tablet) {
h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 24px; } h4 { font-size: 18px; } h5 { font-size: 15px; } h6 { font-size: 12px; }
}
@include media($mobile) {
h1 { font-size: 32px; } h2 { font-size: 28px; } h3 { font-size: 24px; } h4 { font-size: 20px; }
}
p {
margin-top: 0; font-size: 18px;
}
p {
@include media($tablet) { @include hyphens(auto); -webkit-hyphenate-limit-before: 2; -webkit-hyphenate-limit-after: 3; -webkit-hyphenate-limit-lines: 2; }
}
/* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: $primary-color; font-size: 18px; text-decoration: none; transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; border-bottom: 1px solid rgba($primary-color, 0); &:hover { color: $primary-color-dark; border-bottom: 1px solid rgba($primary-color, 1); }
}
/* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ #{$all-text-inputs}, select {
box-sizing: border-box;
}
/* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ ul {
list-style: circle inside; }
ol {
list-style: decimal inside; }
ol, ul {
padding-left: 0; margin-top: 0; font-size: 18px;
} ul ul, ul ol, ol ol, ol ul {
margin: 15px 0 15px 30px; font-size: 90%; }
li {
margin-bottom: 10px;
}
/* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code {
padding: 2px 5px; margin: 0 2px; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; }
pre > code {
display: block; padding: 10px 15px; white-space: pre; }
/* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */ th, td {
padding: 12px 15px; text-align: left; border-bottom: 1px solid #E1E1E1; }
th:first-child, td:first-child {
padding-left: 0; }
th:last-child, td:last-child {
padding-right: 0; }
/* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ input, textarea, select, fieldset {
margin-bottom: 15px; }
pre, blockquote, dl, figure, table, p, ul, ol, form {
margin-bottom: 25px; }
/* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ hr {
border-width: 0; border-top: 1px solid $base-border-color; margin: 0;
}
img, picture {
margin: 0; max-width: 100%;
}