Expression page contrast

soybase / jekyll-soybase

SoyBase site, forked from jekyll-legumeinfo mid-2022; built with Jekyll and served on GitHub Pages

Apache License 2.0

2 stars 0 forks source link

Expression page contrast #164

Closed ChenProm-USDA closed 1 month ago

ChenProm-USDA commented 1 month ago

Expression Page:

Update expression page font color to black for 508 compliance.

Main navigation bar:

Update navigation font color to black for 508 compliance.
Fix issue with that prevents using keyboard to navigate through drop down.
- Now you can tab to drop down and use up and down arrow to highlight child node and 'enter' to select node.
add hovering effect to nav elements

StevenCannon-USDA commented 1 month ago

This all looks good to me. I'll just comment for now and will leave the review & approval for Rex or Jacqueline.

nathanweeks commented 1 month ago

Naive question: is any of the coloring defined in the theme's uikit-theme.css (such that it can be overridden in _sass/variables.scss -- I think?)

ChenProm-USDA commented 1 month ago

Naive question: is any of the coloring defined in the theme's uikit-theme.css (such that it can be overridden in _sass/variables.scss -- I think?)

@nathanweeks I can look into it.

StevenCannon-USDA commented 1 month ago

It looks good to me too -- but to @nathanweeks' question, have a look at _config.yml, in this block:

# UIkit theme customization (sets site colors)
style:
  primary_background: '#235626' # Very dark green: '#296e01'
  global_muted_color: '#006600'
  invert_navbar_text: true

I am not sure how those interact with _sass/*, but the documentation in that section and _includes at https://github.com/legumeinfo/jekyll-theme-legumeinfo may help.

nathanweeks commented 1 month ago

It seems configuring UIKit via _config.yml was deprecated in favor of the Sass approach.

maxglycine commented 1 month ago

I don't get it. What is the status of this PR? I OK'ed it and so did Jackie. What else needs to be done @ChenProm-USDA @nathanweeks @jd-campbell @StevenCannon-USDA

StevenCannon-USDA commented 1 month ago

I don't get it. What is the status of this PR? I OK'ed it and so did Jackie. What else needs to be done @ChenProm-USDA @nathanweeks @jd-campbell @StevenCannon-USDA

I think @ChenProm-USDA is looking again at the method. It looks like variables.sass is the preferred way to set font characteristics. See "details" for _sass at https://github.com/legumeinfo/jekyll-theme-legumeinfo.

ChenProm-USDA commented 1 month ago

I don't get it. What is the status of this PR? I OK'ed it and so did Jackie. What else needs to be done @ChenProm-USDA @nathanweeks @jd-campbell @StevenCannon-USDA

I think @ChenProm-USDA is looking again at the method. It looks like variables.sass is the preferred way to set font characteristics. See "details" for _sass at https://github.com/legumeinfo/jekyll-theme-legumeinfo.

Yes I'm looking into changing the global font color instead of individual pages/components. I think I just found the correct variable to add to the variables.scss file to accomplish this. I'm in the process of making the changes/testing now.

ChenProm-USDA commented 1 month ago

I added a global variable for text to be black. This should make all main text black. I was able to remove custom styling that forced font color to be black from various elements because of this.

I also updated the inputs used as buttons on the expression page to use the 'button' tag. This gives them button behavior without having to use custom css. All components should be updated to this change.