teaser for my little winter project.

[hbons@mastodon.social]

using the .warning CSS class to highlight upcoming high Kp values.

the threshold will be configurable in Preferences and/or based on your location.

#linux #opensource #gnome #gtk #rust #design #aurora

[hbons@mastodon.social]

settling on the layout. I think this will be it for the first release.

funky colours that match the wallpaper totally by accident...

also added a #fediverse hashtag graph. arguably the best indicator!

#linux #opensource #gnome #gtk #rust #design #aurora

[ross@hachyderm.io]

@hbons I wonder how easy that would be to port to macOS...

[hbons@mastodon.social]

@ross should probably just work. installing GTK on macOS to try is too intimidating for me.

[ross@hachyderm.io]

@hbons Well brew has a gtk4 cask so fingers crossed...

[hbons@mastodon.social]

@ross I did the backend on macOS, so that part definitely works. I'll let you try it once it's out.

[eljojo@ruby.social]

@hbons hey this looks so good!

[eljojo@ruby.social]

@hbons really smart adding the fediverse detection. -- back in the day I did something similar to detect earthquakes haha

[hbons@mastodon.social]

@eljojo yea I did a dry run during the last big solar storm, and posts go up a little bit in advance even.

all you need really. the other graphs are just there to make you feel smart.

[dohbuheee@mastodon.social]

@hbons curious, but why are all the line charts exactly the same? not rendering actual data yet?

[eljojo@ruby.social]

@hbons this would definitely be up there in a nasa control centre

[hbons@mastodon.social]

@dohbuheee yea, the backend is working, just need to hook it up properly.

[hbons@mastodon.social]

ok, light theme! ️

cards use the same colour as windows. so I'm slightly changing the base window colour to the one used in sidebars (like in Files).

GTK doesn't seem to have a .dark or .light CSS selector. so had to manually toggle a class and listen for the dark mode signal. no big deal.

#linux #opensource #gnome #gtk #rust #design #aurora

[rdbende@mastodon.social]

@hbons GTK now has support for standard CSS media queries, btw

[hbons@mastodon.social]

@rdbende I tried, but it didn’t work? maybe I did something wrong.

[rdbende@mastodon.social]

@hbons if you're using 4.20 or a newer development version, it should work just like in normal CSS: https://docs.gtk.org/gtk4/css-properties.html#media-queries

[hbons@mastodon.social]

@rdbende thanks! I’ll give it another go.

[ebassi@mastodon.social]

@hbons you don't need to listen to anything; you should use CSS variables and the prefers-color-scheme: dark media query, like:

\@media (prefers-color-scheme: dark) {
.main-window {
--sidebar-bg-color: ...;
--accent-bg-color: ...;
--accent-fg-color: ...;
}

[ebassi@mastodon.social]

@rdbende @hbons just word of advice: standalone GTK does not know anything about light/dark preferences; the plumbing is all part of libadwaita

[taye@mastodon.social]

@ebassi @hbons @media `light-dark()` is also a good method (dunno if GTK supports it)

--bg-color: light-dark(#efedea, #223a2c);

light-dark() - CSS | MDN

The light-dark() CSS function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-scheme media feature query. Users are able to indicate their color-scheme preference through their operating system settings (e.g., light or dark mode) or their user agent settings. The light-dark() function enables providing two color values where any value is accepted. The light-dark() CSS color function returns the first value if the user's preference is set to light or if no preference is set and the second value if the user's preference is set to dark.

MDN Web Docs (developer.mozilla.org)