PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

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:
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 %}
{% 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, '' %}

8
_sass/addon/module.scss
View File

@ -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;
}