From a70ddc52da58283c8c9fb498016cd286b1e28a5e Mon Sep 17 00:00:00 2001 From: ppoffice Date: Tue, 10 Mar 2020 17:33:21 -0400 Subject: [PATCH] chore(style): cyberpunk theme variant refinement --- source/css/cyberpunk.styl | 200 +++++++++++++++++-------------- source/css/include/navbar.styl | 8 +- source/css/include/timeline.styl | 2 +- 3 files changed, 118 insertions(+), 92 deletions(-) diff --git a/source/css/cyberpunk.styl b/source/css/cyberpunk.styl index 4ee2e19..829eb0f 100644 --- a/source/css/cyberpunk.styl +++ b/source/css/cyberpunk.styl @@ -26,6 +26,10 @@ $navbar-item-color ?= $black $navbar-item-active-color ?= $black $navbar-item-hover-color ?= $black $navbar-item-hover-background-color ?= transparent +$navbar-item-margin-v ?= 1.25rem +$navbar-item-margin-h ?= .25rem +$navbar-item-padding-v ?= 0 +$navbar-item-padding-h ?= .5rem $menu-label-color ?= $blue $menu-item-hover-color ?= $black $menu-item-hover-background-color ?= $yellow @@ -43,6 +47,21 @@ $searchbox-bg-result-item-hover ?= $black @import 'style' +cut-corner-left(size) + clip-path: unquote('polygon(' + size + ' 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%, 0 ' + size + ')') + +cut-corner-right(size) + clip-path: unquote('polygon(0 0, calc(100% - ' + size + ') 0, 100% ' + size + ', 100% 100%, ' + size + ' 100%, 0 calc(100% - ' + size + '), 0 0)') + +cut-corner-inner(size) + clip-path: unquote('polygon(1px 1px, calc(100% - ' + size + ' - 1px) 1px, calc(100% - 1px) calc(1px + ' + size + '), calc(100% - 1px) calc(100% - 1px), calc(1px + ' + size + ') calc(100% - 1px), 1px calc(100% - ' + size + ' - 1px), 1px 1px)') + +cut-corner-inner-top-right(size) + clip-path: unquote('polygon(1px 1px, calc(100% - ' + size + ' - 1px) 1px, calc(100% - 1px) ' + size + ', calc(100% - 1px) calc(100% + 1px), 1px calc(100% + 1px))') + +cut-corner-inner-bottom-left(size) + clip-path: unquote('polygon(1px -1px, calc(100% - 1px) -1px, calc(100% - 1px) calc(100% - 1px), calc(1px + ' + size + ') calc(100% - 1px), 1px calc(100% - 1px - ' + size + '))') + body counter-reset: card @@ -50,6 +69,66 @@ body color: $black background: $blue +.card:not(#back-to-top) + overflow: visible + counter-increment: card + + &:before, &:after + position: absolute + + &:before + content: '' + top: 0 + left: 0 + right: 0 + bottom: 0 + background-color: $blue + cut-corner-right(16px) + + &:after + content: 'R' counter(card) + color: $blue + right: 2rem + bottom: -.6em + font-size: .75rem + padding: 0 .25em + background: $body-background-color + + .card-image, .card-content + cut-corner-inner-top-right(16px) + + .card-content + background-color: $body-background-color + cut-corner-inner(16px) + + .card-image + .card-content + cut-corner-inner-bottom-left(16px) + +.button + border: none + outline: none + cut-corner-left(8px) + + &.is-primary + border-radius: 0 !important + +.menu-list a + cut-corner-left(8px) + +.tags.has-addons + .tag:first-child + background: $yellow !important + + .tag:last-child + background: $blue !important + +.pagination-previous, .pagination-next, .pagination-link + cut-corner-left(8px) + &:hover + background-color: $blue + &, a + color: $black + .navbar-main padding-top: 10px padding-bottom: 30px @@ -66,10 +145,29 @@ body .navbar-start .navbar-item &:hover, &.is-active - text-decoration: underline + color: $navbar-background-color + background-color: $body-background-color !important - &.is-active - font-weight: bold +article.article, +article.media + .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% + +article.article + .article-more + @extend .button.is-link + +.content + blockquote + background: transparent + border: .5px solid $blue + border-left: 5px solid $blue .footer position: relative @@ -86,98 +184,19 @@ body & > .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 - +.timeline .media &: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 + clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) .searchbox .searchbox-container border: 1px solid $blue + .searchbox-body + border-bottom: 1px solid $searchbox-border + + li:last-child .searchbox-result-section + border-bottom: none + .searchbox-result-item em color: $black @@ -186,3 +205,4 @@ article.article color: $black background: $blue margin-top: 45px + cut-corner-left(8px) diff --git a/source/css/include/navbar.styl b/source/css/include/navbar.styl index cd87821..a11191c 100644 --- a/source/css/include/navbar.styl +++ b/source/css/include/navbar.styl @@ -1,6 +1,11 @@ /* --------------------------------- * Top Navigation * --------------------------------- */ +$navbar-item-padding-v ?= 1.25rem +$navbar-item-padding-h ?= .75rem +$navbar-item-margin-v ?= 0 +$navbar-item-margin-h ?= 0 + .navbar-main box-shadow: $shadow @@ -26,7 +31,8 @@ .navbar-item display: flex align-items: center - padding: 1.25rem .75rem + padding: $navbar-item-padding-v $navbar-item-padding-h + margin: $navbar-item-margin-v $navbar-item-margin-h &.is-active background-color: transparent diff --git a/source/css/include/timeline.styl b/source/css/include/timeline.styl index 6c4f942..1d00f94 100644 --- a/source/css/include/timeline.styl +++ b/source/css/include/timeline.styl @@ -16,7 +16,7 @@ $timeline-bg-line ?= $card-background-color content: '' display: block position: absolute - left: calc(-5px - 1.5rem) + left: calc(-.375rem - 1.5rem - .25px) &:before width: .75rem