Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Title overlaps with other text #72

Open
martin-t opened this issue Jul 19, 2023 · 1 comment
Open

Title overlaps with other text #72

martin-t opened this issue Jul 19, 2023 · 1 comment

Comments

@martin-t
Copy link

martin-t commented Jul 19, 2023 •
edited

image

This is what it looks like in firefox 115 on linux: "The Vale Programming Language" overlaps with "Download"
@spartanatreyu
Copy link

Looks like it comes from the different fonts the website is trying to use.

This is near the top of the <head> tag:

<style type="text/css">
body {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  font-size: 12pt;
  margin: 0;
}
</style>

If the first font isn't found on the local machine, the next is tried, and so on...

Some of the fonts are naturally wider than others. For example: -apple-system renders out at 503.083px wide while Helvetica Neue renders out at 529.783px wide.

Rather than using different css files for different viewports (at arbitrary widths where the elements within may not be at the expected size on everyone's devices), it may be better to create one navigation using flexbox and flex-wrap.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@spartanatreyu @martin-t