chore: refactor styles to fit hexo-component-inferno 0.10

include/style/article.styl

@@ -5,6 +5,33 @@ $article-font-size ?= 1.1rem
 
 article
     &.media
+        color: $text-light
+
+        a
+            color: inherit
+
+            &:hover
+                color: $primary
+
+        .image
+            width: 64px
+            height: 64px
+
+            img
+                object-fit: cover
+                width: 100%
+                height: 100%
+
+        .title
+            @extend .is-size-6
+            margin-bottom: .25em
+
+        .date, .categories
+            @extend .is-size-7
+
+        .categories
+            @extend .is-uppercase
+
         .media-content
             color: $text-light
 
@@ -60,10 +87,11 @@ article
                 footer
                     strong + cite
                         margin-left: .5em
-            
+
             .message.message-immersive
                 border-radius: 0
-                margin: 0 0-($card-content-padding) $card-content-padding 0-($card-content-padding)
+                margin: 0 0 - $card-content-padding $card-content-padding 0 - $card-content-padding
+
                 .message-body
                     border: none
 
@@ -116,7 +144,7 @@ article
         content: '\f25e'
         font-size: 200px
         font-family: 'Font Awesome 5 Brands'
-        opacity: 0.1
+        opacity: .1
 
     .level-left
         flex-wrap: wrap
@@ -130,7 +158,7 @@ article
             @extend .mb-1
 
         a
-            @extend .size-small, .has-text-grey
+            @extend .is-size-7, .has-text-grey
 
     .licensing-meta
         .level-item
@@ -144,8 +172,8 @@ article
             vertical-align: bottom
 
         h6
-            @extend .size-small
-        
+            @extend .is-size-7
+
         a
             color: inherit
 
@@ -156,6 +184,7 @@ a
             flex-shrink: 1
             word-wrap: break-word
             white-space: normal
+
     &.article-nav-next
         span
             text-align: right

include/style/base.styl

@@ -9,6 +9,9 @@ $body-background-color ?= #f7f7f7
 $family-sans-serif ?= Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
 $family-code ?= 'Source Code Pro', monospace, 'Microsoft YaHei'
 
