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.
This commit is contained in:
parent
d47ec035d3
commit
f7ec9cd24a
2 changed files with 5 additions and 5 deletions
|
@ -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, '' %}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue