/* —————————– */ /* ==Base (basic styles) */ /* —————————– */
/* switching to border-box model for all elements */ html {
box-sizing: border-box;
}
-
{ box-sizing: inherit;
}
html {
/* set base font-size to equiv "10px", which is adapted to rem unit */ font-size: 62.5%; /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ /* thanks to @guardian, @victorbritopro and @eQRoeil */ font-size: calc(1em * 0.625);
}
body {
font-size: $base-font-size; background-color: $base-background; color: $base-color; font-family: $font-stack-common; line-height: $line-height;
}
a {
color: $base-color-link; &:hover, &:focus, &:active { color: $base-color-link-hover; }
}
ul, ol {
padding-left: 2em;
}
img {
vertical-align: middle;
}
blockquote, figure {
margin-left: 0; margin-right: 0;
}
/* font-sizing for content */ p, .#{$kna-namespace}p-like, ul, ol, dl, blockquote, pre, td, th, label, textarea, caption, details, figure {
margin-top: 0.75em; margin-bottom: 0; line-height: $line-height;
}
h1, .#{$kna-namespace}h1-like {
font-size: $h1-size; font-family: $font-stack-headings;
}
h2, .#{$kna-namespace}h2-like {
font-size: $h2-size; font-family: $font-stack-headings;
}
h3, .#{$kna-namespace}h3-like {
font-size: $h3-size;
}
h4, .#{$kna-namespace}h4-like {
font-size: $h4-size;
}
h5, .#{$kna-namespace}h5-like {
font-size: $h5-size;
}
h6, .#{$kna-namespace}h6-like {
font-size: $h6-size;
}
/* alternate font-sizing */ .#{$kna-namespace}smaller {
font-size: 0.6em;
}
.#{$kna-namespace}small {
font-size: 0.8em;
}
.#{$kna-namespace}big {
font-size: 1.2em;
}
.#{$kna-namespace}bigger {
font-size: 1.5em;
}
.#{$kna-namespace}biggest {
font-size: 2em;
}
code, pre, samp, kbd {
/* IE fix */ white-space: pre-line; white-space: pre-wrap; font-family: $font-stack-monospace; line-height: normal;
}
em, .#{$kna-namespace}italic, address, cite, i, var {
font-style: italic;
}
/* avoid top margins on first content element */ p, .#{$kna-namespace}p-like, ul, ol, dl, blockquote, pre, h1, .#{$kna-namespace}h1-like, h2, .#{$kna-namespace}h2-like, h3, .#{$kna-namespace}h3-like, h4, .#{$kna-namespace}h4-like, h5, .#{$kna-namespace}h5-like, h6, .#{$kna-namespace}h6-like {
&:first-child { margin-top: 0; }
}
/* avoid margins on nested elements */ li p, li .#{$kna-namespace}p-like, li ul, li ol {
margin-top: 0; margin-bottom: 0;
}
/* max values */ img, table, td, blockquote, code, pre, textarea, input, video, svg {
max-width: 100%;
}
img {
height: auto;
}