breaking changes: 移除 html 的 font-size 改為瀏覽器默認大小

feat: 為文章單獨設置 TOC simple_style 顯示 closed #631 feat: page 頁頂部圖增加黑色遮罩 closed #671 feat: 首頁 pagination 更新 UI fix: 修復使用本地搜索時，搜索插件配置為不搜索文章內容會無法使用搜索的 bug fix: 修復開啟 photofigcaption 後，導致inlineImg標籤外掛顯示錯亂的 bug fix: 修復字體過大/過小而導致部分 ui 偏移的 bug improvement: 主題 css 使用的 rem 改為 em 或 px improvement: 修改没有顶部图下，文章页的标题大小 closed #669 improvement: 代碼優化
2026-04-10 21:17:07 +08:00 · 2021-09-20 17:55:20 +08:00
parent 484f036adb
commit 3708fdf569
42 changed files with 387 additions and 425 deletions
--- a/_config.yml
+++ b/_config.yml
@@ -171,7 +171,7 @@ toc:
  post: true
  page: false
  number: true
-  style_simple: false
+  style_simple: false # for post

 post_copyright:
  enable: true
--- a/layout/includes/mixins/post-ui.pug
+++ b/layout/includes/mixins/post-ui.pug
@@ -1,11 +1,16 @@
 mixin postUI(posts)
  each article , index in page.posts.data
    .recent-post-item
-      - let link = article.link || article.path
-      - let title = article.title || _p('no_title')
-      - let leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
-      - let post_cover = article.cover
-      - let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+      -
+        let link = article.link || article.path
+        let title = article.title || _p('no_title')
+        const position = theme.cover.position
+        let leftOrRight = position === 'both' 
+          ? index%2 == 0 ? 'left' : 'right'
+          : position === 'left' ? 'left' : 'right'
+        let post_cover = article.cover
+        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+      -
      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          a(href=url_for(link) title=title)
--- a/layout/includes/widget/card_post_toc.pug
+++ b/layout/includes/widget/card_post_toc.pug
@@ -4,6 +4,7 @@
  .item-headline
    i.fas.fa-stream
    span= _p('aside.card_toc')
+    span.toc-percentage

  if (page.encrypt == true)
    .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
--- a/layout/includes/widget/index.pug
+++ b/layout/includes/widget/index.pug
@@ -1,7 +1,9 @@
 #aside-content.aside-content
  //- post
  if is_post()
-    if showToc && theme.toc.style_simple
+    - const tocStyle = page.style_simple
+    - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
+    if showToc && tocStyleVal
      .sticky_layout
        include ./card_post_toc.pug
    else
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hexo-theme-butterfly",
-  "version": "4.0.0-b5",
+  "version": "4.0.0-b6",
  "description": "A Simple and Card UI Design theme for Hexo",
  "main": "package.json",
  "scripts": {
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -17,6 +17,16 @@
  text-rendering: auto
  -webkit-font-smoothing: antialiased

+// card hover
+.cardHover
+  border-radius: 8px
+  background: var(--card-bg)
+  box-shadow: var(--card-box-shadow)
+  transition: all .3s
+
+  &:hover
+    box-shadow: var(--card-hover-box-shadow)
+
 maxWidth600()
  @media screen and (max-width: 600px)
    {block}
@@ -123,12 +133,12 @@ if hexo-config('avatar.effect') == true

@keyframes bottom-top
  0%
-    opacity: 0
    margin-top: 50px
+    opacity: 0

  100%
-    opacity: 1
    margin-top: 0
+    opacity: 1

@keyframes titlescale
  0%
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -30,10 +30,6 @@
  --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
  --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)

-html
-  height: 100%
-  font-size: 20px
-
 body
  position: relative
  min-height: 100%
@@ -79,7 +75,7 @@ h4,
 h5,
 h6
  position: relative
-  margin: 1rem 0 .7rem
+  margin: 20px 0 14px
  color: var(--text-highlight-color)
  font-weight: bold

@@ -91,7 +87,7 @@ h6

 hr
  position: relative
-  margin: 2rem auto
+  margin: 40px auto
  border: 2px dashed var(--hr-border)

  if hexo-config('hr_icon.enable')
@@ -115,7 +111,7 @@ hr

 .table-wrap
  overflow-x: scroll
-  margin: 0 0 1rem
+  margin: 0 0 20px

 table
  display: table
@@ -129,7 +125,7 @@ table

  th,
  td
-    padding: .3rem .6rem
+    padding: 6px 12px
    border: 1px solid var(--light-grey)
    vertical-align: middle

@@ -213,8 +209,24 @@ if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-confi
      filter: none

 .img-alt
-  margin: -.5rem 0 .5rem
+  margin: -10px 0 10px
  color: #858585

  &:hover
    text-decoration: none !important
+
+blockquote
+  margin: 0 0 20px
+  padding: 12px 15px
+  border-left: 3px solid $blockquote-padding-color
+  background-color: var(--blockquote-bg)
+  color: var(--blockquote-color)
+
+  footer
+    cite
+      &:before
+        padding: 0 5px
+        content: '—'
+
+  & > :last-child
+    margin-bottom: 0 !important
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -23,7 +23,7 @@ if $prismjsEnable

 $code-block
  overflow: auto
-  margin: 0 0 1rem
+  margin: 0 0 20px
  padding: 0
  background: var(--hl-bg)
  color: var(--hl-color)
@@ -33,28 +33,6 @@ $code-block
    counter-reset: line
    white-space: pre-wrap

-blockquote
-  margin: 0 0 1rem
-  padding: .1rem .8rem
-  border-left: .2rem solid $blockquote-padding-color
-  background-color: var(--blockquote-bg)
-  color: var(--blockquote-color)
-
-  a
-    word-break: break-all
-
-  p
-    margin: 0 !important
-    padding: .5rem 0
-
-  footer
-    padding: 0 0 .5rem
-
-    cite
-      &:before
-        padding: 0 .3em
-        content: '—'
-
 #article-container
  pre,
  code
@@ -62,7 +40,7 @@ blockquote
    font-family: $code-font-family !important

  code
-    padding: .1rem .2rem
+    padding: 2px 4px
    background: $code-background
    color: $code-foreground

@@ -87,7 +65,7 @@ blockquote

    figcaption,
    .caption
-      padding: .3rem 0 .1rem .7rem
+      padding: 6px 0 2px 14px
      font-size: $code-font-size
      line-height: 1em

@@ -104,7 +82,7 @@ blockquote
    display: flex
    align-items: center
    overflow: hidden
-    min-height: 1.2rem
+    min-height: 24px
    height: 2.15em
    background: var(--hltools-bg)
    color: var(--hltools-color)
@@ -115,12 +93,12 @@ blockquote

    .expand
      position: absolute
