diff options
1 files changed, 64 insertions, 35 deletions
| -rw-r--r-- | src/typography.less | 99 |
diff --git a/src/typography.less b/src/typography.less index 246fef7..3cae94b 100644 --- a/src/typography.less +++ b/src/typography.less @@ -1,4 +1,5 @@ // Typography +// Headings h1, h2, h3, @@ -6,42 +7,78 @@ h4, h5, h6 { color: inherit; - font-weight: 300; + font-weight: 500; line-height: 1.2; - margin-bottom: 1.5rem; + margin-bottom: .5em; margin-top: 0; } -h1 { - font-size: 5rem; +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-weight: 500; } -h2 { - font-size: 4rem; +h1, +.h1 { + font-size: 2rem; } -h3 { - font-size: 3rem; +h2, +.h2 { + font-size: 1.6rem; } -h4 { - font-size: 2.4rem; +h3, +.h3 { + font-size: 1.4rem; } -h5 { - font-size: 2rem; +h4, +.h4 { + font-size: 1.2rem; } -h6 { - font-size: 1.6rem; +h5, +.h5 { + font-size: 1rem; +} +h6, +.h6 { + font-size: .8rem; } + +// Paragraphs p { - line-height: 2.4rem; - margin: 0 0 1rem; + line-height: 1.2 * @line-height; + margin: 0 0 @unit-4; } + +// Semantic text elements a, ins, u { text-decoration-skip: ink edges; } + +abbr[title] { + border-bottom: @border-width dotted; + cursor: help; + text-decoration: none; +} + +kbd { + .label-base(); + .label-variant(@light-color, @dark-color); +} + +mark { + .label-base(); + .label-variant(@body-font-color, @highlight-color); +} + +// Blockquote blockquote { - border-left: .2rem solid @border-color; + border-left: @border-width-lg solid @border-color; margin-left: 0; - padding: 1rem 2rem; + padding: @unit-2 @unit-4; p:last-child { margin-bottom: 0; @@ -51,20 +88,23 @@ blockquote { color: @gray-color; } } + +// Lists ul, ol { - margin: 2rem 0 2rem 2rem; + margin: @unit-4 0 @unit-4 @unit-4; padding: 0; ul, ol { - margin: 1.5rem 0 1.5rem 2rem; + margin: @unit-4 0 @unit-4 @unit-4; } li { - margin-top: 1rem; + margin-top: @unit-2; } } + ul { list-style: disc inside; @@ -72,6 +112,7 @@ ul { list-style-type: circle; } } + ol { list-style: decimal inside; @@ -79,24 +120,12 @@ ol { list-style-type: lower-alpha; } } + dl { dt { font-weight: bold; } dd { - margin: .5rem 0 1.5rem 0; + margin: @unit-2 0 @unit-4 0; } } -mark { - .label-base(); - .label-variant(@body-font-color, @highlight-color); -} -kbd { - .label-base(); - .label-variant(@light-color, @dark-color); -} -abbr[title] { - border-bottom: .1rem dotted; - cursor: help; - text-decoration: none; -} |