CSS padding is too high for Code blocks

[dlesnoff]

Text quoted in code blocks with backticks appear too highlighted compared to the rest of the text. The code block overflows above and below and hide texts. When two code blocks are superposed, they appear overflow, breaking the Type color, especially on mobile devices.

I checked the CSS. The padding top and below is the same as left and right. I would change it to give it a more rectangular shape. 5 pt overflows. 3 pt looks better. A relative value, like 0.5em might suit better.

[HugoGranstrom]

You are very correct, that specific padding originates from water.css but it was exaggerated when we started using normalize.css because it used a larger font, creating more overlap.

Would you be interested in writing a PR to fix this @dlesnoff ? We can guide you through where you should look and make the changes if you want to.

[pietroppeter]

Ah did not realize that interaction between water css and normalize had this kind of side effects. So the solution is to drop normalize?

[HugoGranstrom]

Even without normalize.css, there is still a slight overlap between two backticked words on different lines. https://pietroppeter.github.io/nimib/ has these problems in the first list. So I'd vote for both removing normalize.css and to trim the padding-top/bottom to a smaller value.

[pietroppeter]

We can override the water.css, but maybe we should also raise an issue in water css repo?

[pietroppeter]

Also looking at the example it seems code tags are using a bigger font. Maybe the online code could use the same font as in text? And we keep pre code blocks with the bigger font? Not being a css expert makes always a bit hesitant in "fixing" this kind of stuff, but maybe it is time we get to it.

Btw, thanks @dlesnoff for reporting this!

[HugoGranstrom]

I only turned off the font from normalize.css so it might have changed other things as well like line height. So I would need to investigate if removing it completely maybe solves it on its own. Feels weird if Water.css would have this behavior and no one has complained about it before.

[pietroppeter]

Mmh a quick check of water.css page shows that it does not seems to suffer from that problem (font seems the same):

[dlesnoff]

What does the inspector show when looking at water.css page ? Where are these water.css and normalize.css files? I just forked the repo and I am not familiar with how you inject the style.

Le dim. 5 mars 2023 à 15:12, Pietro Peterlongo @.***> a écrit :

Mmh a quick check of water.css page shows that it does not seems to suffer from that problem (font seems the same):

[image: image] https://user-images.githubusercontent.com/4997234/222965699-a6beaff7-6f6b-46cc-ac2d-a92bffe64c39.jpeg

— Reply to this email directly, view it on GitHub https://github.com/pietroppeter/nimib/issues/184#issuecomment-1455103810, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANDHQOBMG6PDR5OR2I4WY2LW2SNNXANCNFSM6AAAAAAVPYVORE . You are receiving this because you were mentioned.Message ID: @.***>

[dlesnoff]

It might also be due to a larger interspacing in the water.css page !

Le dim. 5 mars 2023 à 15:15, Dimitri Lesnoff @.***> a écrit :

What does the inspector show when looking at water.css page ? Where are these water.css and normalize.css files? I just forked the repo and I am not familiar with how you inject the style.

Le dim. 5 mars 2023 à 15:12, Pietro Peterlongo @.***> a écrit :

Mmh a quick check of water.css page shows that it does not seems to suffer from that problem (font seems the same):

[image: image] https://user-images.githubusercontent.com/4997234/222965699-a6beaff7-6f6b-46cc-ac2d-a92bffe64c39.jpeg

— Reply to this email directly, view it on GitHub https://github.com/pietroppeter/nimib/issues/184#issuecomment-1455103810, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANDHQOBMG6PDR5OR2I4WY2LW2SNNXANCNFSM6AAAAAAVPYVORE . You are receiving this because you were mentioned.Message ID: @.***>

[HugoGranstrom]

I tried removing normalize.css completely but it still has overflow problems. Interestingly enough, on water.css's website the padding is padding: 2.5px 5px; instead of padding: 5px; that it is for us :/

[HugoGranstrom]

I think we might be running an old version. Our current stylesheet:

https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css

The latest one listed on their Github:

https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css

Using the updated link gives the correct padding of 2.5px 5px.

[HugoGranstrom]

What does the inspector show when looking at water.css page ? Where are these water.css and normalize.css files? I just forked the repo and I am not familiar with how you inject the style.

Le dim. 5 mars 2023 à 15:12, Pietro Peterlongo @.***> a écrit :

Mmh a quick check of water.css page shows that it does not seems to suffer from that problem (font seems the same):

[image: image] https://user-images.githubusercontent.com/4997234/222965699-a6beaff7-6f6b-46cc-ac2d-a92bffe64c39.jpeg

— Reply to this email directly, view it on GitHub https://github.com/pietroppeter/nimib/issues/184#issuecomment-1455103810, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANDHQOBMG6PDR5OR2I4WY2LW2SNNXANCNFSM6AAAAAAVPYVORE . You are receiving this because you were mentioned.Message ID: @.***>

We are linking to external stylesheets. You can find the string were we do it in src/nimib/themes.nim. So there are no css files in the repo except for the ones used for code highlighting.

[dlesnoff]

I modified the links in this file and tested it in my « website »: https://dlesnoff.github.io/nimProgramming-blog/blogPosts/macroTutorial.html

Code blocks are fine now, but there is an additional space in multiline code outputs. I do not know if this is linked or due to another change in the repository. If I can not see any separation between the code output and the rest of the text, is it because you have modified it, or is it because I modified the CSS style to the links given above ?

[HugoGranstrom]

Yes that does look weird. The captured code output is put inside a <samp> and it seems like the old one didn't style it at all, while the new one does style it like it was an inline code. The space at the start and end I think is just the padding.

If I can not see any separation between the code output and the rest of the text, is it because you have modified it, or is it because I modified the CSS style to the links given above ?

I'm not sure what you mean, I'm seeing a clear distinction between the output and the rest of the text :thinking:

[HugoGranstrom]

So we can't just update water.css but we need to actually make the code output look good again. This is a good opportunity to make it actually look good and distinct from the text. I think what we have to do is to add display: block; to the <samp>, then it looks quite good:

[dlesnoff]

Cool, it even fixed the additional whitespace ! I fixed the CSS as advised, see the linked PR.