The color rendering of the `abbr` element is abnormal.

[zaoanhh]

Have you checked that your issue isn't already filed?

• I read through FAQ and searched through the past issues, none of which addressed my issue.
• Yes, I have checked that this issue isn't already filed.

Bug description

The existence of the div element in line 21 of the _layouts/bib.liquid file, <div>{{- entry.abbr -}}</div>, causes the text color of abbr to render incorrectly and cannot be rendered by the color defined in the style. Under the current settings, the color is set to color: var(--global-card-bg-color)!important; (line 742 of _sass/_base.scss), but it displays as black on the demo website.

How to reproduce the bug

Use the existing code to generate the website, and then check the color of "Vision" on the publication page.

Error messages and logs

The error message you got, with the full traceback if available. Please paste it between these triple backticks.

What operating system are you using?

Not applicable (e.g. you're using GitHub Pages or other hosting)

Where are you seeing the problem on?

Deployed site

More info

No response

[george-gca]

On the demo website Vision is white. I don't know if I understood the issue correctly.

EDIT: this happens only on light theme, I always use dark theme =P

Would you mind sending a PR for this?

[zaoanhh]

Thank you for your prompt response. In the light theme, the color of "vision" is as shown below.

It has not been set to --global-card-bg-color as expected. Simply removing the div element on line 21 of _layouts/bib.liquid will make it work. That is, change from <div>{{- entry.abbr -}}</div> to {{- entry.abbr -}}.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.