search

DiSSCo / dissco.github.io

DiSSCo Digitisation Guide website
6 stars 15 forks source link

Improve Navigation #52

Open lmfrench opened 2 years ago

lmfrench commented 2 years ago

Suggestion to differentiate between colours and size of the navigation section headers. Currently, levels 2 and 3 are the same colour and all levels are the same font size.

I have not had time to implement this, as this is not one of the easy customization options to change. I had a quick look and we might be able to do this by updating the navigation.scss from just-the-docs template https://github.com/just-the-docs/just-the-docs/blob/main/_sass/navigation.scss: 

> .nav-list {
  display: none;
  padding-left: $sp-3;
  list-style: none;

  .nav-list-item {
    position: relative;

    .nav-list-link {
      color: $nav-child-link-color;
    }

    .nav-list-expander {
      color: $nav-child-link-color; 
    }
  }
}

Customization section of Just-the-Docs website suggests putting custom css in _sass/custom/custom.scss . We would need to have a new color variable for the 3rd level of navigation - presumably under .nav-list-expander - (but we should define colour under _sass/color_schemes/DiSSCotheme.scss so colours are all kept in same place).

The navigation font size can probably be updated by checking where it is set in navigation.scss file too.

lmfrench commented 2 years ago

Looks like this will be improved in future release of just-the-docs: https://github.com/just-the-docs/just-the-docs/pull/462 & https://github.com/just-the-docs/just-the-docs/pull/892