search

cockpit-project / cockpit-project.github.io

Cockpit Project Website
https://cockpit-project.org/
MIT License
114 stars 194 forks source link

Style overhaul: SCSS, refactor, dark mode #693

Closed garrett closed 6 months ago

garrett commented 6 months ago

Fixes #685 Closes #686

garrett commented 6 months ago

I should split out the Gem updates and the search results sorting fix for Chrome and send those as PRs to be merged before this one.

garrett commented 6 months ago

...and also work on condensing the style parts of this one.

garrett commented 6 months ago

Preview: https://garrett.github.io/cockpit-project.github.io/

It should look (mostly) the same in light mode (but with very minor tweaks here and there) and then also work in dark mode now.

Additionally, this addresses and closes #686 and fixes #685. (I went ahead implemented it myself, so the idea would work with dark mode too. Thanks to @ItsDee19 and @sohail9972 for suggesting it, which prompted me to add it here.)

garrett commented 6 months ago

I squashed most commits together and rebased on main so the unrelated commits (that were split out as separate PRs and merged) aren't in this PR.

jelly commented 6 months ago

Another small issue

https://garrett.github.io/cockpit-project.github.io/guide/latest/cert-authentication.html#certauth-server-ipa

image

garrett commented 6 months ago

Nice! Thanks for spotting these issues! I'll try to get to them soon.

garrett commented 6 months ago

Thanks! I've resolved all the issues you pointed out. Please check again.

Hover on footers in dark mode should work. Code blocks and alerts in should work in the guide, in both light and dark. I also removed those comments.

jelly commented 6 months ago

Is the deployment guide CSS also changed?

image

https://garrett.github.io/cockpit-project.github.io/guide/latest/guide

It has the same link issue.

garrett commented 6 months ago

In dark mode, the Running page only has b/w icons for all the distros, and generally I find the colors a bit "funny". But the contrast is good, I'm just not used to it 😓

It's intended. I'd have to track down inverted versions of each logo otherwise, and many likely wouldn't have them. It was simpler to invert them with contrast and make them monochrome for now. The dark on light versions wouldn't work at all on dark backgrounds, so this was necessary and intentional.

garrett commented 6 months ago

I've fixed @jelly's findings in https://github.com/cockpit-project/cockpit-project.github.io/pull/693/commits/0df7869b1bdabd34ad94e46540350cd90865a526 by abstracting the link styles to reuse them in multiple places (via SASS @extend) ... and then squash-merged it. I also snuck in a fix for the documentation icons so that they're inverted (instead of relying on a shadow glow of white that the page apparently sets).

garrett commented 6 months ago

@jelly & @martinpitt: Thanks for helping me test this and finding all those little issues!