@import url(hexo-config('@fontface.cyberpunk'))

$family-sans-serif ?= 'Oxanium', Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
$family-code ?= 'Roboto Mono', monospace, 'Microsoft YaHei'
// shadow and radius
$shadow ?= none
$radius ?= 0
$radius-small ?= 0
// base colors
$white ?= #cdcdcd
$red ?= #ff003c
$yellow ?= #fcee09
$blue ?= #02d7f2
$black ?= #000
$black-bis ?= #050a0e
// derived colors
$scheme-main ?= $black
$primary ?= $yellow
$text ?= $white
$text-strong ?= $yellow
$body-background-color ?= $scheme-main
$footer-color ?= $black
$footer-background-color ?= $yellow
$navbar-background-color ?= $yellow
$navbar-item-color ?= $black
$navbar-item-active-color ?= $black
$navbar-item-hover-color ?= $black
$navbar-item-hover-background-color ?= transparent
$menu-label-color ?= $blue
$menu-item-hover-color ?= $black
$menu-item-hover-background-color ?= $yellow
$menu-list-border-left ?= 1px solid $text
$tag-color ?= $black
$tag-background-color ?= $blue
$timeline-fg-line ?= $blue
$post-navigation-fg ?= $white
$searchbox-bg-container ?= $black-bis
$searchbox-border ?= $blue
$searchbox-bg-input ?= $black-bis
$searchbox-bg-close-hover ?= $black
$searchbox-bg-close-active ?= $searchbox-bg-close-hover
$searchbox-bg-result-item-hover ?= $black

@import 'style'

body
    counter-reset: card

::selection
    color: $black
    background: $blue

.navbar-main
    padding-top: 10px
    padding-bottom: 30px

    &:after
        content: ''
        position: absolute
        left: 0
        right: 0
        bottom: -2px
        background: url('../img/razor-top-black.svg') repeat-x top
        height: 40px

    .navbar-start
        .navbar-item
            &:hover, &.is-active
                text-decoration: underline

        &.is-active
            font-weight: bold

.footer
    position: relative

    &:before
        content: ''
        position: absolute
        left: 0
        right: 0
        top: -1px
        height: 39px
        background: url('../img/razor-bottom-black.svg') repeat-x top

    & > .container
        padding-top: 40px

.card:not(#back-to-top)
    overflow: visible
    box-shadow: 0 0 0 .9px $blue
    counter-increment: card

    &:before, &:after
        content: ''
        position: absolute
        width: 12.5px
        height: 21.5px
        z-index: 10
        background: $body-background-color

    &:before
        top: -12px
        right: -1.5px
        border-left: 1px solid $blue
        transform: rotate(-45deg)
        transform-origin: right center

    &:after
        left: -1.5px
        bottom: -12px
        border-right: 1px solid $blue
        transform: rotate(-45deg)
        transform-origin: left center

    .card-content
        &:after
            content: 'R' counter(card)
            display: inline-block
            position: absolute
            color: $blue
            right: 2rem
            bottom: -.6em
            font-size: .75rem
            padding: 0 .25em
            background: $body-background-color

.button:not(.is-transparent), .pagination-link.is-current
    border: none
    outline: none

    &.is-primary
        border-radius: 0 !important

    &.article-more
        color: $black
        background-color: $blue
        margin-left: auto

    &:before, &:after
        content: ''
        position: absolute
        width: 0
        z-index: 10

    &:before
        top: 0
        left: 0
        border-top: 8px solid $card-background-color
        border-right: 8px solid transparent

    &:after
        right: 0
        bottom: 0
        border-left: 8px solid transparent
        border-bottom: 8px solid $card-background-color

.tags
    .tag + .is-grey-lightest
        background: $yellow

article.article
    .title a
        background-image: linear-gradient(transparent calc(100% - 2px), $text-strong 2px)
        background-repeat: no-repeat
        background-size: 0 100%
        transition: background-size .25s ease-in-out

    .title:hover a
        background-size: 100% 100%

.content
    blockquote
        background: transparent
        border: .5px solid $blue
        border-left: 5px solid $blue

.searchbox .searchbox-container
    border: 1px solid $blue

    .searchbox-result-item
        em
            color: $black

#back-to-top
    color: $black
    background: $blue
    margin-top: 45px