-      padding: .4rem .7rem
+      padding: .57em .7em
      cursor: pointer
      transition: transform .3s

      & + .code-lang
-        left: 1.7rem
+        left: 1.6em

      &.closed
        transition: all .3s
@@ -128,7 +106,7 @@ blockquote

    .code-lang
      position: absolute
-      left: .7rem
+      left: 14px
      text-transform: uppercase
      font-weight: bold
      font-size: 1.15em
@@ -136,13 +114,13 @@ blockquote

    .copy-notice
      position: absolute
-      right: 1.7rem
+      right: 2.1em
      opacity: 0
      transition: opacity .4s

    .copy-button
      position: absolute
-      right: .7rem
+      right: 14px
      cursor: pointer
      transition: color .2s

@@ -160,7 +138,7 @@ blockquote

  if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
    figure.highlight
-      margin: 0 0 1.2rem
+      margin: 0 0 24px
      border-radius: 7px
      box-shadow: 0 5px 10px 0 $highlight-mac-border
      -webkit-transform: translateZ(0)
@@ -168,7 +146,7 @@ blockquote
      .highlight-tools
        &:after
          position: absolute
-          left: .7rem
+          left: 14px
          width: 12px
          height: 12px
          border-radius: 50%
@@ -184,13 +162,13 @@ blockquote
            transform: rotate(90deg) !important

          & ~ .copy-notice
-            right: 2.8rem
+            right: 3.3em

          & ~ .copy-button
-            right: 1.8rem
+            right: 2.1em

        .code-lang
-          left: 3.8rem !important
+          left: 75px

  if hexo-config('highlight_height_limit')
    .code-expand-btn
@@ -204,7 +182,7 @@ blockquote
      cursor: pointer

      i
-        padding: .3rem 0
+        padding: 6px 0
        color: var(--hlnumber-color)
        animation: code-expand-key 1.2s infinite

--- a/source/css/_highlight/highlight/index.styl
+++ b/source/css/_highlight/highlight/index.styl
@@ -7,8 +7,8 @@ if $highlight_theme != false
      if wordWrap
        &:before
          display: inline-block
-          padding: 0 .3rem 0 0
-          min-width: 1.6rem
+          padding: 0 6px 0 0
+          min-width: 30px
          color: var(--hlnumber-color)
          content: counter(line)
          counter-increment: line
@@ -27,13 +27,13 @@ if $highlight_theme != false
        border: none

    .gutter pre
-      padding-right: .5rem
-      padding-left: .5rem
+      padding-right: 10px
+      padding-left: 10px
      background-color: var(--hlnumber-bg)
      color: var(--hlnumber-color)
      text-align: right

    .code pre
-      padding-right: .5rem
-      padding-left: .5rem
+      padding-right: 10px
+      padding-left: 10px
      width: 100%
--- a/source/css/_highlight/prismjs/index.styl
+++ b/source/css/_highlight/prismjs/index.styl
@@ -14,7 +14,7 @@ if $highlight_theme != false

    .caption
      margin-left: -3.8em
-      padding: .2rem .8rem !important
+      padding: 4px 16px !important

      a
        padding: 0 !important
--- a/source/css/_highlight/theme.styl
+++ b/source/css/_highlight/theme.styl
@@ -11,7 +11,7 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
    color: alpha($highlight-foreground, .8),
    bg-color: darken($highlight-background, 2)
  }
-  $highlight-scrollbar = darken($highlight-background, 6)
+  $highlight-scrollbar = lighten($highlight-background, 8)

  if $highlighEnable
    $highlight-comment = #969896
@@ -37,7 +37,7 @@ if $highlight_theme == 'pale night'
    color: $highlight-foreground,
    bg-color: darken($highlight-background, 2)
  }
-  $highlight-scrollbar = darken($highlight-background, 6)
+  $highlight-scrollbar = lighten($highlight-background, 8)

  if $highlighEnable
    $highlight-comment = #676E95
@@ -63,7 +63,7 @@ if $highlight_theme == 'ocean'
    color: $highlight-foreground,
    bg-color: darken($highlight-background, 2)
  }
-  $highlight-scrollbar = darken($highlight-foreground, 40)
+  $highlight-scrollbar = lighten($highlight-background, 8)

  if $highlighEnable
    $highlight-comment = rgba(101, 115, 126, .8)
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -14,20 +14,14 @@
    margin-top: 0

    +maxWidth900()
-      margin-top: 1rem
+      margin-top: 20px

  .card-widget
+    @extend .cardHover
    position: relative
    overflow: hidden
-    margin-top: 1rem
-    padding: 1rem 1.2rem
-    border-radius: 8px
-    background: var(--card-bg)
-    box-shadow: var(--card-box-shadow)
-    transition: box-shadow .3s
-
-    &:hover
-      box-shadow: var(--card-hover-box-shadow)
+    margin-top: 20px
+    padding: 20px 24px

    if hexo-config('aside.mobile') == false
      +maxWidth768()
@@ -41,11 +35,11 @@
        font-size: 1.57em

      &__description
-        margin-top: -.3rem
+        margin-top: -.42em

    .card-info-data
      display: table
-      margin: .7rem 0 .2rem
+      margin: 14px 0 4px
      width: 100%
      table-layout: fixed

@@ -59,18 +53,17 @@
            font-size: 1em

          .length-num
-            margin-top: -.3rem
+            margin-top: -.42em
            color: var(--text-highlight-color)
            font-size: 1.4em

    .card-info-social-icons
-      margin: .3rem 0 -.3rem
+      margin: 6px 0 -6px

      .social-icon
-        margin: 0 .5rem
+        margin: 0 10px
        color: var(--font-color)
        font-size: 1.4em
-        cursor: pointer

      i
        transition: all .3s
@@ -80,21 +73,21 @@

    #card-info-btn
      display: block
-      margin-top: .7rem
+      margin-top: 14px
      background-color: var(--btn-bg)
      color: var(--btn-color)
      text-align: center
      line-height: 2.4

      span
-        padding-left: .5rem
+        padding-left: 10px

  .item-headline
-    padding-bottom: .3rem
+    padding-bottom: 6px
    font-size: 1.2em

    span
-      margin-left: .3rem
+      margin-left: 6px

  .sticky_layout
    +minWidth900()
@@ -106,7 +99,7 @@
  .card-tag-cloud
    a
      display: inline-block
-      padding: 0 .2rem
+      padding: 0 4px

      &:hover
        color: $text-hover !important
@@ -114,13 +107,13 @@
  .aside-list
    & > span
      display: block
-      margin-bottom: .5rem
+      margin-bottom: 10px
      text-align: center

    & > .aside-list-item
      display: flex
      align-items: center
-      padding: .3rem 0
+      padding: 6px 0

      &:first-child
        padding-top: 0
