Sunnyside Agency Landing Page - Svelte, CSS Grid, Keyframes
Design comparison
Solution retrospective
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?
Community feedback
- @ApplePieGiraffePosted over 2 years ago
Hey, again, Anna (Leigh)! 👋
This one's looking great, as well (and as usual)! 👏
I'm not sure what to do with this design for extra-large desktop screens, either. What you did for this solution seems pretty reasonable to me. 🙂
I think passing a prop to determine the color of the underlined link component is straightforward and easy. Only thing is you probably don't need the CSS variables inside those classes since the color value is only used for one CSS property, but it doesn't really matter, really. 🙃
It's been a while since I've dabbled in Svelte, so I'm afraid I can't offer too much help with disabling those transitions off of the top of my head (I'm also a little short on time, at the moment). 😅
But I'll say everything's looking good! 👍
Keep coding (and happy coding, too)! 😄
Marked as helpful2@brasspetalsPosted over 2 years ago@ApplePieGiraffe I agree the prop + local variable is a bit overkill. Could just use a simple class to assign property. I just really wanted to have a reactive CSS variable, and that's the closest I could get. 😆
Oh no! 😱 What am I going to do without my Svelte guru?! Does that mean...I'm becoming the Svelte guru? 🤔
Thanks for carving out some time to look at my solution! Greatly appreciated, as always. You keep happy coding too! 😉
2 - @shashreesamuelPosted over 2 years ago
Excellent work Anna
Keep up the good work
Your solution looks excellent and certainly pixel-perfect to the design
Let's talk about the html issues regarding your markup
- CSS: animation: Too many values or values are not recognized. This is due to specifying the animation incorrectly, I recommend rechecking the documentation regarding this property to be sure.
I hope this helps
Cheers
Happy coding 👍
Marked as helpful2@brasspetalsPosted over 2 years ago@TheCoderGuru Thanks, Shashree! I appreciate you taking the time to look at my solution.
I'm aware of the issue(s) in the report. However, the animation values are generated through Svelte, so there's nothing I can do to change it apart from removing the Svelte transitions completely. The Svelte syntax for them is correct, so I think the validator is just going to have to stay mad. 😆
1@shashreesamuelPosted over 2 years ago@brasspetals Haha I guess the syntax of the svelte animation is not recognized by the validator.
keep up the good work my friend 😁
2 - @Kamasah-DicksonPosted over 2 years ago
Your solution looks so good...actually pixel perfect I think you should use the max-width on bigger screens also your website is faster on my device.
Good job👍 Happy coding📌
Marked as helpful1@brasspetalsPosted over 2 years ago@Kamasah-Dickson Thanks for the kind feedback! Yeah, I think max-width might be the way to go - and it's the simplest solution. Thanks again for dropping in and taking the time to comment. 😄
0 - @BurritoDoggiePosted over 2 years ago
Hey Anna!!
I'm excited to see another challenge from you! 😃 I happened to access your challenge mobile today, and it fit my screen perfectly! I also love the hamburger 🍔 menu! 😍 But sadly I have no knowledge of Svelte to help you with your code. 😕 I just wanted to drop in and say great job!
Keep Coding!
= ^ . ^ =1@brasspetalsPosted over 2 years ago@BurritoDoggie Hi, Alyssa! Thanks for taking the time to look at my solution. I always appreciate your comments, and your encouragement helps keep me motivated. 😄
Yeah, Svelte doesn't seem too popular on here - yet! Maybe if I keep using it, I'll start a trend. 😎
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord