breaking changes: 升級 fontawesome 到 v6 #689

feat: snackbar 增加圓角
feat: 增加 flink 標籤外掛
fix: 修復點擊 toc 外圍,控制檯報錯的 bug
fix: Facebook Comments 無法使用 #787
fix: chat_btn 聊天按鈕翻譯缺失 #791
fix: local search 的 content 設爲 false, 搜索無法運行的 bug #764
fix: Mermaid 圖表渲染後元素高度過大 #773
fix: 文章頁分享按鈕另開一行時， 導航頁寬度沒有 100% 的 bug #765
improvement: 語義化 toggle 標籤外掛
improvement: darkmode 下 toc 背景顏色更改

source/css/_global/function.styl

@@ -11,9 +11,7 @@
 .fontawesomeIcon
   display: inline-block
   font-weight: 600
-  font-style: normal
-  font-variant: normal
-  font-family: 'Font Awesome 5 Free'
+  font-family: 'Font Awesome 6 Free'
   text-rendering: auto
   -webkit-font-smoothing: antialiased
 
@@ -55,7 +53,7 @@
 
   li
     position: relative
-    padding 0.12em 0.4em 0.12em 1.4em
+    padding: .12em .4em .12em 1.4em
 
     &:hover
       &:before
@@ -133,11 +131,7 @@ if hexo-config('enter_transitions')
     &.open
       for i in 1 2 3 4
         > :nth-child({i})
-          animation: sidebarItem (i / 5)s
-
-.card-announcement-animation
-  color: #FF0000
-  animation: announ_animation .8s linear infinite
+          animation: sidebarItem (i / 5) s
 
 .scroll-down-effects
   animation: scroll-down-effect 1.5s infinite
@@ -251,14 +245,6 @@ if hexo-config('avatar.effect') == true
     opacity: 1
     transform: translateY(0)
 
-@keyframes announ_animation
-  0%,
-  to
-    transform: scale(1)
-
-  50%
-    transform: scale(1.2)
-
 @keyframes sidebarItem
   0%
     transform: translateX(200px)

source/css/_highlight/highlight.styl

@@ -96,7 +96,7 @@ $code-block
       transition: transform .3s
 
       & + .code-lang
-        left: 1.6em
+        left: 1.7em
 
       &.closed
         transition: all .3s
@@ -112,7 +112,7 @@ $code-block
 
     .copy-notice
       position: absolute
-      right: 2.1em
+      right: 2.4em
       opacity: 0
       transition: opacity .4s
 
@@ -160,7 +160,7 @@ $code-block
             transform: rotate(90deg) !important
 
           & ~ .copy-notice
-            right: 3.3em
+            right: 3.45em
 
           & ~ .copy-button
             right: 2.1em

source/css/_layout/aside.styl

@@ -319,6 +319,11 @@
     &:hover
       animation: more-btn-move 1s infinite
 
+  .card-announcement
+    .item-headline
+      i
+        color: #FF0000
+
 .avatar-img
   overflow: hidden
   margin: 0 auto

source/css/_layout/pagination.styl

@@ -51,6 +51,7 @@
   &.pagination-post
     overflow: hidden
     margin-top: 40px
+    width: 100%
     background: $dark-black
 
 .layout

source/css/_layout/post.styl

@@ -174,7 +174,7 @@ beautify()
     .post_share
       display: inline-block
       float: right
-      margin: 8px 0
+      margin: 8px 0 20px
       width: fit-content
 
       .social-share

source/css/_layout/third-party.styl

@@ -65,6 +65,9 @@ if hexo-config('waline.bg')
   margin: 0 0 20px
   text-align: center
 
+  & > svg
+    height: 100%
+
 .utterances,
 .fb-comments iframe
   width: 100% !important
@@ -105,4 +108,7 @@ mjx-container[display],
           padding: 0 15px
 
           &:before
-            content: none
+            content: none
+
+.snackbar-css
+  border-radius: 5px !important

source/css/_mode/darkmode.styl

@@ -142,3 +142,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
 
     #operare_artitalk .c2
       background: #121212
+
+    #card-toc
+      +maxWidth900()
+        background: lighten(#121212, 5)

source/css/_page/flink.styl

@@ -1,5 +1,7 @@
 #article-container
   .flink
+    margin-bottom: 20px
+
     .flink-list
       overflow: auto
       padding: 10px 10px 0
@@ -23,8 +25,9 @@
           width: calc(100% - 15px) !important
 
         &:hover
-          img
-            transform: rotate(360deg)
+          .flink-item-icon
+            margin-left: -10px
+            width: 0
 
         &:before
           position: absolute
@@ -54,25 +57,31 @@
             width: 60px
             height: 60px
             border-radius: 35px
+            transition: width .3s ease-out
 
             img
               width: 100%
               height: 100%
+              transition: filter 375ms ease-in .2s, transform .3s
               object-fit: cover
-              transition: filter 375ms ease-in 0.2s, transform .3s
 
           .img-alt
             display: none
 
-          .flink-item-name
-            @extend .limit-one-line
-            padding: 16px 10px 0 0
-            height: 40px
-            font-weight: bold
-            font-size: 1.43em
+    .flink-item-name
+      @extend .limit-one-line
+      padding: 16px 10px 0 0
+      height: 40px
+      font-weight: bold
+      font-size: 1.43em
 
-          .flink-item-desc
-            @extend .limit-one-line
-            padding: 16px 10px 16px 0
-            height: 50px
-            font-size: .93em
+    .flink-item-desc
+      @extend .limit-one-line
+      padding: 16px 10px 16px 0
+      height: 50px
+      font-size: .93em
+
+    .flink-name
+      margin-bottom: 5px
+      font-weight: bold
+      font-size: 1.5em

source/css/_tags/hide.styl

@@ -3,7 +3,7 @@
 .hide-block
   & > .hide-button
     display: inline-block
-    padding: 6px 20px
+    padding: 5px 18px
     background: $tag-hide-bg
     color: var(--white)
 
@@ -32,27 +32,15 @@
 .hide-block
   margin: 0 0 16px
 
-.hide-toggle
+.toggle
   margin-bottom: 20px
   border: 1px solid $tag-hide-toggle-bg
 
-  & > .hide-button
-    padding: 6px 10px
+  & > .toggle-button
+    padding: 6px 15px
     background: $tag-hide-toggle-bg
     color: #1F2D3D
     cursor: pointer
 
-    & > i
-      font-size: 1.2em
-      transition: all .3s
-
-    &.open
-      i
-        transform: rotate(90deg)
-
-      & + div
-        display: block
-
-  & > .hide-content
-    display: none
+  & > .toggle-content
     margin: 30px 24px