elegant
elegant copied to clipboard
Pelican-Elegant
ampl class in links.css obscures customization
The ampl css class is included in links.css. However, its presence there is unneeded, as there's no mention of the class elsewhere in css or the templates.
https://github.com/Pelican-Elegant/elegant/blob/66eb6c5c1ae40b628bb477d5aa03bbe98e2288a8/static/css/links.css#L1-L3
https://github.com/Pelican-Elegant/elegant/blob/66eb6c5c1ae40b628bb477d5aa03bbe98e2288a8/static/css/links.css#L48
More importantly, its use in L1 makes applying a new style to links is completely obscure. Because the specifier matches practically every link in the article and is more specific than e.g.
.article-content a, you have to repeat the whole extravaganza in your custom.css in order to override the color of links.
Since there the ampl class is not considered part of the theme and is not documented anywhere, it should be eliminated from links.css.
Thank you for your contribution @m000
The ampl css class is included in links.css. However, its presence there is unneeded, as there's no mention of the class elsewhere in css or the templates.
https://elegant.oncrashreboot.com/hyperlinks-styles#amplified-style
More importantly, its use in L1 makes applying a new style to links is completely obscure. Because the specifier matches practically every link in the article and is more specific than e.g. .article-content a, you have to repeat the whole extravaganza in your custom.css in order to override the color of links.
If I understand you correct, you are trying to customize the link styles using custom.css, but your custom style does not work because of .ampl class. Kindly let me know if I understood the issue.
CSS prefers to apply the more specific rule over a more generic one.
Whatever you place in a .article-content a { ...} block will not be applied because the
article p:not(#list-of-translations):not(#post-share-links) a:not(.ampl) { ... } block which is included in links.css is more specific than it.
So, you are forced to add a article p:not(#list-of-translations):not(#post-share-links) a:not(.ampl) { ... } block in your custom.css file if you want to change the appearance of the links.
To check this, just create add .article-content a {color: #00FF00;} to custom.css, generate a page with links and load it on Firefox. Then, check the computed color for the links in the inspector. You will see that the links.css rule is active, while the custom.css rule is crossed-out.
As a general rule, whatever is included in the default CSS, should be easy to override. As such, the descriptors should be as generic as possible.
Thank you. I see your point.
On Fri, Jun 12, 2020, 23:06 Manolis Stamatogiannakis < [email protected]> wrote:
CSS prefers to apply the more specific rule over a more generic one.
Whatever you place in a .article-content a { ...} block will not be applied because the article p:not(#list-of-translations):not(#post-share-links) a:not(.ampl) { ... } block which is included in links.css is more specific than it.
So, you are forced to add a article p:not(#list-of-translations):not(#post-share-links) a:not(.ampl) { ... } block in your custom.css file if you want to change the appearance of the links.
To check this, just create add this rule to custom.css, generate a page with links and load it on Firefox. Then, check the computed color for the links in the inspector. You will see that the links.css rule is active, while the custom.css rule is crossed-out.
As a general rule, whatever is included in the default CSS, should be easy to override. As such, the descriptors should be as generic as possible.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Pelican-Elegant/elegant/issues/620#issuecomment-643414512, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAILIRC2EESGE7KTLGRK4W3RWJVDDANCNFSM4N3OYU4A .