Skip to content

Better inline code#3269

Open
MTRNord wants to merge 1 commit intomainfrom
MTRNord/better-inline-code
Open

Better inline code#3269
MTRNord wants to merge 1 commit intomainfrom
MTRNord/better-inline-code

Conversation

@MTRNord
Copy link
Contributor

@MTRNord MTRNord commented Mar 6, 2026

Description

I am not sure if this is actually better or not. Happy to hear feedback on this though.

Personally the red always felt a bit out of place. This is now a bit closer to the big blocks but not sure if thats a good thing.

I also tried to size match the text around it a bit better than before.

grafik

Related issues

Role

Website & Content WG.

Timeline

Signoff

See commits

@MTRNord MTRNord requested a review from a team as a code owner March 6, 2026 22:36
@MTRNord MTRNord added the aesthetic Visual inconsistencies or improvements label Mar 6, 2026
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
@MTRNord MTRNord force-pushed the MTRNord/better-inline-code branch from 101f32c to 4f35560 Compare March 6, 2026 22:39
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Mar 6, 2026

Deploying matrix-website with  Cloudflare Pages  Cloudflare Pages

Latest commit: 4f35560
Status: ✅  Deploy successful!
Preview URL: https://e59ef381.matrix-website.pages.dev
Branch Preview URL: https://mtrnord-better-inline-code.matrix-website.pages.dev

View logs

Copy link
Contributor

@awtj8o81ryywg793 awtj8o81ryywg793 left a comment

Choose a reason for hiding this comment

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

Personally the red always felt a bit out of place. This is now a bit closer to the big blocks but not sure if thats a good thing.

I'd say it's a good thing. It helps make everything feel more cohesive. Currently, the red styling suggests that something is broken.

color: $color-code-color;
border-radius: 0.3rem;
padding: 1px 5px 2px;
font-size: 0.8em;
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
font-size: 0.8em;

I don't think we need to decrease the size of the text. Keeping it the same size ensures consistency, which I believe is something we should strive for in this situation.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The reason here is that with all the border and background it always felt larger than the rest. Hence this tried to visually match the surroundings. But maybe thats just me

Copy link
Collaborator

@weeman1337 weeman1337 Mar 8, 2026

Choose a reason for hiding this comment

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

Maybe this one is subjective. For me the .8 makes inline code hard(er) to read in text blocks because the font size changes in the flow.

@HarHarLinks
Copy link
Collaborator

Pls check #1758 and #2945 too

@HarHarLinks
Copy link
Collaborator

Some vertical misalignment on my Android phone:
Screenshot_20260307-164854

background-color: $color-code-background;
color: $color-code-color;
border-radius: 0.3rem;
padding: 1px 5px 2px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

We need to talk about units in general. If you use absolute units for the paddings and relative units for the font size, then people with other base font sizes will have misaligned code blocks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

aesthetic Visual inconsistencies or improvements

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants