change <del> element CSS styling to use line-through

[dubbl]

What does this PR change? What problem does it solve?

I used the markdown ~~strikethrough~~ markup in a blog post, and noticed that it was rendering weirdly in Firefox 111:

In Chrome it rendered correctly:

It turns out, that hugo converts ~~ to the HTML del element. This element was apparently not supported in Chrome until recently, which is why I guess this fix was introduced in hugo-Paper back in the day. hugo-Paper removed the original linear-gradient solution in v6 released in July 2023.

According to caniuse.com only around 69% of mobile user and 22% desktop users use a browser that supports this element.
I assume that this will change rapidly with the Chrome support (Version 111, released March 7th 2023).
But I would still propose that we style this element manually, as it can be quite important to indicate that a phrase is no longer up to date/valid.

Therefore this change uses text-decoration: line-through to archive the same effect across browsers.

After fix in Firefox 111:

After fix in Chrome 111:

Was the change discussed in an issue or in the Discussions before?

I couldn't find anything.

PR Checklist

• This change adds/updates translations and I have used the template present here.
• I have enabled maintainer edits for this PR.
• I have verified that the code works as described/as intended.
• This change adds a Social Icon which has a permissive license to use it.
• This change does not include any CDN resources/links.
• This change does not include any unrelated scripts such as bash and python scripts.
• This change updates the overridden internal templates from HUGO's repository.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[adityatelange]

Thanks @dubbl