Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug Fix: Link in a heading is rendered as an anchor and becomes invisible. #469

Merged
merged 1 commit into from
Dec 30, 2021
Merged

Bug Fix: Link in a heading is rendered as an anchor and becomes invisible. #469

merged 1 commit into from
Dec 30, 2021

Conversation

ternbusty
Copy link
Contributor

@ternbusty ternbusty commented Dec 30, 2021 •
edited
Loading

Description

<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.

For example,

## Header with a [link](https://example.com)

in a markdown file is displayed like this.

Animation

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.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update

How has this been tested

  • I have run bash ./tools/deploy.sh --dry-run (at the root of the project) locally and passed
  • I have tested this feature in the browser

Test Configuration

  • Browser type & version: Google Chrome 96.0.4664.110
  • Operating system: Windows 10 21H1 + WSL (18.04.1 LTS)
  • Ruby version: 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]
  • Bundler version: 2.2.15
  • Jekyll version: 4.2.1

Checklist

  • I have performed a self-review of my code
  • I have commented on my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings

@ternbusty
Bug Fix: Link in a heading is rendered as an anchor and becomes invis…
1e287f5 
…ible unless it is hovered.

`<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.
cotes2020
cotes2020 approved these changes Dec 30, 2021
View reviewed changes
Copy link
Owner

@cotes2020 cotes2020 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the patch 👍

@cotes2020 cotes2020 merged commit f7ec9cd into cotes2020:master Dec 30, 2021
dkbnz pushed a commit to dkbnz/jekyll-theme-chirpy that referenced this pull request Jul 12, 2022
@ternbusty
Bug Fix: Link in a heading is rendered as an anchor and becomes invis…
7e627bf 
…ible unless it is hovered. (cotes2020#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.
shihtiy-tw pushed a commit to shihtiy-tw/shihtiy-tw.github.io that referenced this pull request Nov 26, 2022
@ternbusty @shihtiy-tw
Bug Fix: Link in a heading is rendered as an anchor and becomes invis…
4fcbc0b 
…ible unless it is hovered. (cotes2020#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.
sanjidnet pushed a commit to sanjidnet/sanjidnet.github.io that referenced this pull request Jan 9, 2023
@ternbusty
Bug Fix: Link in a heading is rendered as an anchor and becomes invis…
a208a8b 
…ible unless it is hovered. (cotes2020#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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cotes2020 cotes2020 cotes2020 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ternbusty @cotes2020