From f7ec9cd24a39319ec7963d62c27cfea43b01a825 Mon Sep 17 00:00:00 2001
From: iwasaki501 <a.iwasaki0128@gmail.com>
Date: Thu, 30 Dec 2021 16:57:02 +0900
Subject: [PATCH] Bug Fix: Link in a heading is rendered as an anchor and
 becomes invisible unless it is hovered. (#469)

`<a>` tags in headings are set to apply the style of `%anchor` in `module.scss` and `common.scss`.
Therefore, if I put a link in a heading, the link will have the same style as the anchor,
which means that the font size becomes smaller and the link will not be displayed unless I hover the mouse over it.
My suggestion is to set an `anchor` class for the `<a>` tag of the anchor and apply style settings to the `anchor` class, not to the `a` tag.
---
 _includes/refactor-content.html | 2 +-
 _sass/addon/module.scss         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index d958cda..69d43b4 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -169,7 +169,7 @@
       {% endif %}
 
       {% assign id = snippet | split: '"' | first %}
-      {% capture anchor %}<a href="#{{ id }}"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+      {% capture anchor %}<a href="#{{ id }}" class="anchor"><i class="fas fa-hashtag"></i></a>{% endcapture %}
 
       {% assign left = snippet | split: mark_end | first %}
       {% assign right = snippet | replace: left, '' %}
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 9f705a8..c8f9057 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -18,13 +18,13 @@
 }
 
 %anchor {
-  > a {
+  .anchor {
     font-size: 1rem;
     margin-left: 0.5rem;
   }
 
   @media (hover: hover) {
-    > a {
+    .anchor {
       border-bottom: none !important;
       visibility: hidden;
       opacity: 0;
@@ -32,7 +32,7 @@
     }
 
     &:hover {
-      > a {
+      .anchor {
         visibility: visible;
         opacity: 1;
         transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
@@ -44,7 +44,7 @@
 %anchor-relative {
   @extend %anchor;
 
-  > a {
+  .anchor {
     position: relative;
     bottom: 1px;
   }