@@ -184,13 +177,13 @@
  .card-categories ul.card-category-list > .card-category-list-item
    a
      display: inline-block
-      padding: .15rem .5rem
+      padding: 3px 10px
      width: 100%
      color: var(--font-color)
      transition: all .4s

      &:hover
-        padding: .15rem .85rem
+        padding: 3px 17px
        background-color: var(--text-bg-hover)

      span
@@ -208,7 +201,7 @@
  .card-categories
    .card-category-list
      &.child
-        padding: 0 0 0 .8rem
+        padding: 0 0 0 16px

      > .parent
        > a
@@ -222,8 +215,8 @@

        i
          float: right
-          margin-right: -.35rem
-          padding: .35rem
+          margin-right: -.5em
+          padding: .5em
          transition: transform .3s
          transform: rotate(0)

@@ -239,12 +232,12 @@
      .webinfo-item
        display: flex
        align-items: center
-        padding: .1rem .5rem 0
+        padding: 2px 10px 0

        div
          &:first-child
            flex: 1
-            padding-right: 1rem
+            padding-right: 20px

  // toc
  #card-toc
@@ -261,7 +254,15 @@
      opacity: 0
      transform-origin: right bottom

+    .toc-percentage
+      float: right
+      margin-top: -9px
+      color: #a9a9a9
+      font-style: italic
+      font-size: 140%
+
    .toc-content
+      clear: both
      overflow-y: auto
      max-height: calc(100vh - 120px)

@@ -288,11 +289,11 @@

      ol
        margin: 0
-        padding-left: .4rem
+        padding-left: 15px

      .toc-link
        display: block
-        padding-left: .3rem
+        padding-left: 6px
        border-left: 3px solid transparent
        color: var(--toc-link-color)
        transition: all .2s ease-in-out
@@ -302,15 +303,6 @@
          background: $theme-toc-color
          color: $toc-active-color

-      &:before
-        position: absolute
-        top: .6rem
-        right: 1.2rem
-        color: #a9a9a9
-        content: attr(progress-percentage)
-        font-style: italic
-        font-size: 1.2rem
-
  :only-child
    > .card-widget
      margin-top: 0
--- a/source/css/_layout/comments.styl
+++ b/source/css/_layout/comments.styl
@@ -1,6 +1,6 @@
 #post-comment
  .comment-head
-    margin-bottom: 1rem
+    margin-bottom: 20px

    .comment-headline
      display: inline-block
@@ -13,8 +13,8 @@

      if hexo-config('comments.text')
        float: right
-        margin: .1rem auto 0
-        padding: .2rem .8rem
+        margin: 2px auto 0
+        padding: 4px 16px
        width: max-content
        border-radius: 8px
        background: $comments-switch-bg
@@ -33,7 +33,7 @@
      .switch-btn
        position: relative
        display: inline-block
-        margin: -4px .4rem 0
+        margin: -4px 8px 0
        width: 42px
        height: 22px
        border-radius: 34px
--- a/source/css/_layout/footer.styl
+++ b/source/css/_layout/footer.styl
@@ -15,7 +15,7 @@

 #footer-wrap
  position: relative
-  padding: 2rem 1rem
+  padding: 40px 20px
  color: var(--light-grey)
  text-align: center

@@ -26,10 +26,10 @@
      text-decoration: underline

  .footer-separator
-    margin: 0 .2rem
+    margin: 0 4px

  .icp-icon
    padding: 0 4px
-    vertical-align: text-bottom
    max-height: 1.4em
-    width auto
+    width: auto
+    vertical-align: text-bottom
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -7,6 +7,13 @@
  background-repeat: no-repeat
  transition: all .5s

+  &:not(.not-top-img):before
+    position: absolute
+    width: 100%
+    height: 100%
+    background-color: alpha($dark-black, .3)
+    content: ''
+
  // index
  &.full_page
    height: $index_top_img_height
@@ -15,14 +22,14 @@
    #site-info
      position: absolute
      top: $index_site_info_top
-      padding: 0 .5rem
+      padding: 0 10px
      width: 100%

  #site-title,
  #site-subtitle,
  #scroll-down .scroll-down-effects
    text-align: center
-    text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
    line-height: 1.5

  #site-title
@@ -43,18 +50,17 @@
  #site_social_icons
    display: none
    margin: 0 auto
-    width: 15rem
+    width: 300px
    text-align: center

    +maxWidth768()
      display: block

    .social-icon
-      margin: 0 .5rem
+      margin: 0 10px
      color: var(--light-grey)
-      text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
      font-size: 1.43em
-      cursor: pointer

  #scroll-down
    position: absolute
@@ -70,54 +76,47 @@

  // page
  &.not-home-page
-    height: 20rem
+    height: 400px

    +maxWidth768()
-      height: 14rem
+      height: 280px

  #page-site-info
    position: absolute
-    top: 10rem
-    padding: 0 .5rem
+    top: 200px
+    padding: 0 10px
    width: 100%

    +maxWidth768()
-      top: 7rem
+      top: 140px

  // post
  &.post-bg
-    height: 20rem
+    height: 400px

    +maxWidth768()
-      height: 18rem
+      height: 360px

    &:before
-      position: absolute
-      top: 0
-      left: 0
-      display: block
-      width: 100%
-      height: 100%
      background-color: alpha($dark-black, .5)
-      content: ''

  #post-info
    position: absolute
-    bottom: 5rem
+    bottom: 100px
    padding: 0 8%
    width: 100%
    text-align: center

    +maxWidth900()
-      bottom: 1.5rem
+      bottom: 30px
      text-align: left

    +maxWidth768()
-      bottom: 1.1rem
-      padding: 0 1.1rem
+      bottom: 22px
+      padding: 0 22px

  &.not-top-img
-    margin-bottom: .5rem
+    margin-bottom: 10px
    height: 60px
    background: 0

@@ -157,21 +156,17 @@
        top: 70px
        transition: top .5s

-.apple
-  #page-header.full_page
-    background-attachment: scroll !important
-
 #page
  h1.page-title
-    margin: .4rem 0 1rem
+    margin: 8px 0 20px

 // for not top_img
 #post
  & > #post-info
-    margin-bottom: 1.5rem
+    margin-bottom: 30px

    .post-title
-      padding-bottom: .2rem
+      padding-bottom: 4px
      border-bottom: 1px solid var(--light-grey)
      color: var(--text-highlight-color)

@@ -185,7 +180,7 @@
 #post-info
  .post-title
    @extend .limit-more-line
-    margin-bottom: .4rem
+    margin-bottom: 8px
    color: var(--white)
    font-weight: normal
    font-size: 2.5em
@@ -193,10 +188,10 @@
    -webkit-line-clamp: 3

    +maxWidth768()
-      font-size: 1.72em
+      font-size: 2.1em

    .post-edit-link
-      padding-left: .5rem
+      padding-left: 10px

  #post-meta
    color: var(--light-grey)
@@ -216,14 +211,14 @@

    .post-meta
      &-separator
-        margin: 0 .25rem
+        margin: 0 5px

      &-icon
-        margin-right: .2rem
+        margin-right: 4px

      &-label
        if hexo-config('post_meta.post.label')
-          margin-right: .2rem
+          margin-right: 4px
        else
          display: none

@@ -264,7 +259,7 @@

  #toggle-menu
    display: none
-    padding: .1rem 0 0 .3rem
+    padding: 2px 0 0 6px
    vertical-align: top

    &:hover
@@ -277,7 +272,7 @@
      color: var(--white)

  #site-name
-    text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
+    text-shadow: 2px 2px 4px rgba($dark-black, .15)
    font-weight: bold
    cursor: pointer

@@ -287,7 +282,7 @@
    .menus_item
      position: relative
      display: inline-block
-      padding: 0 0 0 .7rem
+      padding: 0 0 0 14px

      &:hover
        .menus_item_child
@@ -327,7 +322,7 @@

          a
            display: inline-block
-            padding: .3rem .7rem
+            padding: 6px 14px
            width: 100%
            color: var(--font-color) !important
            text-shadow: none !important
@@ -350,12 +345,12 @@

  #search-button
    display: inline
-    padding: 0 0 0 .7rem
+    padding: 0 0 0 14px

  .site-page
    position: relative
-    padding-bottom: .3rem
-    text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
+    padding-bottom: 6px
+    text-shadow: 1px 1px 2px rgba($dark-black, .3)
    font-size: .78em
    cursor: pointer

--- a/source/css/_layout/loading.styl
+++ b/source/css/_layout/loading.styl
@@ -43,7 +43,7 @@ if hexo-config('preloader')
      .loading-word
        position: absolute
        color: var(--preloader-color)
-        font-size: .8rem
+        font-size: 16px

      .configure-core
        width: 100%
--- a/source/css/_layout/pagination.styl
+++ b/source/css/_layout/pagination.styl
@@ -1,24 +1,12 @@
 #pagination
-  overflow: hidden
-  margin-top: 1rem
-  width: 100%
-
  .pagination
+    margin-top: 20px
    text-align: center

  .page-number
-    display: inline-block
-    margin: 0 .2rem
-    min-width: w = 1.2rem
-    height: w
-    text-align: center
-    line-height: w
-    cursor: pointer
-
    &.current
      background: $theme-paginator-color
      color: var(--white)
-      cursor: default

  img.prev-cover,
  img.next-cover
@@ -32,7 +20,7 @@
  .pagination-info
    position: absolute
    top: 50%
-    padding: 1rem 2rem
+    padding: 20px 40px
    width: 100%
    transform: translate(0, -50%)

@@ -75,5 +63,32 @@
        transform: scale(1.1)

  &.pagination-post
-    margin-top: 2rem
+    overflow: hidden
+    margin-top: 40px
    background: $dark-black
+
+.layout
+  & > .recent-posts
+    .pagination
+      & > *
+        @extend .cardHover
+        display: inline-block
+        margin: 0 6px
+        width: w = 2.5em
+        height: w
+        line-height: w
+
+        &:hover
+          background: var(--btn-hover-color)
+          color: var(--btn-color)
+
+  & > div:not(.recent-posts)
+    .pagination
+      .page-number
+        display: inline-block
+        margin: 0 4px
+        min-width: w = 24px
+        height: w
+        text-align: center
+        line-height: w
+        cursor: pointer
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -1,16 +1,13 @@
 beautify()
  headStyle(fontsize)
-    padding-left: unit(fontsize + .4, 'rem')
-
-    code
-      font-size: unit(fontsize, 'rem')
+    padding-left: unit(fontsize + .4, 'px')

    &:before
-      margin-left: unit((-(fontsize + .2)), 'rem')
-      font-size: unit(fontsize, 'rem')
+      margin-left: unit((-(fontsize + 4)), 'px')
+      font-size: unit(fontsize, 'px')

    &:hover
-      padding-left: unit(fontsize + .6, 'rem')
+      padding-left: unit(fontsize + 12, 'px')

  h1,
  h2,
@@ -22,7 +19,7 @@ beautify()

    &:before
      position: absolute
-      top: calc(50% - .35rem)
+      top: calc(50% - 7px)
      color: $title-prefix-icon-color
      content: $title-prefix-icon
      line-height: 1
@@ -34,47 +31,47 @@ beautify()
        color: $light-blue

  h1
-    headStyle(1)
+    headStyle(20)

  h2
-    headStyle(.9)
+    headStyle(18)

  h3
-    headStyle(.8)
+    headStyle(16)

  h4
-    headStyle(.7)
+    headStyle(14)

  h5
-    headStyle(.6)
+    headStyle(12)

  h6
-    headStyle(.6)
+    headStyle(12)

  ol,
  ul
-    margin-top: .4rem
-    padding: 0 0 0 .8rem
+    margin-top: 8px
+    padding: 0 0 0 16px
    list-style: none
    counter-reset: li

    +maxWidth768()
-      padding: 0 0 0 .4rem
+      padding: 0 0 0 8px

    p
-      margin: 0 0 .5rem
+      margin: 0 0 10px

    ol,
    ul
-      padding-left: .6rem
+      padding-left: 12px

      +maxWidth768()
-        padding-left: .2rem
+        padding-left: 4px

    li
      &:not(.tab)
        position: relative
-        margin: .2rem 0
+        margin: 4px 0

      &:hover
        &:before
@@ -127,19 +124,19 @@ beautify()
 no-beautify()
  ol,
  ul
-    margin-top: .4rem
+    margin-top: 8px

    p
-      margin: 0 0 .5rem
+      margin: 0 0 10px

    ol,
    ul
-      padding-left: .5rem
+      padding-left: 10px

    li
      position: relative
-      margin: .3rem 0
-      padding-left: .3rem
+      margin: 6px 0
+      padding-left: 6px

 #article-container
  word-wrap: break-word
@@ -153,14 +150,14 @@ no-beautify()

  img
    display: block
-    margin: 0 auto .8rem
+    margin: 0 auto 20px
    max-width: 100%

  p
-    margin: 0 0 .8rem
+    margin: 0 0 16px

  iframe
-    margin: 0 0 1rem
+    margin: 0 0 20px

  kbd
    margin: 0 3px
@@ -197,11 +194,11 @@ no-beautify()

      &__tags
        display: inline-block
-        margin: .4rem .4rem .4rem 0
-        padding: 0 .6rem
+        margin: 8px 8px 8px 0
+        padding: 0 12px
        width: fit-content
        border: 1px solid $light-blue
-        border-radius: .6rem
+        border-radius: 12px
        color: $light-blue
        font-size: .85em
        transition: all .2s ease-in-out
