Submitted about 2 years ago

Sunnyside Agency Landing Page - Svelte, CSS Grid, Keyframes

#svelte#accessibility

Anna Leigh• 5,135

@brasspetals

Preview site View code

This is a solution for...

Sunnyside agency landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

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

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 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 helpful

Anna Leigh• 5,135

@brasspetals

Posted about 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! 😉

Shashree Samuel• 9,260

@shashreesamuel

Posted about 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 helpful

Anna Leigh• 5,135

@brasspetals

Posted about 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. 😆

Shashree Samuel• 9,260

@shashreesamuel

Posted about 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 😁

Kamasah-Dickson• 5,610

@Kamasah-Dickson

Posted about 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 helpful

Anna Leigh• 5,135

@brasspetals

Posted about 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. 😄

The Burrito Doggie• 1,260

@BurritoDoggie

Posted about 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!

       = ^ . ^ =

Anna Leigh• 5,135

@brasspetals

Posted about 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. 😎

Please log in to post a comment

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