blog/_src/_assets/styl/code.styl

//
// kremalicious3
// --------------
// Code
//

code,
kbd,
pre,
samp
    font-family: $font-family-monospace
    font-size: $font-size-mini
    @media $breakpoint3
        font-size: $font-size-small
    hyphens: none

code,
kbd
    padding: 2px 4px

code
    color: darken($code-color, 40%)
    background-color: rgba($code-bg, 10%)
    border-radius: $border-radius-base
    white-space: nowrap
    word-wrap: normal

kbd
    color: $kbd-color
    background-color: $kbd-bg
    border-radius: $border-radius-small
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25)

pre
    display: block
    padding: 8px 12px
    margin: 0 0 $line-height-computed
    line-height: $line-height-base
    color: $code-color
    background-color: $code-bg
    border-radius: $border-radius-base

    // make 'em scrollable
    overflow: scroll
    -webkit-overflow-scrolling: touch
    max-height: 300px

    @media $breakpoint2
        max-height: 500px

    // Account for some code outputs that place code tags in pre tags
    code
        padding: 0
        font-size: inherit
        color: inherit
        white-space: pre
        background-color: transparent
        border-radius: 0

code.bash
    padding-left: 1.5em
    display: block

    &:before
        content: "$"
        color: $text-color-dimmed
        display: inline-block
        margin-left: -1.5em
        margin-right: .8em