@@ -213,7 +210,7 @@ no-beautify()
    .post_share
      display: inline-block
      float: right
-      margin: .4rem 0
+      margin: 8px 0
      width: fit-content

      .social-share
@@ -228,19 +225,19 @@ no-beautify()

  .post-copyright
    position: relative
-    margin: 2rem 0 .5rem
-    padding: .5rem .8rem
+    margin: 40px 0 10px
+    padding: 10px 16px
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out

    &:before
      @extend .fontawesomeIcon
      position: absolute
-      top: .1rem
-      right: .6rem
+      top: 2px
+      right: 12px
      color: $theme-color
      content: '\f1f9'
-      font-size: 1rem
+      font-size: 1.3em

    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
@@ -251,7 +248,7 @@ no-beautify()
        font-weight: bold

      &-info
-        padding-left: .3rem
+        padding-left: 6px

        a
          text-decoration: underline
@@ -262,7 +259,7 @@ no-beautify()

  .post-outdate-notice
    position: relative
-    margin: 0 0 1rem
+    margin: 0 0 20px
    padding: .5em 1.2em
    border-radius: 3px
    background-color: $noticeOutdate-bg
@@ -282,4 +279,4 @@ no-beautify()
        transform: translateY(-50%)

  .ads-wrap
-    margin: 2rem 0
+    margin: 40px 0
--- a/source/css/_layout/relatedposts.styl
+++ b/source/css/_layout/relatedposts.styl
@@ -1,5 +1,5 @@
 .relatedPosts
-  margin-top: 2rem
+  margin-top: 40px

  & > .headline
    margin-bottom: 5px
@@ -40,7 +40,7 @@
    .content
      position: absolute
      top: 50%
-      padding: 0 1rem
+      padding: 0 20px
      width: 100%
      transform: translate(0, -50%)

--- a/source/css/_layout/reward.styl
+++ b/source/css/_layout/reward.styl
@@ -1,12 +1,12 @@
 .post-reward
  position: relative
-  margin-top: 4rem
+  margin-top: 80px
  width: 100%
  text-align: center

  .reward-button
    display: inline-block
-    padding: .2rem 1.2rem
+    padding: 4px 24px
    background: var(--btn-bg)
    color: var(--btn-color)
    cursor: pointer
@@ -28,7 +28,7 @@
    .reward-all
      display: inline-block
      margin: 0
-      padding: 1rem .5rem
+      padding: 20px 10px
      border-radius: 4px
      background: var(--reward-pop)

@@ -64,6 +64,5 @@
          height: 130px

        .post-qr-code-desc
-          padding-top: .4rem
          width: 130px
          color: $reward-pop-up-color
--- a/source/css/_layout/sidebar.styl
+++ b/source/css/_layout/sidebar.styl
@@ -23,11 +23,11 @@
      transform: translate3d(-100%, 0, 0)

    & > .avatar-img
-      margin: 1rem auto
+      margin: 20px auto

    .site-data
      display: table
-      padding: 0 .5rem
+      padding: 0 10px
      width: 100%
      table-layout: fixed

@@ -45,16 +45,16 @@
          color: var(--font-color)

    hr
-      margin: 1rem auto
+      margin: 20px auto

    .menus_items
-      padding: 0 .5rem 2rem
+      padding: 0 10px 40px

      .site-page
        @extend .limit-one-line
        position: relative
        display: block
-        padding: .3rem 1.5rem .3rem 1.1rem
+        padding: 6px 30px 6px 22px
        color: var(--font-color)
        font-size: 1.15em

@@ -69,7 +69,7 @@
          & > i:last-child
            position: absolute
            top: .78em
-            right: .9rem
+            right: 18px
            transition: transform .3s

          &.hide
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -24,7 +24,6 @@
  --waline-font-size: 1.1em
  --waline-theme-color: $button-bg
  --waline-active-color: $button-hover-color
-  --waline-avatar-size: 2.75rem

  .vuser
    transition: all .5s
@@ -64,7 +63,7 @@ if hexo-config('waline.bg')

 .mermaid
  overflow: auto
-  margin: 0 0 1rem
+  margin: 0 0 20px
  background: $white
  text-align: center
  opacity: 0
@@ -80,7 +79,7 @@ if hexo-config('waline.bg')
 #gitalk-container
  .gt-meta
    margin: 0 0 .8em
-    padding: .3rem 0 .8em
+    padding: 6px 0 16px

 .katex-wrap
  overflow: auto
@@ -100,7 +99,7 @@ mjx-container[display],

 #article-container
  .aplayer
-    margin: 0 0 1rem
+    margin: 0 0 20px

    if hexo-config('beautify.enable')
      ol,
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -131,7 +131,7 @@ if hexo-config('readmode')
      ul
        >li
          &:before
-            border: .15rem solid var(--gray) !important
+            border-color: var(--gray) !important

      .tabs
        border: 2px solid var(--tab-border-color)
@@ -160,7 +160,7 @@ if hexo-config('readmode')
        color: var(--font-color)

      blockquote
-        border-left: .2rem solid var(--gray)
+        border-color: var(--gray)
        background-color: var(--readmode-light-color)

      kbd
--- a/source/css/_page/404.styl
+++ b/source/css/_page/404.styl
@@ -6,29 +6,23 @@ if hexo-config('error_404.enable')
      right: 0
      left: 0
      margin: 0 auto
-      padding: 0 1rem
+      padding: 0 20px
      max-width: 1000px
      transform: translate(0, -50%)

      .error-content
+        @extend .cardHover
        display: flex
        flex-direction: row
        justify-content: center
        align-items: center
-        margin: 0 1rem
-        height: 18rem
-        border-radius: 8px
-        background: var(--card-bg)
-        box-shadow: var(--card-box-shadow)
-        transition: all .3s
-
-        &:hover
-          box-shadow: var(--card-hover-box-shadow)
+        margin: 0 20px
+        height: 360px

        +maxWidth768()
          flex-direction: column
          margin: 0
-          height: 25rem
+          height: 500px

        .error-img
          flex: 1
@@ -47,7 +41,7 @@ if hexo-config('error_404.enable')

        .error-info
          flex: 1
-          padding: .5rem
+          padding: 10px
          text-align: center
          font-size: 14px

@@ -59,28 +53,28 @@ if hexo-config('error_404.enable')
            width: 100%

          .error_title
-            margin-top: -4rem
+            margin-top: -80px
            font-size: 9em

            +maxWidth768()
-              margin-top: -3rem
+              margin-top: -60px

          .error_subtitle
            @extend .limit-more-line
-            margin-top: -3.5rem
+            margin-top: -70px
            word-break: break-word
            font-size: 1.6em
            -webkit-line-clamp: 2

          a
            display: inline-block
