lighten homepage and fix contrast

[dbltoe]

These changes soften all the colors on the homepage and fix the color contrast for mobile/desktop and link/hover.

Once finalized, I will change the color of the accessibility widget to match the scheme.

[scottcwilson]

This looks like what was there yesterday. I'd like to

• get rid of the green
• have some borders on the buttons
• change the color of "Releases" and the down arrow
• make the top bar a different color. I like how the storeowner and dev sites have their own colors for the top nav.

[dbltoe]

That's not the look that I sent in the PR. I felt the green was helpful in pointing out where to go to better the two areas above it. The releases color is a better separator color if it matches the header and footer. The colors are still to harsh and do not meet contrast. The borders (fat when thrown together and skinny when not) are, sorry, fugly.

[dbltoe]

As to links to Storeowner and Developer, the desktop layout puts the two choices dead center, up front, in the face. In mobile, maybe some improvement is called for but the two options are right at the top.

[drbyte]

This is my first look at these updates. Thanks for everyone's work on this.

Suggestion: Many of these "sections" are "cells" that contain an icon and two rows of clickable text (both rows to same link). Can the entire 'cell' be made "clickable", and also have sort of mouseover hover state that gives a visual cue about what each of the cells actually are? Right now the two-lines-of-text in each cell make the page look very busy (and overly complicated, resulting in confusion) when there are no longer any "cell dividers" or other visual indicators about where one thing ends and the next starts.

[simon1066]

This is my first look at these updates. Thanks for everyone's work on this.

Suggestion: Many of these "sections" are "cells" that contain an icon and two rows of clickable text (both rows to same link). Can the entire 'cell' be made "clickable", and also have sort of mouseover hover state that gives a visual cue about what each of the cells actually are? Right now the two-lines-of-text in each cell make the page look very busy (and overly complicated, resulting in confusion) when there are no longer any "cell dividers" or other visual indicators about where one thing ends and the next starts.

I'll simplify the cells (I was seduced by Docsy's shortcodes!), as mentioned. I had initially considered making entire cells clickable but wasn't too sure of the impact of those with screen readers - will do that too. If more color changes are needed then I might need further assist.

[scottcwilson]

Can the entire 'cell' be made "clickable"

This was part of my concern - the hotspot is very small. I'd like either the whole cell to be clickable or to switch to underline decoration to make it more obvious.

The changes I'd like to see from what's in John's PR https://deploy-preview-1257--zencartdocs.netlify.app/ are:

a) The change for making the click target more clear (either Chris' idea or mine) b) Remove the green c) Do something else with the top nav background and the background of "Releases" and down arrow below it.

[dbltoe]

I saw my goal as making the colors that were there 40% lighter and making the page completely compliant with color contrast for all hovers, links, and text even when on mobile. I did miss a couple of items, and here is what I came up with for all contrasts based on Simon's original colors.

`Docs Colors fixing harshness and color contrast

/ background -- linear gradient / .td-overlay--dark { background-image: linear-gradient(#ff9929,#ffd132);/ changed from #E26D1D,#EB9524 - lightened by 40% / }

/ blue for Storeowner and Releases / .row.container .col-lg-4:nth-child(1) { background: #5c9bcf;/ Changed from #3c7baf / border-radius: .5rem 0 0; } .td-box--primary { color: #fff; background-color: #5c9bcf;/ Changed from #3c7baf / }

/ Orange for Developer / .row.container .col-lg-4:nth-child(2) { background: #dc7d25;/ Changed from #ba5b03 / border-radius: .5rem 0 0; }

/ Green for Contribute and Latest News / .row.container .col-lg-4:nth-child(3) { background: #61a199;/ Changed from #418179 / border-radius: 0 0 .5rem .5rem; flex: 0 0 100%; max-width: 100%; padding-top: 1rem; } .td-box--secondary { color: #fff; background-color:#61a199; / Changed from #418179 / }

/ Nav, Releases, and Footer / / NOTE: hover colors should be removed for all links in these areas / --docsearch-text-color: #000000; --docsearch-key-gradient: none;/ Or remove / --docsearch-key-shadow: inset 0 -2px 0 0 #000,inset 0 0 1px 1px #000,0 1px 2px 1px rgba(30,35,90,0.4);/ Or remove / --docsearch-muted-color: #000000;/ Or remove /

.DocSearch-Button-Placeholder { font-size: 1rem; padding: 0 12px 0 6px; color: #000000; } li.nav-item.mr-4.mb-2.mb-lg-0 a { color: #ffffff; text-decoration: underline; } section.row:nth-child(4) { background-color: #585764;/ Changed from #403f4c / border-radius: .5rem .5rem 0 0; } .bg-dark { background-color: #585764 !important;/ Changed from #403f4c!important / }

/ Current blue links in the footer / .col-12.col-sm-4.text-center.py-2.order-sm-2 a { color: #ffffff;/ Changed from #6aafff / text-decoration: underline; }

/ Recommendation for the Title / h1.display-1.mt-0.mt-md-5.pb-4 { color: #4f4e5b;/ Changed from #ffffff / }`

Removing the hover and adding underline to the Nav and Footer are really the only way to meet both showing they're a link and having proper contrast on hover.

While I do agree that the design is not the best, using the colors above versus the original will make the page contrast compliant. That still leaves multiple accessibility problems that will need to be addressed. Again, I used the Siteimprove Checker.

Really, the problem reported at https://www.zen-cart.com/showthread.php?230077-Problem-with-Product-Images is more of a priority for me at the moment.

If you decide to use other colors than those above, I will try my best to squeeze in color checking for any changes

[simon1066]

Can the entire 'cell' be made "clickable"

This was part of my concern - the hotspot is very small. I'd like either the whole cell to be clickable or to switch to underline decoration to make it more obvious.

The changes I'd like to see from what's in John's PR https://deploy-preview-1257--zencartdocs.netlify.app/ are:

a) The change for making the click target more clear (either Chris' idea or mine) b) Remove the green c) Do something else with the top nav background and the background of "Releases" and down arrow below it.

I haven't created a PR for this as I wanted to be sure of the route forward. The mockup below possibly addresses the concerns quoted.

Background is a solid colour. The navbar is transparent on large screens until the page is scrolled. Each cell is a link and is highlighted on hover/focus. Green is gone. Releases title removed.

I'm obviously missing something re the contrast checking, for me John's PR shows a contrast between the blue background/white font of 2.98:1 - anyway I've left it as is.

I can PR or do more, let me know (navbar font colour on hover/focus needs attention)

https://graceful-manatee-d48970.netlify.app/

[scottcwilson]

This is great but can we just have separation between the cells? If you don't css borders, just provide spacing (perhaps white, perhaps orange) between blocks. Or maybe use the color that you have used for the Developer docs block for borders, and change that cell to the blue you've used in the other boxes.

[scottcwilson]

Oh and please PR.

[scottcwilson]

One oddity - when you scroll down, the nav bar changes color.

[simon1066]

One oddity - when you scroll down, the nav bar changes color.

That was by design - an option within the Docsy template. I'll make it so it doesn't change colour.

[scottcwilson]

Superceded by #1258