colette/src/styl/_base/_typography.styl

A CSS and JS starter kit for 20 Minutes web projects

// Typography
//
// See default typographic styles below:
//
// Markup: typography.twig
//
// Weight: 2
//
// Styleguide: Design.Typography
html
    font-family sans-serif
    font-size 100%
    text-size-adjust 100%

body
    _fontload($fontstack-base)
    font-size 1rem
    line-height _getLh(@font-size)
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale // FF

a
    color inherit
    text-decoration none

h1
h2
h3
h4
h5
h6
    font-family $fontstack-base
    font-weight bold
    line-height _lh(1)

h1
    font-size _rem(21px)
    line-height _getLh(@font-size)

h2
    font-size _rem(17px)
    line-height _getLh(@font-size)

h3
    font-size _rem(14px)
    line-height _getLh(@font-size)

// list
ul
ol
    _mt(1)
    _mb(1)
    padding 0 0 0 1.1em // dots alignment

/* Reset of margin/padding on nested elements */
li p
li ul
    margin-bottom 0
    margin-top 0
    padding-bottom 0
    padding-top 0

//
hr
    margin _lh(2) 0 _lh(4)
    clear both
    background-color currentColor
    border 0
    height 1px

tt
code
kbd
samp
pre
    border-radius _rem(2px)
    font-size 1.2em // em value to make it relative to the context font size

small
    font-size .75em

blockquote
    _fontload($fontstack-secondary, normal, normal)
    position relative
    padding .75em 1.5em 0
    font-style italic
    line-height 1.3

    &:before
        position absolute
        top 0
        left 0
        content '\201C'
        font-family 'Georgia', 'Times New Roman', Times, serif
        font-size 3em
        color var(--color-primary)

/* Tables */
table
    border-collapse collapse
    border-spacing 0
    border-width 0
    empty-cells show
    background-color var(--color-bg-secondary)

thead
    tr
        background-color var(--color-base)
        color var(--color-base-foreground)

td
th
    _p(.5 1)
    word-wrap break-word
    hyphens none
    border-width 0

/* (1) Important : [title] attribut must be present
 * (2) For IE 8/9, Safari 5, and Chrome : they have not default style for this tag
 */
abbr[title] // 1
    text-decoration none
    border-bottom 1px dotted // 2

/* Avoid text overflow forcing return to new line */
textarea
table
td
th
code
pre
samp
div
p
    word-wrap break-word
    hyphens manual

// (1) we keep spaces and carriage return as far as possible
code
pre
samp
    white-space pre-wrap // 1

// a start for responsive: max width and auto height for some native elements
img
table
td
blockquote
code
pre
textarea
input
    height auto
    max-width 100%

code
kbd
samp
    font-family monospace, monospace
    font-size 1em

figure
    margin 0
    padding 0