-            margin-top: .5rem
-            padding: .3rem 1.5rem
+            margin-top: 10px
+            padding: 6px 30px
            background: var(--btn-bg)
            color: var(--btn-color)

            i
-              padding-right: .3rem
+              padding-right: 6px

    & + #rightside
      display: none
--- a/source/css/_page/archives.styl
+++ b/source/css/_page/archives.styl
@@ -1,13 +1,13 @@
 .article-sort
-  margin-left: .5rem
-  padding-left: 1rem
+  margin-left: 10px
+  padding-left: 20px
  border-left: 2px solid lighten($light-blue, 20)

  &-title
    position: relative
-    margin-left: .5rem
-    padding-bottom: 1rem
-    padding-left: 1rem
+    margin-left: 10px
+    padding-bottom: 20px
+    padding-left: 20px
    font-size: 1.72em

    &:hover
@@ -16,10 +16,10 @@

    &:before
      position: absolute
-      top: calc(((100% - 1.8rem) / 2))
-      left: -.45rem
+      top: calc(((100% - 36px) / 2))
+      left: -9px
      z-index: 1
-      width: w = .5rem
+      width: w = 10px
      height: h = w
      border: .5 * w solid $light-blue
      border-radius: w
@@ -33,7 +33,7 @@
      bottom: 0
      left: 0
      z-index: 0
-      width: .1rem
+      width: 2px
      height: 1.5em
      background: lighten($light-blue, 20)
      content: ''
@@ -42,7 +42,7 @@
    position: relative
    display: flex
    align-items: center
-    margin: 0 0 1rem .5rem
+    margin: 0 0 20px 10px
    transition: all .2s ease-in-out

    &:hover
@@ -50,9 +50,9 @@
        border-color: $pseudo-hover

    &:before
-      $w = .3rem
+      $w = 6px
      position: absolute
-      left: calc(-1rem - 17px)
+      left: calc(-20px - 17px)
      width: w = $w
      height: h = w
      border: .5 * w solid $light-blue
@@ -82,7 +82,7 @@
      font-size: 95%

      time
-        padding-left: .3rem
+        padding-left: 6px
        cursor: default

    &-title
@@ -112,4 +112,4 @@

    &-info
      flex: 1
-      padding: 0 .8rem
+      padding: 0 16px
--- a/source/css/_page/categories.styl
+++ b/source/css/_page/categories.styl
@@ -1,6 +1,6 @@
 #page
  .category-lists
-    padding: 1rem 0 1.5rem
+    padding: 20px 0 30px

    +maxWidth768()
      padding: 0
@@ -19,7 +19,7 @@
          color: $text-hover

      .category-list-count
-        margin-left: .4rem
+        margin-left: 8px
        color: $theme-meta-color

        &:before
@@ -29,17 +29,17 @@
          content: ')'

    ul
-      margin-top: .4rem
-      padding: 0 0 0 1rem
+      margin-top: 8px
+      padding: 0 0 0 20px
      list-style: none
      counter-reset: li

      ul
-        padding-left: .2rem
+        padding-left: 4px

      li
        position: relative
-        margin: .3rem 0
+        margin: 6px 0
        padding: .12em .4em .12em 1.4em

        &:before
--- a/source/css/_page/common.styl
+++ b/source/css/_page/common.styl
@@ -7,7 +7,7 @@
  display: flex
  flex: 1 auto
  margin: 0 auto
-  padding: 2rem 15px
+  padding: 40px 15px
  max-width: 1200px
  width: 100%

@@ -15,23 +15,18 @@
    flex-direction: column

  +maxWidth768()
-    padding: 1rem 5px
+    padding: 20px 5px

  +minWidth2000()
    max-width: 1500px

  & > div:first-child:not(.recent-posts)
+    @extend .cardHover
    align-self: flex-start
    padding: 50px 40px
-    border-radius: 8px
-    background: var(--card-bg)
-    box-shadow: var(--card-box-shadow)
-
-    &:hover
-      box-shadow: var(--card-hover-box-shadow)

    +maxWidth768()
-      padding: 1.8rem .7rem !important
+      padding: 36px 14px

  & > div:first-child
    width: 75%
@@ -53,3 +48,11 @@

    & > div
      width: 100% !important
+
+// for apple device
+.apple
+  #page-header.full_page
+    background-attachment: scroll !important
+
+  .recent-post-item
+    transform: translateZ(0)
--- a/source/css/_page/flink.styl
+++ b/source/css/_page/flink.styl
@@ -1,8 +1,5 @@
 #article-container
  .flink
-    .flink-desc
-      margin: .2rem 0 .5rem
-
    .flink-list
      overflow: auto
      padding: 10px 10px 0
--- a/source/css/_page/homepage.styl
+++ b/source/css/_page/homepage.styl
@@ -1,48 +1,23 @@
 #recent-posts
  & > .recent-post-item:not(:first-child)
-    margin-top: 1rem
+    margin-top: 20px

  & > .recent-post-item
+    @extend .cardHover
    display: flex
    flex-direction: row
    align-items: center
+    overflow: hidden
    height: 20em
-    border-radius: 12px 8px 8px 12px
-    background: var(--card-bg)
-    box-shadow: var(--card-box-shadow)
-    transition: all .3s

    +maxWidth768()
-      border-radius: 12px 12px 8px 8px
+      flex-direction: column
+      height: auto

    &:hover
-      box-shadow: var(--card-hover-box-shadow)
-
      img.post_bg
        transform: scale(1.1)

-    if hexo-config('cover.position') == 'both'
-      .left_radius
-        border-radius: 8px 0 0 8px
-
-      .right_radius
-        order: 2
-        border-radius: 0 8px 8px 0
-    else if hexo-config('cover.position') == 'left'
-      .left_radius
-        border-radius: 8px 0 0 8px
-
-      .right_radius
-        border-radius: 8px 0 0 8px
-    else if hexo-config('cover.position') == 'right'
-      .left_radius
-        order: 2
-        border-radius: 0 8px 8px 0
-
-      .right_radius
-        order: 2
-        border-radius: 0 8px 8px 0
-
    &.ads-wrap
      display: block !important
      height: auto !important
@@ -51,7 +26,10 @@
      overflow: hidden
      width: 45%
      height: 100%
-      -webkit-mask-image: -webkit-radial-gradient(white, black)
+
+      +maxWidth768()
+        width: 100%
+        height: 230px

      img.post_bg
        width: 100%
@@ -59,31 +37,42 @@
        transition: all .6s
        object-fit: cover

-        &:hover
-          transform: scale(1.1)
+      &.right
+        order: 1
+
+        +maxWidth768()
+          order: 0

    & >.recent-post-info
-      display: inline-block
-      overflow: hidden
      padding: 0 40px
      width: 55%

+      +maxWidth768()
+        padding: 20px 20px 30px
+        width: 100%
+
      &.no-cover
        width: 100%

