/* Typography.scss
* Headings, body text, lists, code, and more for a versatile and durable typography system * ---------------------------------------------------------------------------------------- */
// BODY TEXT // ———
p {
@include shorthand-font(normal,$basefont,$baseline); margin-bottom: $baseline / 2; small { font-size: $basefont - 2; color: $gray; }
}
// HEADINGS // ——–
@mixin header-base {
font-family: $sans-headers; line-height: normal; small { font-weight: normal; color: $grayLight; }
}
h1, .h1 {
@include header-base; font-size: 30px; font-weight: 400; &.header { text-transform: uppercase; font-size: 1.3em; letter-spacing: 0.15em; padding: 6px 0; margin-bottom: 16px; } &.indented { padding-left: 8px !important; } &.subpage_header { font-size: 3em; margin-bottom: 8px !important; } small { font-size: 18px; }
}
h2, .h2 {
@include header-base; font-size: 24px; small { font-size: 18px; }
}
h3, .h3 {
@include header-base; font-size: 18px; small { font-size: 14px; }
}
h4, .h4 {
@include header-base; font-size: 16px; small { font-size: 12px; }
}
h5, .h5 {
@include header-base; font-size: 14px;
}
h6, .h6 {
@include header-base;
}
h7, .h7 {
@include header-base;
}
.header-with-icon {
border-bottom: solid 1px #ccc; [class^="concertocon-header-"], [class*=" concertocon-header-"] { background-color: $white; margin-top: -10px; margin-bottom: -10px; margin-right: 12px; } h3 { padding-top: 10px; } .pagination-cont { float: left; padding-top: 8px; margin-left: 35px; }
}
.color-gray { color: $gray; }
// Unordered and Ordered lists ul, ol {
margin: 0 0 $baseline 25px;
} ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
} ul {
list-style: disc;
} ol {
list-style: decimal;
} li {
line-height: $baseline;
} ul.unstyled {
list-style: none; margin-left: 0;
}
// Description Lists dl {
margin-bottom: $baseline; dt, dd { line-height: $baseline; } dt { font-weight: bold; } dd { margin-left: $baseline / 2; }
}
// MISC // —-
// Horizontal rules hr {
margin: 20px 0 19px; border: 0; border-bottom: 1px solid #eee;
}
// Emphasis strong {
font-style: inherit; font-weight: bold;
} em {
font-style: italic; font-weight: inherit; line-height: inherit;
} .muted {
color: $grayLight;
}
// uppercase .uppercase {
text-transform: uppercase; letter-spacing: 0.15em;
}
// Blockquotes blockquote {
margin-bottom: $baseline; border-left: 5px solid #eee; padding-left: 15px; p { @include shorthand-font(300,14px,$baseline); margin-bottom: 0; } small { display: block; @include shorthand-font(300,12px,$baseline); color: $grayLight; &:before { content: '\2014 \00A0'; } }
}
// Inline and block code styles code, pre {
padding: 0 3px 2px; font-family: Monaco, Andale Mono, Courier New, monospace; font-size: 12px; @include border-radius(3px);
} code {
background-color: lighten($orange, 40%); color: rgba(0,0,0,.75); padding: 1px 3px;
} pre {
background-color: #f5f5f5; display: block; padding: ($baseline - 1) / 2; margin: 0 0 $baseline; line-height: $baseline; font-size: 12px; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); @include border-radius(3px); white-space: pre; white-space: pre-wrap; word-wrap: break-word;
}
// LABELS // ——
.label {
padding: 4px; font-size: $basefont * .75; font-weight: bold; color: $white; white-space: nowrap; background-color: darken($gray, 5%); &.important { background-color: #c43c35; } &.warning { background-color: $orange; } &.success { background-color: $green; } &.notice { background-color: lighten($blue, 25%); } a { color: $white; }
}