diff --git a/source/css/cyberpunk.styl b/source/css/cyberpunk.styl new file mode 100644 index 0000000..05f310a --- /dev/null +++ b/source/css/cyberpunk.styl @@ -0,0 +1,187 @@ +@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;600&display=swap') + +$family-sans-serif ?= 'Oxanium', Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif +// 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 diff --git a/source/css/include/button.styl b/source/css/include/button.styl index e3059b8..b9f6c30 100644 --- a/source/css/include/button.styl +++ b/source/css/include/button.styl @@ -3,5 +3,6 @@ * --------------------------------- */ .button &.is-transparent + color: inherit background: transparent border-color: transparent diff --git a/source/css/include/plugin.styl b/source/css/include/plugin.styl index e748fc1..553799b 100644 --- a/source/css/include/plugin.styl +++ b/source/css/include/plugin.styl @@ -3,12 +3,16 @@ * --------------------------------- */ #back-to-top position: fixed - padding: 8px 0 - transition: .4s ease opacity, .4s ease width, .4s ease transform, .4s ease border-radius opacity: 0 - line-height: 24px outline: none + padding: 8px 0 + line-height: 24px + border-radius: $card-radius transform: translateY(120px) + transition: .4s ease opacity, .4s ease width, .4s ease transform, .4s ease border-radius + + &.is-rounded + border-radius: 50% &.fade-in opacity: 1 diff --git a/source/css/include/search.styl b/source/css/include/search.styl index 5d21a0a..6c56cae 100644 --- a/source/css/include/search.styl +++ b/source/css/include/search.styl @@ -88,8 +88,10 @@ $searchbox-bg-pagination-item-disabled ?= $searchbox-bg-container .searchbox-input flex-grow: 1 + color: inherit box-sizing: border-box padding: .75em 0 .75em 1.25em + background: $searchbox-bg-input .searchbox-close display: inline-block diff --git a/source/img/razor-bottom-black.svg b/source/img/razor-bottom-black.svg new file mode 100644 index 0000000..a3bcb49 --- /dev/null +++ b/source/img/razor-bottom-black.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/img/razor-top-black.svg b/source/img/razor-top-black.svg new file mode 100644 index 0000000..df7d497 --- /dev/null +++ b/source/img/razor-top-black.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/js/back-to-top.js b/source/js/back-to-top.js index bf3972e..e4235c8 100644 --- a/source/js/back-to-top.js +++ b/source/js/back-to-top.js @@ -13,8 +13,7 @@ $(document).ready(() => { classname: 'card has-text-centered', left: '', width: 64, - bottom: bottomMargin, - 'border-radius': 4 + bottom: bottomMargin } }; state['desktop-hidden'] = Object.assign({}, state.base, { @@ -24,9 +23,8 @@ $(document).ready(() => { classname: state['desktop-hidden'].classname + ' fade-in' }); state['desktop-dock'] = Object.assign({}, state['desktop-visible'], { - classname: state['desktop-visible'].classname + ' fade-in', - width: 40, - 'border-radius': '50%' + classname: state['desktop-visible'].classname + ' fade-in is-rounded', + width: 40 }); state['mobile-hidden'] = Object.assign({}, state.base, { classname: state.base.classname + ' fade-in',