family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif
family-mono = "Source Code Pro", monospace, "Microsoft YaHei"
gap = 64px
screen-tablet = 769px
screen-desktop = 1088px
screen-widescreen = 1280px
screen-fullhd = 1472px

/* ---------------------------------
 *       Override CSS Framework
 * --------------------------------- */
html
    font-size: 14px

body
    background-color: #f7f7f7

body, button, input, select, textarea
    font-family: family-sans

@media screen and (min-width: screen-widescreen)
    .is-1-column .container
    .is-2-column .container
        max-width: screen-desktop - 2 * gap
        width: screen-desktop - 2 * gap
@media screen and (min-width: screen-fullhd)
    .is-2-column .container
        max-width: screen-widescreen - 2 * gap
        width: screen-widescreen - 2 * gap
    .is-1-column .container
        max-width: screen-desktop - 2 * gap
        width: screen-desktop - 2 * gap

@media screen and (max-width: screen-tablet - 1)
    .section
        padding: 1.5rem 1rem

@media screen and (min-width: screen-tablet)
    .column-main,
    .column-left,
    .column-right,
    .column-right-shadow
        &.is-sticky
            align-self: flex-start
            position: -webkit-sticky
            position: sticky
            top: .75rem
    .column-right-shadow
        &.is-sticky
            top: 1.5rem

.tag
    &.is-grey
        background: #e7e7e7

.card
    border-radius: 4px
    box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1)
    & + .card,
    & + .column-right-shadow
        margin-top: 1.5rem
    &.card-transparent
        box-shadow: none
        background: transparent
    .card-image
        overflow: hidden
        border-top-left-radius: 4px
        border-top-right-radius: 4px

img.thumbnail
    object-fit: cover
    width: 100%
    height: 100%

.navbar-logo,
.footer-logo
    img
        max-height: 1.75rem

.navbar-main
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
    .navbar-menu,
    .navbar-start,
    .navbar-end
        align-items: stretch
        display: flex
        padding: 0
        flex-shrink: 0
    .navbar-menu
        flex-grow: 1
        flex-shrink: 0
        overflow-x: auto
    .navbar-start
        justify-content: flex-start
        margin-right: auto
    .navbar-end
        justify-content: flex-end
        margin-left: auto
    .navbar-item
        display: flex
        align-items: center
        padding: 1.25rem 0.75rem
        &.is-active
            color: hsl(217, 71%, 53%)
            background-color: transparent
    @media screen and (max-width: screen-desktop - 1)
        .navbar-menu
            justify-content: center
            box-shadow: none
        .navbar-start
            margin-right: 0
        .navbar-end
            margin-left: 0

.footer
    background: white
    .field
        .button
            background: transparent

.widget
    .media
        border: none
    .media + .media
        margin-top: 0
    .menu-list li ul
        margin-right: 0
    .menu-list a.level
        display: flex
    .has-text-centered figure.image
        margin: auto

.pagination
    .pagination-link:not(.is-current), .pagination-previous, .pagination-next
        background: white
        border: none
    .pagination-link, .pagination-previous, .pagination-next
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)

.post-navigation
    justify-content: space-around
    .level-item
        margin-bottom: 0

.timeline
    margin-left: 1rem
    padding-left: 1.5rem
    padding-top: 1rem
    border-left: 1px solid hsl(0, 0%, 86%)
    .media
        position: relative
        &:before,
        &:last-child:after
            content: ''
            display: block
            position: absolute
            left: calc(-5px - 1.5rem)
        &:before
            width: 9px
            height: 9px
            top: 1.3rem
            background: hsl(0, 0%, 86%)
            border-radius: 50%
        &:first-child:before
            top: 0.3rem
        &:last-child:after
            top: calc(1.3rem + 9px)
            width: 9px
            bottom: 0
            background: white
        &:first-child:last-child:after
            top: calc(0.3rem + 9px)

.article
    .article-meta
        margin-bottom: 0.5rem !important
    .content
        font-size: 1.1rem
        blockquote.pullquote
            float: right
            max-width: 50%
            font-size: 1.15rem
            position: relative
        a
            word-wrap: break-word

.rtl
     direction: rtl
     .level
        &, &.is-mobile
            .level-item:not(:last-child)
                margin-left: 0.75rem
                margin-right: 0

.donate
    position: relative
    .qrcode
        display: none
        position: absolute
        z-index: 99
        bottom: 2.5em
        line-height: 0
        overflow: hidden
        border-radius: 4px
        box-shadow: 0 4px 10px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.2)
        overflow: hidden
        img
            max-width: 280px
    &:hover
        .qrcode
            display: block
    &:first-child:not(:last-child)
        .qrcode
            left: -0.75rem
    &:last-child:not(:first-child)
        .qrcode
            right: -0.75rem

