[BUG] Some pages align the content with the header and other's dont

[madolson]

The commands pages do:

while the documentation page does not:

[madolson]

It looks like it's related to the new style of the website which has some different CSS structure.

[madolson]

Related to https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html, which suggests and ideal line length of around 80 characters for main content.

[madolson]

The main page also aligns the content with the header. Ideally all of the pages should do this. @phiro56 can you take a look?

[makubo-aws]

I think this might be just the old formatting. Looks like every command page is like this and also every blog.

[madolson]

I think this might be just the old formatting. Looks like every command page is like this and also every blog.

The landing page is aligned.

[stockholmux]

Yeah, this is lacking a width limiter. I fixed it in devtools and found the problem:

The div with the left-aside class is missing the width-limiter class which globally controls the width of the page content. However, if you just add the width-limiter class it overrides the flex-direction of the left-aside class (which is 'row-reverse') and the command categories go to the right not left. So, there probably needs to be css something like .left-aside.width-limiter' to set the flex-direction` with higher specificity.

Although, I'm not quite sure this is meeting what the designer was meaning (not sure the background colour in the margins should be white, for example), so I won't push a fix. I also think you can re-arrange the template as needed instead of solving this with CSS alone.

[phiro56]

The full screen layout (with out the width-limiter class ) is by design. Command Reference, Community and blog all call for this "full width" design style.

Figma:
https://www.figma.com/design/xvnCYg7MAwcXi4SDyL5p1g/Valkey.io?node-id=13-3&t=bDXHp7NPzevAn9BW-1

[madolson]

@phiro56 For content that end users should be reading we should conform to https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html. This should be blogs and doc pages for sure. Other pages I don't think it matters. We might have missed it while reviewing the earlier designs.

[stockholmux]

@phiro56 In addition to what @madolson is writing about accessibility issues, the mockups in the figma link are in rougly 4:3 aspect ratio - from these mockups it would be impossible to tell how the final product would rendering on a laptop screen with a 16:9 aspect ratio or 21:9 ultra wide monitor (as originally posted)

The full width current implementation looks very weird as-is, verging on broken.

[phiro56]

@stockholmux @madolson Understood, Working on adding the fixed width styles now.

[phiro56]

PR ready for review: #269