+        +maxWidth768()
+          padding: 30px 20px
+
      & > .article-title
        @extend .limit-more-line
-        margin-bottom: .3rem
        color: var(--text-highlight-color)
        font-size: 1.72em
        line-height: 1.4
        transition: all .2s ease-in-out
        -webkit-line-clamp: 2

+        +maxWidth768()
+          font-size: 1.43em
+
        &:hover
          color: $text-hover

      & > .article-meta-wrap
+        margin: 6px 0
        color: $theme-meta-color
        font-size: 90%

@@ -94,22 +83,22 @@
          color: $sticky-color

        i
-          margin: 0 .2rem 0 0
+          margin: 0 4px 0 0

        .article-meta-label
          if hexo-config('post_meta.page.label')
-            padding-right: .2rem
+            padding-right: 4px
          else
            display: none

        .article-meta__separator
-          margin: 0 .3rem
+          margin: 0 6px

        .article-meta__link
-          margin: 0 .2rem
+          margin: 0 4px

        .fa-angle-right
-          margin: 0 .2rem
+          margin: 0 4px

        if hexo-config('post_meta.page.date_format') == 'relative'
          time
@@ -124,31 +113,4 @@

      & > .content
        @extend .limit-more-line
-        margin-top: .3rem
        -webkit-line-clamp: 3
-
-+maxWidth768()
-  #recent-posts
-    .recent-post-item
-      flex-direction: column
-      height: auto !important
-
-      .post_cover
-        order: 1 !important
-        width: 100%
-        height: 230px
-        border-radius: 8px 8px 0 0
-
-      .recent-post-info
-        order: 2 !important
-        padding: 1rem 1rem 1.5rem
-        width: 100%
-
-        &.no-cover
-          padding: 1.5rem 1rem
-
-        .article-title
-          font-size: 1.43em
-
-        .content
-          height: auto
--- a/source/css/_page/tags.styl
+++ b/source/css/_page/tags.styl
@@ -2,7 +2,7 @@
  &-list
    a
      display: inline-block
-      padding: 0 .4rem
+      padding: 0 8px
      transition: all .3s

      &:hover
--- a/source/css/_search/algolia.styl
+++ b/source/css/_search/algolia.styl
@@ -6,16 +6,16 @@
      width: 100%

      input
-        padding: .25rem .7rem
+        padding: 5px 14px
        outline: none
        border: 2px solid $search-color
-        border-radius: 2rem
+        border-radius: 40px
        background: var(--search-bg)
        color: var(--search-input-color)

    .ais-hits--item.algolia-hit-item
      position: relative
-      padding-left: 1.2rem
+      padding-left: 24px

      &:hover
        &:before
@@ -28,7 +28,7 @@
        left: 0
        width: w = $w
        height: h = w
-        border: .15rem solid $search-color
+        border: 3px solid $search-color
        border-radius: w
        background: transparent
        content: ''
@@ -48,20 +48,20 @@
        font-weight: bold

    .ais-pagination.pagination
-      margin: .8rem 0 0
+      margin: 16px 0 0
      padding: 0
      text-align: center

      .ais-pagination--item
-        margin: 0 .2rem
+        margin: 0 4px
        padding: 0

        a
          display: inline-block
-          min-width: 1.2rem
-          height: 1.2rem
+          min-width: 24px
+          height: 24px
          text-align: center
-          line-height: 1.2rem
+          line-height: 24px

      .ais-pagination--item.current
        a
@@ -71,5 +71,5 @@

    .algolia-logo
      padding-top: 2px
-      width: 4rem
-      height: 1.5rem
+      width: 80px
+      height: 30px
--- a/source/css/_search/index.styl
+++ b/source/css/_search/index.styl
@@ -1,12 +1,12 @@
 .search-dialog
  position: fixed
-  top: 5rem
+  top: 100px
  left: 50%
  z-index: 1001
  display: none
-  margin-left: -15rem
-  padding: 1rem
-  width: 30rem
+  margin-left: -300px
+  padding: 20px
+  width: 600px
  border-radius: 8px
  background: var(--search-bg)
  animation: titlescale .5s
@@ -20,12 +20,12 @@
    border-radius: 0

  hr
-    margin: 1rem auto
+    margin: 20px auto

  span.search-close-button
    position: absolute
-    top: .8rem
-    right: 1rem
+    top: 16px
+    right: 20px
    color: $grey
    font-size: 1.4em
    line-height: 1
@@ -36,7 +36,7 @@
      color: $search-color

  &__title
-    padding: 0 0 .7rem
+    padding: 0 0 14px
    color: $search-color
    font-size: 1.4em
    line-height: 1
--- a/source/css/_search/local-search.styl
+++ b/source/css/_search/local-search.styl
@@ -6,18 +6,18 @@
      width: 100%

      input
-        padding: .25rem .7rem
+        padding: 5px 14px
        width: 100%
        outline: none
        border: 2px solid $search-color
-        border-radius: 2rem
+        border-radius: 40px
        background: var(--search-bg)
        color: var(--search-input-color)
        -webkit-appearance: none

    .local-search__hit-item
      position: relative
-      padding-left: 1.2rem
+      padding-left: 24px
      line-height: 1.7

      &:hover
@@ -31,7 +31,7 @@
        left: 0
        width: w = $w
        height: h = w
-        border: .15rem solid $search-color
+        border: 3px solid $search-color
        border-radius: w
        background: transparent
        content: ''
@@ -48,7 +48,7 @@
          color: $search-color

      .search-result
-        margin: 0 0 .4rem
+        margin: 0 0 8px
        word-break: break-all

      .search-keyword
@@ -57,8 +57,8 @@

    .search-result-list
      overflow-y: auto
-      max-height: 10.5rem
+      max-height: 210px

      +maxWidth768()
-        padding-bottom: 2rem
+        padding-bottom: 40px
        max-height: 75vh !important
--- a/source/css/_tags/button.styl
+++ b/source/css/_tags/button.styl
@@ -1,36 +1,36 @@
 #article-container
  .btn-center
-    margin: 0 0 1rem
+    margin: 0 0 20px
    text-align: center

  .btn-beautify
    display: inline-block
-    margin: 0 .2rem .3rem
-    padding: 0 1rem
+    margin: 0 4px 6px
+    padding: 0 15px
    background-color: $btn-default-color
    color: $btn-color
    line-height: 2

    i + span
-      margin-left: .3rem
+      margin-left: 6px

    &:not(.block) + .btn-beautify:not(.block)
-      margin: 0 .2rem 1rem
+      margin: 0 4px 20px

    &.block
      display: block
-      margin: 0 0 1rem
+      margin: 0 0 20px
      width: fit-content
      width: -moz-fit-content

      &.center
