Sunnyside Agency Landing Page - Svelte, CSS Grid, Keyframes

Hi, everyone! 👋 This one is a bit of a “simpler” solution - meaning I didn’t add many animations or effects. I had lots of ideas for this one, but most ended up getting tossed. Instead the big focus was on Svelte and component-based development.

Questions:

• How would you handle a design like this on large screens (1920px+)? Add a max-width to the entire page and keep it centered? Add another media query? For now I’ve just left it, but letting it expand into oblivion doesn’t look great. 😕 "Solved": Went with max-width.
• I used a local variable in conjunction with a Svelte variable to determine the color of the "underline" in the LinksUnderlined component (yellow/pink). I feel like there’s probably a simpler way to do this in Svelte? Solved: Used the method in this REPL for a cleaner solution.
• Is there a way to “disable” a Svelte transition? In order for the transitions I used for the mobile menu to not fire on page load for 800px+ screens, I added a class to disable animations. This feels like a very janky solution to the problem. 😆
• How’s my Svelte in general? Any input on improvements and best practices?