hexo-theme-icarus/source/css/_partial/article.styl

.article
    margin: block-margin 0

.article-inner
    @extend $block
    overflow: hidden

.article-banner
    width:100%
    height:auto

.article-header
    padding: article-padding article-padding 0
    .article-title
        display: block
        margin-bottom: 14px

.article-title
    font-size: 2em
    color: color-default
    text-decoration: none
    transition: color 0.2s
    line-height: line-height-title
    a&:visited
        color: color-default
    a&:hover
        color: color-link
    @media mq-mini
        font-size: 1.6em
    @media mq-mobile
        font-size: 1.6em

.article-meta
    @extend $block-caption
    clearfix()
    line-height: 1.6em
    & > div
        float: left
        margin-right: 10px
        color: color-default + #444
        .fa
            margin-right: 3px
    a
        color: color-default + #444
        &:hover
            color: color-link

.article-category
    .fa-angle-right
        margin: 0 5px

.article-tag
    .tag-link
        &:before
            content: "#"

.article-entry
    @extend $base-style
    clearfix()
    color: color-default
    padding: 0 article-padding
    line-height: line-height
    p, table
        line-height: line-height
        margin: line-height 0
    h1, h2, h3, h4, h5, h6
        font-weight: bold
    h1, h2, h3, h4, h5, h6
        line-height: line-height-title
        margin: line-height-title 0
    a
        color: color-link
        text-decoration: none
        &:hover
            text-decoration: underline
    ul, ol, dl
        margin-top: line-height
        margin-bottom: line-height
    img, video
        max-width: 100%
        height: auto
        display: block
        margin: auto
    iframe
        border: none
    table
        width: 100%
        border-collapse: collapse
        border-spacing: 0
    th
        font-weight: bold
        border-bottom: 3px solid color-border
        padding-bottom: 0.5em
    td
        border-bottom: 1px solid color-border
        padding: 10px 0
    blockquote
        position: relative
        font-family: font-serif
        font-size: 1.1em
        margin: 0 -20px
        padding: 10px 20px 10px 54px
        background: #fcfcfc
        border-left: 4px solid #eee
        &:before
            top: 20px
            left: 10px
            content: "\f10d"
            color: #e2e2e2
            font-size: 32px;
            font-family: FontAwesome
            text-align: center
            position: absolute
        footer
            font-size: font-size
            margin: line-height 0
            font-family: font-sans
            cite
                &:before
                    content: "—"
                    padding: 0 0.5em
    .pullquote
        text-align: left
        width: 45%
        margin: 0
        &.left
            margin-left: 0.5em
            margin-right: 1em
        &.right
            margin-right: 0.5em
            margin-left: 1em
    .caption
        color: color-grey
        display: block
        font-size: 0.9em
        margin-top: 0.5em
        position: relative
        text-align: center
    // http://webdesignerwall.com/tutorials/css-elastic-videos
    .video-container
        position: relative
        padding-top: (9 / 16 * 100)% // 16:9 ratio
        height: 0
        overflow: hidden
        iframe, object, embed
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            margin-top: 0

.article-more-link a
    display: inline-block
    line-height: 1em
    padding: 6px 15px
    border-radius: 15px
    background: color-background
    color: color-grey
    text-shadow: 0 1px #fff
    text-decoration: none
    &:hover
        background: color-link
        color: #fff
        text-decoration: none
        text-shadow: 0 1px darken(color-link, 20%)

.article-footer
    clearfix()
    font-size: 0.85em
    line-height: line-height
    border-top: 1px solid color-border
    padding-top: line-height
    margin: 0 article-padding article-padding
    a
        color: color-grey
        text-decoration: none
        &:hover
            color: color-default

.article-comment-link
    float: right
    &:before
        content: "\f075"
        font-family: FontAwesome
        padding-right: 5px

.share-container
    float: left

.article-share-link
    float: right
    cursor: pointer
    margin-left: 20px
    .fa-share
        margin-right: 5px

#article-nav
    clearfix()
    position: relative
    @media mq-normal
        margin: block-margin 0
        &:before
            absolute-center(8px)
            content: ""
            border-radius: 50%
            background: color-default + #222

.article-nav-link-wrap
    text-decoration: none
    color: color-grey
    box-sizing: border-box
    margin-top: block-margin
    text-align: center
    display: block
    &:hover
        color: color-default
    @media mq-normal
        width: 50%
        margin-top: 0

#article-nav-newer
    @media mq-normal
        float: left
        text-align: right
        padding-right: 20px

#article-nav-older
    @media mq-normal
        float: right
        text-align: left
        padding-left: 20px

.article-nav-caption
    letter-spacing: 2px
    line-height: 1em
    font-weight: bold
    color: color-default
    text-transform: uppercase
    #article-nav-newer &
        margin-right: -2px

.article-nav-title
    font-size: 0.85em
    line-height: line-height
    margin-top: 0.5em

.article-share-box
    position: absolute
    display: none
    background: #fff
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1)
    border-radius: 3px
    margin-left: -145px
    overflow: hidden
    z-index: 1
    &.on
        display: block

.article-share-input
    width: 100%
    background: none
    box-sizing: border-box
    font: 14px font-sans
    padding: 0 15px
    color: color-default
    outline: none
    border: 1px solid color-border
    border-radius: 3px 3px 0 0
    height: 36px
    line-height: 36px

.article-share-links
    clearfix()
    background: color-background

$article-share-link
    width: 50px
    height: 36px
    display: block
    float: left
    position: relative
    color: #999
    text-shadow: 0 1px #fff
    &:before
        font-size: 20px
        absolute-center(@font-size)
        text-align: center
    &:hover
        color: #fff

.article-share-twitter
    @extend $article-share-link
    &:hover
        background: color-twitter
        text-shadow: 0 1px darken(color-twitter, 20%)

.article-share-facebook
    @extend $article-share-link
    &:hover
        background: color-facebook
        text-shadow: 0 1px darken(color-facebook, 20%)

.article-share-pinterest
    @extend $article-share-link
    &:hover
        background: color-pinterest
        text-shadow: 0 1px darken(color-pinterest, 20%)

.article-share-google
    @extend $article-share-link
    &:hover
        background: color-google
        text-shadow: 0 1px darken(color-google, 20%)

.article-gallery
    background: #000
    position: relative

.article-gallery-photos
    position: relative
    overflow: hidden

.article-gallery-img
    display: none
    max-width: 100%
    &:first-child
        display: block
    &.loaded
        position: absolute
        display: block
    img
        display: block
        max-width: 100%
        margin: 0 auto

/*    toc */
.toc-article
    background #F9F9F9
    margin 2em 0 0 0.2em
    padding 1em
    border-radius 0px
    .toc-title
        font-size 120%
    strong
        padding 0.3em 1
ol.toc
    width 100%
    margin 1em 2em 0 0
#toc
    line-height 1em
    font-size 0.8em
    float right
    .toc
        padding 0
        li
            list-style-type none
    .toc-child
        padding-left 0em
#toc.toc-aside
    display none
    width 13%
    position fixed
    right 2%
    top 320px
    overflow hidden
    line-height 1.5em
    font-size 1em
    color color-heading
    opacity .6
    transition opacity 1s ease-out
    strong
        padding 0.3em 0
        color color-font
    &:hover
        transition opacity .3s ease-out
        opacity 1
    a
        transition color 1s ease-out
        &:hover
            color color-theme
            transition color .3s ease-out