vue-carousel-3d/docs/themes/vue/source/css/index.styl

Beautiful, flexible and touch supported 3D Carousel for Vue.js

@import "_common"
@import "_header"
@import '_sidebar'

$width = 900px
$space = 30px

body
    background-color $green

.sidebar
    display none

.slide
    padding 0 12px
    box-sizing border-box
    img
        width 100%

#mobile-bar
    &.top
        background-color transparent
        box-shadow none
        .logo
            display none

#hero
    padding $space 40px
    background-color #fff
    text-align center
    &.hero-sm
        padding 10px 10px 30px
    .inner
        max-width $width
        margin 0 auto
    .left, .right
        display inline-block
        vertical-align top
    .left
        width 39%
    .right
        width 61%
    .hero-logo
        width 215px
        height 215px
        float right
        margin-right 60px
    h1
        font-weight 300
        margin 0
        font-size 3.2em
    h2
        font-family $logo-font
        font-weight 500
        font-size 2.4em
        margin 0 0 10px
        display none
    .button
        margin 1em 0
        font-size 1.05em
        font-weight 600
        letter-spacing .1em
        &:first-child
            margin-right 1em
    .social-buttons
        list-style-type none
        padding 0
        li
            display inline-block
            vertical-align middle
            margin-right 15px

#highlights
    background-color #fff
    padding-bottom 70px
    .inner
        max-width $width
        margin 0 auto
        text-align center
    .point
        width 33%
        display inline-block
        vertical-align top
        box-sizing border-box
        padding 0 2em
        h2
            color $medium
            font-size 1.5em
            font-weight 400
            margin 0
            padding .5em 0
        p
            color $light

#footer
    padding $space 0
    color #fff
    text-align center
    a
        font-weight 700
        color #fff

@media screen and (max-width: $width)
    body
        -webkit-text-size-adjust none
        font-size 14px
    .sidebar
        display block
    #header
        display none
    #mobile-bar
        display block
    #hero
        padding $space 40px 30px
        &.hero-sm
            padding 10px 10px 30px
        .hero-logo
            float none
            margin 30px 0 15px
            width 140px
            height 140px
        .left, .right
            text-align center
            width 100%
        h1
            font-size 2em
        h2
            display block
        .button
            font-size .9em
    #highlights
        .point
            display block
            margin 0 auto
            width 300px
            padding 0 40px 30px
            &:before
                content "—"
                color $green