-        margin: 0 auto 1rem
+        margin: 0 auto 20px

      &.right
-        margin: 0 0 1rem auto
+        margin: 0 0 20px auto

    &.larger
-      padding: .3rem 1.3rem
+      padding: 6px 15px

    &:hover
      text-decoration: none
--- a/source/css/_tags/gallery.styl
+++ b/source/css/_tags/gallery.styl
@@ -2,15 +2,15 @@ figure.gallery-group
  position: relative
  float: left
  overflow: hidden
-  margin: .3rem .2rem
-  width: calc(50% - .4rem)
+  margin: 6px 4px
+  width: calc(50% - 8px)
  height: 250px
  border-radius: 8px
  background: $dark-black
  -webkit-transform: translate3d(0, 0, 0)

  +maxWidth600()
-    width: calc(100% - .4rem)
+    width: calc(100% - 8px)

  &:hover
    img
@@ -40,7 +40,7 @@ figure.gallery-group
    position: absolute
    top: 0
    left: 0
-    padding: 1.5rem
+    padding: 30px
    width: 100%
    height: 100%
    color: $gallery-color
@@ -59,7 +59,7 @@ figure.gallery-group
  p
    @extend .limit-more-line
    margin: 0
-    padding: .4rem 0 0
+    padding: 8px 0 0
    letter-spacing: 1px
    font-size: 1.1em
    line-height: 1.5
@@ -72,7 +72,7 @@ figure.gallery-group
    @extend .limit-more-line
    position: relative
    margin: 0
-    padding: .4rem 0
+    padding: 8px 0
    font-weight: bold
    font-size: 1.65em
    line-height: 1.5
@@ -91,10 +91,10 @@ figure.gallery-group

 .gallery-group-main
  overflow: auto
-  padding: 0 0 .8rem
+  padding: 0 0 16px

 .justified-gallery
-  margin: 0 0 .8rem
+  margin: 0 0 16px

  img
    opacity: 0
--- a/source/css/_tags/hexo.styl
+++ b/source/css/_tags/hexo.styl
@@ -11,13 +11,13 @@ blockquote

    &.right
      float: right
-      margin: 1em 0 0 .5rem
+      margin: 1em 0 0 .5em

 // hexo tag video
 .video-container
  position: relative
  overflow: hidden
-  margin-bottom: .8rem
+  margin-bottom: 16px
  padding-top: 56.25%
  height: 0

--- a/source/css/_tags/hide.styl
+++ b/source/css/_tags/hide.styl
@@ -3,7 +3,7 @@
 .hide-block
  & > .hide-button
    display: inline-block
-    padding: .3rem 1rem
+    padding: 6px 20px
    background: $tag-hide-bg
    color: var(--white)

@@ -21,20 +21,20 @@

 .hide-inline
  & > .hide-button
-    margin: 0 .3rem
+    margin: 0 6px

  & > .hide-content
-    margin: 0 .3rem
+    margin: 0 6px

 .hide-block
-  margin: 0 0 .8rem
+  margin: 0 0 16px

 .hide-toggle
-  margin-bottom: 1rem
+  margin-bottom: 20px
  border: 1px solid $tag-hide-toggle-bg

  & > .hide-button
-    padding: .3rem .5rem
+    padding: 6px 10px
    background: $tag-hide-toggle-bg
    color: #1F2D3D
    cursor: pointer
@@ -52,4 +52,4 @@

  & > .hide-content
    display: none
-    margin: 1.5rem 1.2rem
+    margin: 30px 24px
--- a/source/css/_tags/note.styl
+++ b/source/css/_tags/note.styl
@@ -1,19 +1,19 @@
 .note
  $note-icons = hexo-config('note.icons')
  position: relative
-  margin: 0 0 1rem
+  margin: 0 0 20px
  padding: 15px

  if hexo-config('note.border_radius') is a 'unit'
    border-radius: unit(hexo-config('note.border_radius'), px)

  &.icon
-    padding-left: 2.25rem
+    padding-left: 3em

  & > .note-icon
    position: absolute
-    top: calc(50% - .4rem)
-    left: .7rem
+    top: calc(50% - .5em)
+    left: .8em
    font-size: larger

  for $type in $tagsP-types
@@ -75,12 +75,12 @@

  if $note-icons
    &:not(.no-icon)
-      padding-left: 2.25rem
+      padding-left: 3em

      &::before
        position: absolute
-        top: calc(50% - .8rem)
-        left: .7rem
+        top: calc(50% - .95em)
+        left: .8em
        font-size: larger
        @extend .fontawesomeIcon

--- a/source/css/_tags/tabs.styl
+++ b/source/css/_tags/tabs.styl
@@ -2,7 +2,7 @@
 #article-container
  .tabs
    position: relative
-    margin: 0 0 1rem
+    margin: 0 0 20px
    border-right: 1px solid var(--tab-border-color)
    border-bottom: 1px solid var(--tab-border-color)
    border-left: 1px solid var(--tab-border-color)
@@ -24,7 +24,7 @@

        button
          display: block
-          padding: .5rem 1rem
+          padding: 8px 18px
          width: 100%
          border-top: 2px solid var(--tab-border-color)
          background: var(--tab-botton-bg)
@@ -51,10 +51,10 @@
      .tab-item-content
        position: relative
        display: none
-        padding: 1.8rem 1.2rem
+        padding: 36px 24px

        +maxWidth768()
-          padding: 1.2rem .7rem
+          padding: 24px 14px

        &.active
          display: block
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -30,7 +30,6 @@ $title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title
 $font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
 $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
 $font-color = #1F2D3D
-$rem = 20px
 $text-line-height = 2
 $web-bg = hexo-config('background') && unquote(hexo-config('background'))
 $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -354,6 +354,7 @@ document.addEventListener('DOMContentLoaded', function () {
    const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
    const $tocLink = $cardToc.querySelectorAll('.toc-link')
    const $article = document.getElementById('article-container')
+    const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')

    // main of scroll
    window.tocScrollFn = function () {
@@ -373,7 +374,7 @@ document.addEventListener('DOMContentLoaded', function () {
      const scrollPercent = (currentTop - headerHeight) / (contentMath)
      const scrollPercentRounded = Math.round(scrollPercent * 100)
      const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
-      $cardToc.setAttribute('progress-percentage', percentage)
+      $tocPercentage.textContent = percentage
    }

    // anchor
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -47,9 +47,10 @@ window.addEventListener('load', () => {
      .then(str => new window.DOMParser().parseFromString(str, 'text/xml'))
      .then(data => {
        const datas = [...data.querySelectorAll('entry')].map(function (item) {
+          const content = item.querySelector('content')
          return {
            title: item.querySelector('title').textContent,
-            content: item.querySelector('content').textContent,
+            content: content ? content.textContent : '',
            url: item.querySelector('url').textContent
          }
        })