+$size-7 ?= .85rem
+$size-small ?= .75rem
+
 $primary ?= $blue
 $custom-colors ?= {
     grey-lightest: {

include/style/donate.styl

@@ -5,6 +5,15 @@ $donate-qrcode-max-width ?= 280px
 $donate-qrcode-shadow ?= $card-shadow
 $donate-qrcode-box-radius ?= $card-radius
 
+$donate-button-colors ?= {
+    'afdian': rgb(136, 95, 217),
+    'alipay': rgb(0, 160, 232),
+    'buymeacoffee': rgb(255, 221, 0),
+    'paypal': rgb(254, 183, 0),
+    'patreon': rgb(255, 66, 77),
+    'wechat': rgb(26, 173, 25),
+}
+
 .donate
     position: relative
 
@@ -32,3 +41,18 @@ $donate-qrcode-box-radius ?= $card-radius
     &:last-child:not(:first-child)
         .qrcode
             right: -.75rem
+
+    for $name, $color in $donate-button-colors
+        &[data-type={'"' + $name + '"'}]
+            color: findColorInvert($color)
+            background-color: $color
+            border-color: transparent
+
+            &:active
+                background-color: darken($color, 5%)
+
+            &:hover
+                background-color: darken($color, 2.5%)
+
+            &:focus:not(:active)
+                box-shadow: 0 0 0 .125em rgba($color, .25)

include/style/helper.styl

@@ -138,15 +138,6 @@ for n in (0 .. 5)
     &:hover
         color: $primary !important
 
-/* ---------------------------------
- *           Font helpers
- * --------------------------------- */
-.size-small
-    font-size: .85rem !important
-
-.line-height-inherit
-    line-height: inherit !important
-
 /* ---------------------------------
  *          Image helpers
  * --------------------------------- */

include/style/pagination.styl

@@ -6,6 +6,9 @@ $pagination-background-color ?= $button-background-color
 $post-navigation-fg ?= $grey
 
 .pagination
+    @extend .pagination.is-centered
+    margin-top: 1.5rem
+
     .pagination-link,
     .pagination-ellipsis,
     .pagination-previous,

include/style/widget.styl

@@ -0,0 +1,27 @@
+.widget
+    .menu-list
+        li
+            ul
+                margin-right: 0
+
+        .level
+            margin-bottom: 0
+
+            .level-left, .level-right, .level-item
+                flex-shrink: 1
+
+            .level-left, .level-right
+                align-items: flex-start
+
+        .tag
+            background: $light-grey
+            color: $white-invert
+
+    .tags
+        .tag:first-child
+            background: $primary
+            color: $primary-invert
+
+        .tag:last-child
+            background: $light-grey
+            color: $white-invert

layout/common/article.jsx

@@ -40,7 +40,7 @@ module.exports = class extends Component {
                 </div> : null}
                 {/* Metadata */}
                 <article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
-                    {page.layout !== 'page' ? <div class="article-meta size-small is-uppercase level is-mobile">
+                    {page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
                         <div class="level-left">
                             {/* Creation Date */}
                             {page.date && <span class="level-item" dangerouslySetInnerHTML={{
@@ -89,14 +89,14 @@ module.exports = class extends Component {
                     {!index && article && article.licenses && Object.keys(article.licenses)
                         ? <ArticleLicensing.Cacheable page={page} config={config} helper={helper} /> : null}
                     {/* Tags */}
-                    {!index && page.tags && page.tags.length ? <div class="article-tags size-small mb-4">
+                    {!index && page.tags && page.tags.length ? <div class="article-tags is-size-7 mb-4">
                         <span class="mr-2">#</span>
                         {page.tags.map(tag => {
                             return <a class="link-muted mr-2" rel="tag" href={url_for(tag.path)}>{tag.name}</a>;
                         })}
                     </div> : null}
                     {/* "Read more" button */}
-                    {index && page.excerpt ? <a class="article-more button is-small size-small" href={`${url_for(page.link || page.path)}#more`}>{__('article.more')}</a> : null}
+                    {index && page.excerpt ? <a class="article-more button is-small is-size-7" href={`${url_for(page.link || page.path)}#more`}>{__('article.more')}</a> : null}
                     {/* Share button */}
                     {!index ? <Share config={config} page={page} helper={helper} /> : null}
                 </article>

layout/common/footer.jsx

@@ -33,7 +33,7 @@ class Footer extends Component {
                         <a class="footer-logo is-block mb-2" href={siteUrl}>
                             {footerLogo}
                         </a>
-                        <p class="size-small">
+                        <p class="is-size-7">
                             <span dangerouslySetInnerHTML={{ __html: `&copy; ${siteYear} ${author || siteTitle}` }}></span>
                             &nbsp;&nbsp;Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>&nbsp;&&nbsp;
                             <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>

layout/widget/profile.jsx

@@ -29,15 +29,15 @@ class Profile extends Component {
             followTitle,
             socialLinks
         } = this.props;
-        return <div class="card widget">
+        return <div class="card widget" data-type="profile">
             <div class="card-content">
                 <nav class="level">
                     <div class="level-item has-text-centered flex-shrink-1">
                         <div>
                             <figure class="image is-128x128 mx-auto mb-2">
                                 <img class={'avatar' + (avatarRounded ? ' is-rounded' : '')} src={avatar} alt={author} />
                             </figure>
-                            {author ? <p class="title is-size-4 is-block line-height-inherit">{author}</p> : null}
+                            {author ? <p class="title is-size-4 is-block" style={{'line-height': 'inherit'}}>{author}</p> : null}
                             {authorTitle ? <p class="is-size-6 is-block">{authorTitle}</p> : null}
                             {location ? <p class="is-size-6 is-flex justify-content-center">
                                 <i class="fas fa-map-marker-alt mr-1"></i>

source/css/cyberpunk.styl

@@ -258,10 +258,6 @@ article.article
 .article-licensing
     background: $black-ter
 
-    .licensing-title
-        a
-            @extend .size-small, .has-text-grey
-
 .content
     blockquote
         background: transparent

source/css/style.styl

@@ -12,6 +12,7 @@
 @import '../../include/style/timeline'
 @import '../../include/style/search'
 @import '../../include/style/codeblock'
+@import '../../include/style/widget'
 @import '../../include/style/donate'
 @import '../../include/style/plugin'
 @import '../../include/style/responsive'