/*
* Base. These are element styles — no classes or IDs. Base typography styles go here, as well as anything needed to style raw elements. * See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.tbp9yocm3 for details. */
html {
font-size: $fontSize; // body-border shenanigans from https://css-tricks.com/body-border/ body:before, body:after { content: ""; position: fixed; background: $material500; left: 0; right: 0; height: 5px; } body:before { top: 0; } body:after { bottom: 0; } body { font-family: $systemSansSerif; line-height: $lineHeight; max-width: $maxWidth; margin: $margin; padding: $padding; color: $materialGray900; background-color: $materialWhite; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; h1, h2, h3, h4, h5, h6 { color: $material900; line-height: $headingLineHeight; font-family: $systemSerif; } code, pre { font-family: $systemMonospace; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, %vertical-rhythm { margin-bottom: $spacing-unit / 2; } /** * Blockquotes */ blockquote { color: $material700; border-left: 4px solid $material200; padding-left: $spacing-unit / 2; font-style: italic; > :last-child { margin-bottom: 0; } } footer { font-size: .75rem; } /** * Code formatting */ pre { margin-left: 0; margin-right: 0; padding: .25rem; width: 100%; max-width: 100%; border: 1px solid $material200; background-color: $materialWhite; overflow: auto; } form, figure { margin-left: 0; margin-right: 0; border-width: 1px; border-style: solid; padding: .5rem; max-width: 100%; } figcaption { font-size: .85rem; text-align: right; } img, iframe { max-width: 100%; vertical-align: middle; border: 1px solid $material300; } nav { width: 100%; ul { list-style: none; padding: 0px; margin: 0px; li { line-height: 2; } } } }
}