fix(style): donation button qrcode not displaying

pull/645/head
ppoffice 2020-03-12 23:32:55 -04:00
parent 348eb7ca70
commit 1346e306e1
4 changed files with 112 additions and 38 deletions

View File

@ -139,9 +139,9 @@ Icarus directly import stylesheets from the [highlight.js](https://highlightjs.o
<th>Kimbie Dark</th> <th>Kimbie Dark</th>
</tr> </tr>
<tr> <tr>
<td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/atom-one-light.png?1"></td> <td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/atom-one-light.png?2"></td>
<td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/monokai.png?1"></td> <td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/monokai.png?2"></td>
<td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/kimbie-dark.png"></td> <td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/kimbie-dark.png?2"></td>
</tr> </tr>
</table> </table>

View File

@ -1,4 +1,4 @@
bulma-stylus-root = "../../../../node_modules/bulma-stylus/stylus" bulma-stylus-root = '../../../../node_modules/bulma-stylus/stylus'
/* --------------------------------- /* ---------------------------------
* Override Bulma CSS Framework * Override Bulma CSS Framework
@ -6,8 +6,8 @@ bulma-stylus-root = "../../../../node_modules/bulma-stylus/stylus"
$body-size ?= 14px $body-size ?= 14px
$body-background-color ?= #f7f7f7 $body-background-color ?= #f7f7f7
$family-sans-serif ?= Ubuntu, Roboto, "Open Sans", "Microsoft YaHei", sans-serif $family-sans-serif ?= Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
$family-code ?= "Source Code Pro", monospace, "Microsoft YaHei" $family-code ?= 'Source Code Pro', monospace, 'Microsoft YaHei'
$primary ?= $blue $primary ?= $blue
$custom-colors ?= { $custom-colors ?= {
@ -43,18 +43,18 @@ $content-heading-weight ?= $weight-normal
$logo-height ?= 1.75rem $logo-height ?= 1.75rem
// FIXME: https://github.com/groenroos/bulma-stylus/issues/11 // FIXME: https://github.com/groenroos/bulma-stylus/issues/11
@import bulma-stylus-root + "/utilities/initial-variables" @import bulma-stylus-root + '/utilities/initial-variables'
@import bulma-stylus-root + "/utilities/functions" @import bulma-stylus-root + '/utilities/functions'
@import bulma-stylus-root + "/utilities/derived-variables" @import bulma-stylus-root + '/utilities/derived-variables'
$colors = merge($colors, $custom-colors) $colors = merge($colors, $custom-colors)
@import bulma-stylus-root + "/utilities/animations" @import bulma-stylus-root + '/utilities/animations'
@import bulma-stylus-root + "/utilities/mixins" @import bulma-stylus-root + '/utilities/mixins'
@import bulma-stylus-root + "/utilities/controls" @import bulma-stylus-root + '/utilities/controls'
@import bulma-stylus-root + "/base/_all" @import bulma-stylus-root + '/base/_all'
@import bulma-stylus-root + "/components/_all" @import bulma-stylus-root + '/components/_all'
@import bulma-stylus-root + "/elements/_all" @import bulma-stylus-root + '/elements/_all'
@import bulma-stylus-root + "/form/_all" @import bulma-stylus-root + '/form/_all'
@import bulma-stylus-root + "/grid/_all" @import bulma-stylus-root + '/grid/_all'
@import bulma-stylus-root + "/layout/_all" @import bulma-stylus-root + '/layout/_all'

View File

@ -2,7 +2,7 @@
* Card * Card
* --------------------------------- */ * --------------------------------- */
.card .card
overflow: hidden overflow: visible
border-radius: $card-radius border-radius: $card-radius
& + .card, & + .column-right-shadow & + .card, & + .column-right-shadow

View File

@ -7,18 +7,39 @@ $shadow ?= none
$radius ?= 0 $radius ?= 0
$radius-small ?= 0 $radius-small ?= 0
// base colors // base colors
$white ?= #cdcdcd $white ?= #fff
$red ?= #ff003c $white-bis ?= #cdcdcd
$yellow ?= #fcee09 $grey ?= #848484
$blue ?= #02d7f2
$black ?= #000 $black ?= #000
$black-bis ?= #050a0e $black-bis ?= #050a0e
$orange ?= #ff8e3c
$yellow ?= #fcee09
$green ?= #00ff41
$blue ?= #02d7f2
$purple ?= #9561d2
$red ?= #ff003c
$primary ?= $yellow
$info ?= $blue
$success ?= $green
$warning ?= $orange
$danger ?= $red
// invert colors
$orange-invert ?= #121617
$yellow-invert ?= #121617
$green-invert ?= #121617
$blue-invert ?= #121617
$purple-invert ?= #121617
$red-invert ?= #121617
$primary-invert ?= #121617
$info-invert ?= #121617
$success-invert ?= #121617
$warning-invert ?= #121617
$danger-invert ?= #121617
// derived colors // derived colors
$scheme-main ?= $black $scheme-main ?= $black
$primary ?= $yellow
$link ?= $blue $link ?= $blue
$link-hover ?= $primary $link-hover ?= $primary
$text ?= $white $text ?= $white-bis
$text-strong ?= $yellow $text-strong ?= $yellow
$body-background-color ?= $scheme-main $body-background-color ?= $scheme-main
$input-color ?= $text $input-color ?= $text
@ -34,6 +55,7 @@ $navbar-item-margin-v ?= 1.25rem
$navbar-item-margin-h ?= .25rem $navbar-item-margin-h ?= .25rem
$navbar-item-padding-v ?= 0 $navbar-item-padding-v ?= 0
$navbar-item-padding-h ?= .5rem $navbar-item-padding-h ?= .5rem
$card-background-color ?= transparent
$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
@ -41,7 +63,7 @@ $menu-list-border-left ?= 1px solid $text
$tag-color ?= $black $tag-color ?= $black
$tag-background-color ?= $blue $tag-background-color ?= $blue
$timeline-fg-line ?= $blue $timeline-fg-line ?= $blue
$post-navigation-fg ?= $white $post-navigation-fg ?= $white-bis
$searchbox-bg-container ?= $black-bis $searchbox-bg-container ?= $black-bis
$searchbox-border ?= $blue $searchbox-border ?= $blue
$searchbox-bg-input ?= $black-bis $searchbox-bg-input ?= $black-bis
@ -66,6 +88,18 @@ cut-corner-bottom-left(size)
cut-corner-bottom-right(size) cut-corner-bottom-right(size)
clip-path: unquote('polygon(0 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%)') clip-path: unquote('polygon(0 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%)')
undercover-before()
position: relative
&:before
content: ''
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
body body
counter-reset: card counter-reset: card
@ -74,14 +108,13 @@ body
background: $blue background: $blue
.card:not(#back-to-top) .card:not(#back-to-top)
overflow: visible position: relative
counter-increment: card counter-increment: card
&:before, &:after &, .card-content
position: absolute undercover-before()
&:before &:before
content: ''
top: -1.2px top: -1.2px
left: -1.2px left: -1.2px
right: -1.2px right: -1.2px
@ -91,6 +124,7 @@ body
&:after &:after
content: 'R' counter(card) content: 'R' counter(card)
position: absolute
color: $blue color: $blue
right: 2rem right: 2rem
bottom: -.6em bottom: -.6em
@ -98,23 +132,63 @@ body
padding: 0 .25em padding: 0 .25em
background: $body-background-color background: $body-background-color
.card-image, .card-content .card-image
cut-corner-top-right(16px) cut-corner-top-right(16px)
.card-content .card-content:before
background-color: $body-background-color background-color: $body-background-color
cut-corner-reverse(16px) cut-corner-reverse(16px)
.card-image + .card-content .card-image + .card-content:before
cut-corner-bottom-left(16px) cut-corner-bottom-left(16px)
.button .button:not(input)
border: none border: none
outline: none outline: none
cut-corner(8px) background: transparent !important
undercover-before()
&.is-primary &:before
border-radius: 0 !important cut-corner(8px)
// clip-path will cut off overflown content inside a button
// thus we need to use :before pseudo-element to style the buttons
for $name, $pair in $colors
$color = $pair['1']
$color-invert = $pair['2']
&.is-{$name}
&:before
background-color: $color
color: $color-invert
&:hover:before, &.is-hovered:before
background-color: darken($color, 2.5%)
color: $color-invert
&:focus:before, &.is-focused:before
color: $color-invert
&:active:before, &.is-active:before
background-color: darken($color, 5%)
color: $color-invert
&[disabled]:before, fieldset[disabled] &:before
background-color: $color
&.is-inverted
&:before
background-color: $color-invert
color: $color
&:hover:before, &.is-hovered:before
background-color: darken($color-invert, 5%)
&[disabled]:before, fieldset[disabled] &:before
background-color: $color-invert
border-color: transparent
box-shadow: none
color: $color
.field.has-addons .field.has-addons
.control:not(:first-child) .control:not(:first-child)
@ -153,7 +227,7 @@ body
background: url('../img/razor-top-black.svg') repeat-x top background: url('../img/razor-top-black.svg') repeat-x top
height: 40px height: 40px
.navbar-start .navbar-menu
.navbar-item .navbar-item
&:hover, &.is-active &:hover, &.is-active
color: $navbar-background-color color: $navbar-background-color