189 lines
4.2 KiB
Stylus
189 lines
4.2 KiB
Stylus
@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
|