<commit_before>@import compass/css3/box-shadow
@import compass/css3/images
@import compass/css3/transition
@import compass/css3/transform

@import partials/media_queries
@import partials/image_2x
@import colors

@import "design/*.png"

$CONTENT_MAX_WIDTH: 960px
$MENU_WIDTH: 180px

=clearfix
    &::after
        content: ' '
        display: block
        clear: both

=shadow
    +box-shadow(0 0 5px rgba(black, 0.5))


body > *
    box-sizing: border-box

html
    -webkit-text-size-adjust: 100%
    -ms-text-size-adjust: 100%

body
    background: $COLOR_BG
    font-family: Roboto, Helvetica, Arial, sans-serif
    padding: 0.5em

    +desktop-and-up
        width: $CONTENT_MAX_WIDTH
        margin: 0 auto

    color: $COLOR_TEXT

h1, h2, h3, h4
    margin-top: 0
    margin-bottom: 0.3em

h1
    font-size: 2rem

h2, h3, h4
    font-weight: normal

ul
    margin: 0
    padding: 0

li
    margin: 0
    padding: 0

a
    text-decoration: none
    color: $COLOR_TEXT

    &:hover
        color: $HOLO_BLUE_ACTIVE

// Header
[role=banner]
    a
        color: $COLOR_TEXT

        &:hover
            color: $HOLO_BLUE_ACTIVE

    .logo
        +tablet-portrait-and-up
            float: left
            border-right: 1px solid $COLOR_BORDER

        line-height: 48px
        height: 48px
        width: $MENU_WIDTH

        .icon
            display: inline-block
            width: 48px
            height: 48px
            +image-2x('logo.png', 48px, 48px)

        span
            vertical-align: top
            margin-left: 1em
            letter-spacing: 0.2

    .content
        +desktop-and-up
            width: $CONTENT_MAX_WIDTH

        padding: 1em 0
        border-bottom: 1px solid $HOLO_BLUE

[role=navigation]
    +clearfix
    line-height: 48px
    position: relative

    .main-menu
        margin: 0
        padding: 0
        list-style: none

        +tablet-portrait-and-up
            float: left

        li
            +tablet-portrait-and-up
                display: inline-block
                margin-left: 1em

            +tablet-portrait-and-below
                display: block

            &.active a
                color: $HOLO_BLUE

    .overflow
        position: absolute
        right: 8px
        top: design-sprite-height('icon_more') - (48px / 2)
        display: block

        &:hover
            +shadow

        .icon
            +design-sprite('icon_more')
            display: block
            width: design-sprite-width('icon_more')
            height: design-sprite-height('icon_more')

    .overflow-menu
        +transition-timing-function(ease)
        +transition-property(opacity, height)
        +transition-duration(0)

        position: absolute
        right: 0
        opacity: 0
        height: 48px
        width: 48px
        // Important, does trigger unfold otherwise when hidden
        overflow: hidden
        z-index: 5

        &:hover
            +transition-duration(0.25s)
            opacity: 1
            // Hard-coded for animations. :(
            height: 141px
            width: design-sprite-width('more_mid')

        ul
            list-style: none

        li
            &:not(:last-child)::after
                border-top: 1px solid $COLOR_BORDER
                // Values are based on the images and their paddings
                position: relative
                left: -12px
                width: 260px
                content: ""
                display: block

        a
            display: block

        .top
            +design-sprite('more_top')
            width: design-sprite-width('more_top')
            height: design-sprite-height('more_top')

        .mid
            background: image_url('design/more_mid.png') repeat-y
            padding: 0 1em

        .bottom
            +design-sprite('more_bottom')
            width: design-sprite-width('more_bottom')
            height: design-sprite-height('more_bottom')


#main
    margin-top: 1em

    +tablet-landscape-and-up
        margin-left: $MENU_WIDTH

    .content
        +tablet-landscape-and-up
            padding-left: 1em

    a
        color: $HOLO_BLUE

[role=main]
    min-height: 480px

[role=contentinfo]
    color: $COLOR_TEXT_LIGHT

    p
        margin: 0.25em 0 0 0

    ul
        list-style: none

    li
        font-size: smaller
        display: inline-block

        &:before
            margin-right: 3px
            content: '|'

        &:first-child:before
            margin-right: 0
            content: ''

    .inner
        border-top: 1px solid $COLOR_BORDER

.side-menu
    margin-top: 1em

    +tablet-portrait-and-up
        width: $MENU_WIDTH
        float: left

    ul
        list-style: none

    li
        line-height: 2em

    a
        display: block

    .header
        position: relative

        > a::after
            +design-sprite('disclosure')
            width: design-sprite-width('disclosure')
            height: design-sprite-height('disclosure')
            display: block
            content: ""

            position: absolute
            top: 0
            right: 0

        &.expanded
            background: $COLOR_HIGHLIGHT

            > a::after
                +rotate(180deg)

            ul
                display: block
                background: $COLOR_BOX

        &.active > a
            color: $HOLO_BLUE

        > a
            font-weight: 700
            padding: 0 10px

        ul
            display: none

        li
            padding: 0 10px

            &:first-child
                border-top: 1px solid $COLOR_BG
<commit_msg>CSS3 calc() is awesome<commit_after>@import compass/css3/box-shadow
@import compass/css3/images
@import compass/css3/transition
@import compass/css3/transform

@import partials/media_queries
@import partials/image_2x
@import colors

@import "design/*.png"

$CONTENT_MAX_WIDTH: 960px
$MENU_WIDTH: 180px
$HEADER_HEIGHT: 48px

=calc($property, $expression)
    $experimental-support-for-opera: true
    +experimental-value($property, "calc(#{$expression})")

