fix(style): donation button qrcode not displaying

README.md

@@ -139,9 +139,9 @@ Icarus directly import stylesheets from the [highlight.js](https://highlightjs.o
         <th>Kimbie Dark</th>
     </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/monokai.png?1"></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/atom-one-light.png?2"></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?2"></td>
     </tr>
 </table>
 

include/style/base.styl

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

include/style/card.styl

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

source/css/cyberpunk.styl

@@ -7,18 +7,39 @@ $shadow ?= none
 $radius ?= 0
 $radius-small ?= 0
 // base colors
-$white ?= #cdcdcd
-$red ?= #ff003c
-$yellow ?= #fcee09
-$blue ?= #02d7f2
+$white ?= #fff
+$white-bis ?= #cdcdcd
+$grey ?= #848484
 $black ?= #000
 $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
 $scheme-main ?= $black
-$primary ?= $yellow
 $link ?= $blue
 $link-hover ?= $primary
-$text ?= $white
+$text ?= $white-bis
 $text-strong ?= $yellow
 $body-background-color ?= $scheme-main
 $input-color ?= $text
@@ -34,6 +55,7 @@ $navbar-item-margin-v ?= 1.25rem
 $navbar-item-margin-h ?= .25rem
 $navbar-item-padding-v ?= 0
 $navbar-item-padding-h ?= .5rem
+$card-background-color ?= transparent
 $menu-label-color ?= $blue
 $menu-item-hover-color ?= $black
 $menu-item-hover-background-color ?= $yellow
@@ -41,7 +63,7 @@ $menu-list-border-left ?= 1px solid $text
 $tag-color ?= $black
 $tag-background-color ?= $blue
 $timeline-fg-line ?= $blue
-$post-navigation-fg ?= $white
+$post-navigation-fg ?= $white-bis
 $searchbox-bg-container ?= $black-bis
 $searchbox-border ?= $blue
 $searchbox-bg-input ?= $black-bis
@@ -66,6 +88,18 @@ cut-corner-bottom-left(size)
 cut-corner-bottom-right(size)
     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
     counter-reset: card
 
@@ -74,14 +108,13 @@ body
     background: $blue
 
 .card:not(#back-to-top)
-    overflow: visible
+    position: relative
     counter-increment: card
 
-    &:before, &:after
-        position: absolute
+    &, .card-content
+        undercover-before()
 
     &:before
-        content: ''
         top: -1.2px
         left: -1.2px
         right: -1.2px
@@ -91,6 +124,7 @@ body
 
     &:after
         content: 'R' counter(card)
+        position: absolute
         color: $blue
         right: 2rem
         bottom: -.6em
@@ -98,23 +132,63 @@ body
         padding: 0 .25em
         background: $body-background-color
 
-    .card-image, .card-content
+    .card-image
         cut-corner-top-right(16px)
 
-    .card-content
+    .card-content:before
         background-color: $body-background-color
         cut-corner-reverse(16px)
 
-    .card-image + .card-content
+    .card-image + .card-content:before
         cut-corner-bottom-left(16px)
 
-.button
+.button:not(input)
     border: none
     outline: none
-    cut-corner(8px)
+    background: transparent !important
+    undercover-before()
 
-    &.is-primary
-        border-radius: 0 !important
+    &:before
+        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
     .control:not(:first-child)
@@ -153,7 +227,7 @@ body
         background: url('../img/razor-top-black.svg') repeat-x top
         height: 40px
 
-    .navbar-start
+    .navbar-menu
         .navbar-item
             &:hover, &.is-active
                 color: $navbar-background-color