Optimize header-anchor style

next-theme · Jun 12, 2020 · 6bd195a · 6bd195a
1 parent 701f628
commit 6bd195a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/_config.yml b/_config.yml
@@ -189,7 +189,7 @@ social_icons:
 
 # Blog rolls
 links_settings:
-  icon: fa fa-link
+  icon: fa fa-globe
   title: Links
   # Available values: block | inline
   layout: block

diff --git a/source/css/_common/components/pages/schedule.styl b/source/css/_common/components/pages/schedule.styl
@@ -42,12 +42,11 @@
       &::before {
         animation: dot-flash 1s alternate infinite ease-in-out;
         color: white;
-        content: '\f111';
         display: inline-block;
         font-size: 10px;
         margin-right: 25px;
         vertical-align: middle;
-        font-family-icons();
+        font-family-icons('\f111');
       }
     }
 

diff --git a/source/css/_common/components/post/post-expand.styl b/source/css/_common/components/post/post-expand.styl
@@ -14,20 +14,28 @@
   h1, h2, h3, h4, h5, h6 {
     padding-top: 10px;
 
-    .header-anchor {
+    // Supported plugins: hexo-renderer-markdown-it hexo-renderer-marked
+    .header-anchor, .headerlink {
       border-bottom-style: none;
-      color: $grey-light;
+      color: inherit;
       float: right;
+      font-size: $font-size-small;
       margin-left: 10px;
-      visibility: hidden;
+      opacity: 0;
 
-      &:hover {
-        color: inherit;
+      &::before {
+        font-family-icons('\f0c1');
       }
     }
 
-    &:hover .header-anchor {
-      visibility: visible;
+    &:hover {
+      .header-anchor, .headerlink {
+        opacity: .5;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
     }
   }
 

diff --git a/source/css/_common/outline/header/bookmark.styl b/source/css/_common/outline/header/bookmark.styl
@@ -12,10 +12,9 @@
 
   &::before {
     color: unquote(hexo-config('bookmark.color'));
-    content: '\f02e';
     font-size: 32px;
     line-height: 1;
-    font-family-icons();
+    font-family-icons('\f02e');
   }
 }
 

diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl
@@ -108,7 +108,10 @@ flex-column() {
   justify-content: center;
 }
 
-font-family-icons() {
+font-family-icons($icon = '') {
+  if ($icon) {
+    content: $icon;
+  }
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
 }