Main Page Styling

[NickSramcik]

We now have a functional basic layout, but it could use some extra flair. Perhaps some breakfast/brunch theming? I'm open to suggestions. We should consider having a consistent color palette as well.

[funbunch]

I agree! Daisy has quite a few themes. And also, I wasn't sure if we want more of a proper logo styled. Open too!

[DevKnightRuin]

[Angela-LJ]

Breakfast themed is a cool idea! Perhaps we can think of a way to blend the themes of programming with breakfast?

[DevKnightRuin]

Probably best for a neutral colors for boarders and such, but keep the images with breakfast items (bacon, eggs, waffles etc). I just realized the palette I posted didn't have a nice looking yellow XD

[Angela-LJ]

When I think of breakfast I think of the color orange (probably thinking of orange juice lol). Should we have orange in the palette?

[cblanken]

Here's a couple more palettes I made with Coolors. One with some orange, and another with some red and some neutrals if that's what we want to shoot for.

You can also adjust or add colors in the palette if you go the palette link for each.

Palette 1

palette / original image

Palette 2

palette / original image

[DevKnightRuin]

If we do neutral colors for the borders, we could get random breakfast images each time we pull a question. Maybe not full images of breakfast plates, but like different breakfast items thrown around like bacon, eggs, various fruits, etc. Just a thought. I do like that image with the toast and fruits. Good thing I already ate some before seeing that ^_^

[Angela-LJ]

I kind of want to try my hand at styling this if no one else wants it. I think I can make something creative out of it, and my buddy Jordan (Gang/Jdub679) wants to join me with styling it as well! We can make some mock ups on Figma first before we commit to a particular design.

[Jdub679]

Me and Angela can work on this and make a few designs. I have experience with react/jsx, and we've used tailwind as well

[NickSramcik]

I really like those color palettes cblanked posted. I think something like the first palette with a shade of red added would be perfect.

[AhmedHHamdy]

@Angela-LJ @Jdub679 Hey guys, I would like to join you in styling the app. Is there a place available?

[cblanken]

We should definitely be using semantic naming for all our colors in Tailwind. Here's an article (https://dev.to/ynab/a-semantic-color-system-the-theory-hk7) with an example how you might configure your your colors.

But the general idea is to give your colors names that have meaning for their usage not just the color they represent. For example you might choose header-background, body-background, primary-accent, primary-text. These all have particular usage in mind instead of color names like orange-1, orange-2, dark-blue etc.

This makes altering the color palette later if the design of the app changes or if we want to add distinct themes.

[intelagense]

Here is a view link for the weird thing I put together in Canva. I recolored it with colors from the color palettes. I do think the image is very "busy" with the horizontal lines from the pancake stack and the text overlay though.

https://www.canva.com/design/DAFo0kpfrOs/JhUF0lHAMn6EXsXoQgrSgg/view?utm_content=DAFo0kpfrOs&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink

[intelagense]

Just found this tool that lets you check all the contrast ratios: Accessible Contrast Grid