writethedocs / www

The main website for Write the Docs.
http://www.writethedocs.org
Other
1.3k stars 503 forks source link

Increase size of H2 elements #2165

Open CollierCZ opened 2 weeks ago

CollierCZ commented 2 weeks ago

For the most recent newsletter, we had a complaint that the H2 and H3 elements were too close in size and didn't look like distinguishable structure. So this would increase the relative size for H2 elements. It's equal to what is set for the conference headings.


📚 Documentation preview 📚: https://writethedocs-www--2165.org.readthedocs.build/

ericholscher commented 2 weeks ago

This seems like a pretty big hack, and probably not something we want to do globally. This also won't change how email is displayed, which is likely what the user was talking about?

If we want to change display, we can discuss updating/changing the theme, but I'm -1 on large global changes like this, since it will likely break some other stuff.

We should probably update Sphinx & Alabaster themes as a first step, or discussing migrating to a different theme that's more modern.

CollierCZ commented 2 weeks ago

The issue was specifically about the website, not in email.

Heading size didn't seem to be one of the built-in theme options, so the custom stylesheet seemed like the easiest way and was already used for other things that seemed similar.

I think the sizing change helps with all the headings on the site, personally. In all the places where there are H2s and H3s, at least. 🤷

I based it on the style that's in use elsewhere on the site.

Before change: how the headers look currently

After change: how the headers look after the change

goatlady commented 2 weeks ago

We should probably update Sphinx & Alabaster themes as a first step, or discussing migrating to a different theme that's more modern.

I made the template for the 2023 survey results page from scratch (not inheriting from Alabaster), using the Open Props library for inheritable style properties instead of SASS because with browsers now supporting nesting natively, there's no need for the extra overhead. I tried to make it look as much like the main site as possible, but modernized, widened and improved a bit. Even with maximal spacing it's under 1000 lines of CSS in total (and a TON of that is for the fancy tabbed tables).

If we're not talking about a major crazy design overhaul, I think the core site pages (i.e. not the conference sites) could be put into a similar set of new templates with a new stylesheet without too much effort as there's not very much in the way of highly specific styling - it's mostly just stock HTML elements. Whereas updating to a later version of Alabaster will mean all the custom CSS overrides need to be tracked down, checked and possibly updated.

Getting the survey results page looking so nice was a really satisfying job, so if this is something you'd like to offload to me, I'd be happy to give it a more serious look?

ericholscher commented 2 weeks ago

The theming on the salary survey is definitely interesting. It wouldn't be hard to put together a PR that applies it to the whole site, and do some QA there. I definitely think the site could use a refresh, but I also do wonder about starting with a different Sphinx theme might also help. Though many of the popular ones are definitely a bit more "docsy" looking.

There's a good gallery here: https://sphinx-themes.org/ -- I would probably start with Furo, since it's probably the most "up to date" one, but definitely a bit more docsy.