Basic desktop CSS

[roelofjan-elsinga]

I've added some basic CSS rules to scale the mobile version better on the desktop. The homepage is quite literally just the mobile view with a max-width and horizontally aligned.

On the plant detail page the tags will stack on desktop views, and keep the horizontal scroll on the mobile view.

Editing the tags looks very similar to before, just made sure it scaled well from mobile to the desktop version. I've added a margin-top on the editing field, because I want to make better use of the newly created space on the desktop view.

[morkro]

Hey @roelofjan-elsinga, thank you for your contribution!

Coincidentally, I have just updated various screens on desktop in the open #69 Release 1.6.0 pull request as well. :) The Plant screen got some updates for desktop as well (basically a two column layout) and your changes there will be overwritten.

Just a few comments. I see you've added the same media query quite a bit.

@media screen and (min-width: 768px) {

Can you create a @custom-media for it in src/styles/media-queries.css? Might actually just update (and rename?) --max-mobile-viewport and use that one since it hasn't been used by now.

The 16px margins can be replaced with var(--base-gap).

[roelofjan-elsinga]

@morkro I'll implement those changes later today, thanks for the clear comment 😃

[roelofjan-elsinga]

@morkro I've kept the 600px you had defined under --max-mobile-viewport, because it didn't make a huge difference for my layouts.

[morkro]

Thanks @roelofjan-elsinga — I've updated a few minor things to fit my other desktop changes for the Plant screen :)

[roelofjan-elsinga]

Perfect @morkro! I'll look for some more things I can help with :)