github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore(style): cyberpunk theme variant refinement

pull/645/head
ppoffice 2020-03-10 17:33:21 -04:00
parent 6833693d29
commit a70ddc52da
3 changed files with 118 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
source/css/cyberpunk.styl
View File

@ -26,6 +26,10 @@ $navbar-item-color ?= $black
$navbar-item-active-color ?= $black $navbar-item-active-color ?= $black
$navbar-item-hover-color ?= $black $navbar-item-hover-color ?= $black
$navbar-item-hover-background-color ?= transparent $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-label-color ?= $blue
$menu-item-hover-color ?= $black $menu-item-hover-color ?= $black
$menu-item-hover-background-color ?= $yellow $menu-item-hover-background-color ?= $yellow
@ -43,6 +47,21 @@ $searchbox-bg-result-item-hover ?= $black
@import 'style' @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 body
counter-reset: card counter-reset: card
@ -50,6 +69,66 @@ body
color: $black color: $black
background: $blue 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 .navbar-main
padding-top: 10px padding-top: 10px
padding-bottom: 30px padding-bottom: 30px
@ -66,10 +145,29 @@ body
.navbar-start .navbar-start
.navbar-item .navbar-item
&:hover, &.is-active &:hover, &.is-active
text-decoration: underline color: $navbar-background-color
background-color: $body-background-color !important
&.is-active article.article,
font-weight: bold 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 .footer
position: relative position: relative
@ -86,98 +184,19 @@ body
& > .container & > .container
padding-top: 40px padding-top: 40px
.card:not(#back-to-top) .timeline .media
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 &:before
top: -12px clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)
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 .searchbox .searchbox-container
border: 1px solid $blue border: 1px solid $blue
.searchbox-body
border-bottom: 1px solid $searchbox-border
li:last-child .searchbox-result-section
border-bottom: none
.searchbox-result-item .searchbox-result-item
em em
color: $black color: $black
@ -186,3 +205,4 @@ article.article
color: $black color: $black
background: $blue background: $blue
margin-top: 45px margin-top: 45px
cut-corner-left(8px)

8
source/css/include/navbar.styl
View File

@ -1,6 +1,11 @@
/* --------------------------------- /* ---------------------------------
* Top Navigation * 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 .navbar-main
box-shadow: $shadow box-shadow: $shadow
@ -26,7 +31,8 @@
.navbar-item .navbar-item
display: flex display: flex
align-items: center 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 &.is-active
background-color: transparent background-color: transparent

2
source/css/include/timeline.styl
View File

@ -16,7 +16,7 @@ $timeline-bg-line ?= $card-background-color
content: '' content: ''
display: block display: block
position: absolute position: absolute
left: calc(-5px - 1.5rem) left: calc(-.375rem - 1.5rem - .25px)
&:before &:before
width: .75rem width: .75rem