asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Bug Fix: Link in a heading is rendered as an anchor and becomes invisible unless it is hovered. (#469)

Browse source 
`<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:
iwasaki501 2021-12-30 16:57:02 +09:00 committed by GitHub
parent d47ec035d3
commit f7ec9cd24a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/refactor-content.html
View file

@ -169,7 +169,7 @@
{% endif %} {% endif %}
{% assign id = snippet | split: '"' | first %} {% 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 left = snippet | split: mark_end | first %}
{% assign right = snippet | replace: left, '' %} {% assign right = snippet | replace: left, '' %}

8
_sass/addon/module.scss
View file

@ -18,13 +18,13 @@
} }
%anchor { %anchor {
> a { .anchor {
font-size: 1rem; font-size: 1rem;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@media (hover: hover) { @media (hover: hover) {
> a { .anchor {
border-bottom: none !important; border-bottom: none !important;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
@ -32,7 +32,7 @@
} }
&:hover { &:hover {
> a { .anchor {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition: opacity 0.25s ease-in, visibility 0s ease-in 0s; transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
@ -44,7 +44,7 @@
%anchor-relative { %anchor-relative {
@extend %anchor; @extend %anchor;
> a { .anchor {
position: relative; position: relative;
bottom: 1px; bottom: 1px;
} }