Modify css for better web accessibility

[Revathyvenugopal162]

This PR mainly focusing on:

• Change the font size and color of main heading
• Reduce the column 1 (column with search bar button)
• Change the code block color back to pink
• dropdown list button visibility. Fix Problems with dropdown list #89
  
  
  

[jorgepiloto]

Thanks for addressing this, @Revathyvenugopal162. Let me ping here @timdansys so he is aware about the changes we introduce regarding accessibility.

Tim is still working on his notes and will share those in the incoming days.

[jorgepiloto]

From our private discussion, I think that inline code snippets (i.e. anything between ``) should also have a gray background. See this example in pydata-sphinx-theme.

[PipKat]

@Revathyvenugopal162 Your changes look good to me. I'll let Jorge, Maxime, or Roberto be the approver though. The one thing I do remember Tim talking about is our possibly using gray boxes like this for inline code (literal tagging):

.

However, I went to https://new.scipy.org/ to see what the doc for all the big scientific packages looked like. Sphinx was used for all but the IPthon doc, which was far less attractive and usable. All the the others used Sphinx, and of those, SymPy was the only one that used a custom-branded green color scheme that isn't appealing to me at all! Consequently, I'm OK with the pinkish-red color.

[PipKat]

From our private discussion, I think that inline code snippets (i.e. anything between ``) should also have a gray background. See this example in pydata-sphinx-theme.

Jorge's suggestion is a great compromise. I think in the gray highlighted box, the pinkish-red text is easier to read than the black text.

[Revathyvenugopal162]

Added the inline code gray background.Thanks @PipKat and @jorgepiloto for pointing this

[RobPasMue]

LGTM apart from the mentioned comments and @jorgepiloto's and @PipKat's suggestions. Can you update the screenshots to the latest versions after your changes?

[RobPasMue]

By the way, I thought we were going to change the color and way of showing the top bar menus when hovering or accessing (e.g. using an underline). Will this be handled in this PR @Revathyvenugopal162?

[jorgepiloto]

I think we can implement the "chapter underline" in a separate pull request, @RobPasMue @Revathyvenugopal162.

Also, @timdansys still needs to share with use his final notes about the new style. I would be nice to implement the proposed changes in issues to have a better idea on what has been implemented so far.

[MaxJPRey]

@Revathyvenugopal162 Thanks for adding it. 👍

[MaxJPRey]

From our private discussion, I think that inline code snippets (i.e. anything between ``) should also have a gray background. See this example in pydata-sphinx-theme.

@jorgepiloto and @PipKat I agree, the contrast is better than for numpy

For example:

[Revathyvenugopal162]

Adding the code inline boxes image.

[da1910]

I'm not entirely sure if it's worth making a new issue for this, but if we're thinking about accessibility - the contrast for the blue links, pink code/quote sections, and orange syntax highlighting in light mode is below the recommended value:

The WCAG guidelines - https://www.w3.org/WAI/standards-guidelines/wcag/ are probably worth following in this case, and aiming for AA level is quite reasonable (not much change needs to be made), aiming for AAA would be a much more obvious change.

Below is the suggested minimum contrast level in light mode:

Links - #0077B3
Quotes - #CD186D
Syntax - #B35000

[Revathyvenugopal162]

Thanks @da1910 for the color values. Adding these values.

[da1910]

We shouldn't change this, #0077B3 also fails accessibility guidelines in dark mode.

[da1910]

Looks good for contrast now!

[Revathyvenugopal162]

Merging. Thanks @MaxJPRey @jorgepiloto @RobPasMue @PipKat @da1910 for the thorough review.