//// /// Very basic styles ////
html, body {
box-sizing: border-box; margin: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
// Images // ————————-
img {
max-width: 100%; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic;
}
// We need to revert these for Google maps cause else it breaks! %img–no-max, .img–no-max {
max-width: none;
}
// Figures // ————————-
figure > img {
display: block;
}
figcaption {
font-size: $smaller;
}
// Links // ————————-
a {
text-decoration: underline; color: $link-color; &:visited { color: $link-color; } &:hover { text-decoration: none; } &:focus { outline: thin dotted; } &:hover, &:active { outline: none; }
}
// Lists // ————————-
ul,ol {
margin-bottom: $base-line; li { margin-bottom: 0.5rem; }
}
// List options // ————————-
// Unstyled keeps list items block level, just removes default browser padding and list-style .list-unstyled {
padding-left: 0; list-style: none;
}
// Inline turns list items into inline-block .list-inline {
@extend .list-unstyled; > li { display: inline-block; margin: 0 -5px 0 0; }
}
// Description Lists // ————————-
dl {
margin-top: 0; // Remove browser default margin-bottom: $base-line;
} dt, dd {
line-height: $line-height-base;
} dt {
font-weight: bold;
} dd {
margin-left: 0; // Undo browser default
}
// Blockquotes // ————————-
blockquote, blockquote p, q {
color: $color-grey;
}
blockquote {
padding-left: $base-line / 2; font-size: $base-em * $ms1; letter-spacing: -1px; border-left: 4px solid $color-grey; > :last-child { margin-bottom: 0; }
}
blockquote cite {
display: block; color: $color-grey-dark;
}
blockquote cite:before {
content: "\2014 \0020";
}
blockquote cite a, blockquote cite a:visited {
color: $color-grey-dark;
}
// Code formatting // ————————-
pre, code {
font-size: 15px; border: 1px solid $color-grey-light; border-radius: 3px; background-color: #eef;
}
code {
padding: 1px 5px;
}
pre {
overflow-x: scroll; padding: 8px 12px; > code { padding-right: 0; padding-left: 0; border: 0; }
}
table {
width: 100%; table-layout: fixed; border: 1px solid #ccc; > thead, > tbody, > tfoot { > tr { > th, > td { border: 1px solid #ccc; } } } > thead > tr { > th, > td { border-bottom-width: 2px; } }
}