=clearfix
    &::after
        content: ' '
        display: block
        clear: both

=shadow
    +box-shadow(0 0 5px rgba(black, 0.5))


body > *
    box-sizing: border-box

html
    -webkit-text-size-adjust: 100%
    -ms-text-size-adjust: 100%

body
    background: $COLOR_BG
    font-family: Roboto, Helvetica, Arial, sans-serif
    padding: 0.5em

    +desktop-and-up
        width: $CONTENT_MAX_WIDTH
        margin: 0 auto

    color: $COLOR_TEXT

h1, h2, h3, h4
    margin-top: 0
    margin-bottom: 0.3em

h1
    font-size: 2rem

h2, h3, h4
    font-weight: normal

ul
    margin: 0
    padding: 0

li
    margin: 0
    padding: 0

a
    text-decoration: none
    color: $COLOR_TEXT

    &:hover
        color: $HOLO_BLUE_ACTIVE

// Header
[role=banner]
    a
        color: $COLOR_TEXT

        &:hover
            color: $HOLO_BLUE_ACTIVE

    .logo
        +tablet-portrait-and-up
            float: left
            border-right: 1px solid $COLOR_BORDER

        line-height: $HEADER_HEIGHT
        height: $HEADER_HEIGHT
        width: $MENU_WIDTH

        .icon
            display: inline-block
            width: $HEADER_HEIGHT
            height: $HEADER_HEIGHT
            +image-2x('logo.png', $HEADER_HEIGHT, $HEADER_HEIGHT)

        span
            vertical-align: top
            margin-left: 1em
            letter-spacing: 0.2

    .content
        +desktop-and-up
            width: $CONTENT_MAX_WIDTH

        padding: 1em 0
        border-bottom: 1px solid $HOLO_BLUE

[role=navigation]
    +clearfix
    line-height: 48px
    position: relative

    .main-menu
        margin: 0
        padding: 0
        list-style: none

        +tablet-portrait-and-up
            float: left

        li
            +tablet-portrait-and-up
                display: inline-block
                margin-left: 1em

            +tablet-portrait-and-below
                display: block

            &.active a
                color: $HOLO_BLUE

    .overflow
        position: absolute
        right: 8px
        display: block
        $default-top: design-sprite-height('icon_more') - ($HEADER_HEIGHT / 2)

        +tablet-portrait-and-up
            top: $default-top
        +tablet-portrait-and-below
            // Approximation for crappy browsers, even though I don't really care.
            top: $default-top - 3 * 16px
            +calc(top, '#{$default-top} - #{$HEADER_HEIGHT} - 1em')

        &:hover
            +shadow

        .icon
            +design-sprite('icon_more')
            display: block
            width: design-sprite-width('icon_more')
            height: design-sprite-height('icon_more')

    .overflow-menu
        +transition-timing-function(ease)
        +transition-property(opacity, height)
        +transition-duration(0)

        opacity: 0
        height: 48px
        width: 48px
        // Important, does trigger unfold otherwise when hidden
        overflow: hidden
        z-index: 5

        position: absolute
        right: 0

        +tablet-portrait-and-below
            top: -3 * 16px
            +calc(top, '-#{$HEADER_HEIGHT} - 1em')

        &:hover
            +transition-duration(0.25s)
            opacity: 1
            // Hard-coded for animations. :(
            height: 141px
            width: design-sprite-width('more_mid')

        ul
            list-style: none

        li
            &:not(:last-child)::after
                border-top: 1px solid $COLOR_BORDER
                // Values are based on the images and their paddings
                position: relative
                left: -12px
                width: 260px
                content: ""
                display: block

        a
            display: block

        .top
            +design-sprite('more_top')
            width: design-sprite-width('more_top')
            height: design-sprite-height('more_top')

        .mid
            background: image_url('design/more_mid.png') repeat-y
            padding: 0 1em

        .bottom
            +design-sprite('more_bottom')
            width: design-sprite-width('more_bottom')
            height: design-sprite-height('more_bottom')


#main
    margin-top: 1em

    +tablet-landscape-and-up
        margin-left: $MENU_WIDTH

    .content
        +tablet-landscape-and-up
            padding-left: 1em

    a
        color: $HOLO_BLUE

[role=main]
    min-height: 480px

[role=contentinfo]
    color: $COLOR_TEXT_LIGHT

    p
        margin: 0.25em 0 0 0

    ul
        list-style: none

    li
        font-size: smaller
        display: inline-block

        &:before
            margin-right: 3px
            content: '|'

        &:first-child:before
            margin-right: 0
            content: ''

    .inner
        border-top: 1px solid $COLOR_BORDER

.side-menu
    margin-top: 1em

    +tablet-portrait-and-up
        width: $MENU_WIDTH
        float: left

    ul
        list-style: none

    li
        line-height: 2em

    a
        display: block

    .header
        position: relative

        > a::after
            +design-sprite('disclosure')
            width: design-sprite-width('disclosure')
            height: design-sprite-height('disclosure')
            display: block
            content: ""

            position: absolute
            top: 0
            right: 0

        &.expanded
            background: $COLOR_HIGHLIGHT

            > a::after
                +rotate(180deg)

            ul
                display: block
                background: $COLOR_BOX

        &.active > a
            color: $HOLO_BLUE

        > a
            font-weight: 700
            padding: 0 10px

        ul
            display: none

        li
            padding: 0 10px

            &:first-child
                border-top: 1px solid $COLOR_BG

{'fraction_non_alphanumeric': 0.09286800743620077, 'fraction_numerical': 0.02070305898259253, 'mean_word_length': 1.465625, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3057448', 'n_tokens_mistral': 3886, 'n_tokens_neox': 3526, 'n_words': 824}