@media screen and (max-width: screen-tablet - 1)
    #toc
        display: none
        position: fixed
        margin: 1rem
        left: 0
        right: 0
        bottom: 0
        z-index: 100
        max-height: calc(100vh - 2rem)
        overflow-y: auto
    #toc-mask
        display: none
        position: fixed
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 99
        background: rgba(0, 0, 0, 0.7)
    #toc,
    #toc-mask
        &.is-active
            display: block


/* ---------------------------------
 *         Custom modifiers
 * --------------------------------- */
.is-borderless
    border: none

.is-size-7
    font-size: 0.85rem !important

.is-7by1
    padding-top: 42.8%
    img
        bottom: 0
        left: 0
        position: absolute
        right: 0
        top: 0

.is-overflow-x-auto
    overflow-x: auto !important

.is-flex-grow
    flex-grow: 1 !important

.is-flex-wrap
    flex-wrap: wrap !important

.is-flex-start
    justify-content: start !important

.is-flex-center
    justify-content: center !important

.is-flex-middle
    align-items: center !important

.has-order-1
    order: 1

.has-order-2
    order: 2

.has-order-3
    order: 3

.has-mr-6
    margin-right: 0.5em !important

.has-mb-6
    margin-bottom: 0.5em !important

.has-mr-7
    margin-right: 0.25em !important

.has-link-grey,
.has-link-black-ter
    transition: 0.2s ease
    &:hover
        color: hsl(217, 71%, 53%) !important

.has-link-grey
    color: hsl(0, 0%, 48%) !important

.has-link-black-ter
    color: hsl(0, 0%, 14%) !important

@media screen and (max-width: screen-tablet - 1)
    .has-text-centered-mobile
        text-align: center !important
    .is-flex-center-mobile
        justify-content: center !important
    .has-mt-5-mobile
        margin-top: 1em !important

/* ---------------------------------
 *         Font icon fixes
 * --------------------------------- */
.fa, .fab, .fal, .far, .fas
    line-height: inherit

/* ---------------------------------
 *        Fix content elements
 * --------------------------------- */
.content
    h1, h2, h3, h4, h5, h6
        font-weight: 400
    h1
        font-size: 1.75em
    h2
        font-size: 1.5em
    h3
        font-size: 1.25em
    h4
        font-size: 1.125em
    h5
        font-size: 1em
    code, pre
        font-family: family-mono
    pre
        font-size: 0.85em
    code
        padding: 0
        background: transparent
    & > code,
    :not(pre) > code
        font-size: 0.85em
        color: hsl(348, 100%, 61%)
    blockquote
        footer
            strong + cite
                margin-left: 0.5em

/* ---------------------------------
 *        Fix code highlight
 * --------------------------------- */
figure.highlight
    padding: 0
    width: 100%
    position: relative
    margin: 1em 0 1em !important
    &.folded
        .highlight-body
            height: 0

    pre,
    table tr:hover
        color: inherit
        background: transparent

    table
        width: auto

        tr td
                border: none
        tr:not(:first-child) td
            padding-top: 0
        tr:not(:last-child) td
            padding-bottom: 0

    pre
        padding: 0
        overflow: visible

        .line,
        code .hljs
            line-height: 1.5rem

    figcaption,
    .gutter
        background: rgba(200, 200, 200, 0.15)

    figcaption
        padding: .3em .75em
        text-align: left
        font-style: normal
        font-size: .8em
        &:after
            clear: both
            content: " "
            display: table

        span
            font-weight: 500
            font-family: family-mono

        .fold
        a
            color: #9a9a9a

        a
            float: right
            margin-left: 0.5em

        .fold
            margin-right: 0.5em
            cursor: pointer

    .highlight-body
        overflow: auto

    .gutter
        text-align: right

    .tag,
    .title,
    .number,
    .section
        display: inherit
        font: inherit
        margin: inherit
        padding: inherit
        background: inherit
        height: inherit
        text-align: inherit
        vertical-align: inherit
        min-width: inherit
        border-radius: inherit

/* ---------------------------------
 *          Overflow Table
 * --------------------------------- */
.table-overflow
    overflow-x: auto
    table
        width: auto!important
        th
            word-break: keep-all

/* ---------------------------------
 *            Fix Video
 * --------------------------------- */
.video-container
    position: relative
    padding-bottom: 56.25%
    padding-top: 25px
    height: 0
    iframe
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%

/* ---------------------------------
 *        Fix Gist Snippet
 * --------------------------------- */
.gist
    table
        tr:hover
            background: transparent
        td
            border: none
    .file
        all: initial