Styling Tweak

[Spazcool]

Removed forced upper & lower casing, nesting, margin and padding. Increased img size. Added link to img. #48 #39 #19

NEW STYLE:

OLD STYLE:

[lenzai]

@mattermoran you are the most qualified to review this code. Please follow 2 distinct steps:

• reviewing coding practices
• suggesting design improvements.

[mattermoran]

Good job, @Spazcool . Definitely looks better than before. Here's a little 'sketch' of what I think is not good. Not changing design or anything just tiny fixes that would make the page look better. Especially paddings should the same everywhere. P.S. I personally don't think the grey background looks good. I would just leave it white.

[Spazcool]

Now with more consistent padding!

I tried without background colors, it bothered me to my very core.

[lenzai]

1. padding between similar Items disappeared.
2. Missing fix on padding below breadcrumbs
3. double rounding on both the container and the picture is too much.
4. new grey color is getting heavy and affecting the contrast of the text.

[lenzai]

1. huge wrench next to tiny title does not make sens.
2. similar item, centered when there is only one looks weird, maybe align left?

[Spazcool]

@lenzai @mattermoran I believe I've tackled all the issues you listed above. I'm not sure I like the way the breadcrumbs look with the extra padding, especially on the search page, but I defer to your guys' expertise.

Padding between similar items:

Wrench & search page:

[lenzai]

how about something like that for wrench and picture?

[Spazcool]

@lenzai your posted img doesn't look all that different from the old style, minus the margins. Do you want the img to be big or small?

[lenzai]

Picture roughly same size as the container box. Text for title on one line

[Spazcool]

It looks cleaner. Side by side your img is nicer, but again its a small img that will be viewed on a mobile. Do we want big imgs or streamlined item cards?

[Spazcool]

My attempts at incorporating Alex's style.

[lenzai]

I want the image to be roughly the same size as the container.

What you call the "old style" is an image that barely use half the the height of the container. Seems like extremely inefficient use the screen real estate. Once this design/coding issue is solved, we can afford to make the container fit roughly the same height as the text because we have confidence that we won't have 10px height picture as consequence.

I hope Alex can guide you through best practices to achieve that with minimalistic code.

[Spazcool]

Without the background color:

[lenzai]

Some kind of background for title area is fine. Main article with white background and low padding looks nice. Video and I frame should also benefit from reduced padding.

[lenzai]

@mattermoran is this what you recommend in term of optimal CSS/class coding? Forget about graphic design for a while and let's focus on code simplicity