Optimize header-anchor style

This commit is contained in:
Mimi 2020-06-12 12:05:08 +08:00
parent 701f628b9a
commit 6bd195a9b1
5 changed files with 22 additions and 13 deletions

View File

@ -189,7 +189,7 @@ social_icons:
# Blog rolls # Blog rolls
links_settings: links_settings:
icon: fa fa-link icon: fa fa-globe
title: Links title: Links
# Available values: block | inline # Available values: block | inline
layout: block layout: block

View File

@ -42,12 +42,11 @@
&::before { &::before {
animation: dot-flash 1s alternate infinite ease-in-out; animation: dot-flash 1s alternate infinite ease-in-out;
color: white; color: white;
content: '\f111';
display: inline-block; display: inline-block;
font-size: 10px; font-size: 10px;
margin-right: 25px; margin-right: 25px;
vertical-align: middle; vertical-align: middle;
font-family-icons(); font-family-icons('\f111');
} }
} }

View File

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

View File

@ -12,10 +12,9 @@
&::before { &::before {
color: unquote(hexo-config('bookmark.color')); color: unquote(hexo-config('bookmark.color'));
content: '\f02e';
font-size: 32px; font-size: 32px;
line-height: 1; line-height: 1;
font-family-icons(); font-family-icons('\f02e');
} }
} }

View File

@ -108,7 +108,10 @@ flex-column() {
justify-content: center; justify-content: center;
} }
font-family-icons() { font-family-icons($icon = '') {
if ($icon) {
content: $icon;
}
font-family: 'Font Awesome 5 Free'; font-family: 'Font Awesome 5 Free';
font-weight: 900; font-weight: 900;
} }