Add color changes (darken) to navigation bar titles

[aleksati]

When hovering over the navigation bar titles (about, people, guides etc..), their color should darken by the same factor as the post title colors do when the cursor is hovering over them. This can be done by adding a line of code in the CSS file.

[aleksati]

hmm. it should be doing this already according to whats there. Maybe I have missed something here. @stefanofasciani maybe you can assist since you've made most of these changes? In this section of the css:

a {
  color: $brand-color;
  text-decoration: none;

  &:visited {
    color: darken($brand-color, 0%);
  }

  &:hover {
    color: darken($brand-color, 20%);
    text-decoration: none;
  }

  .social-media-list &:hover {
    text-decoration: none;

    .username {
      text-decoration: none;
    }
  }

If you change hover text-decoration to "underline" all links are underlined, including the navigation bar titles. Naturally, this should mean that the color attribute should also change the color of these navigation bar titles? However, they do not. Most likely its overridden by some other stuff in there. I can't seem to figure out exactly what it is.

Also, adding .&hover color to .page-link under .site-nav does not work either on my part.

[stefanofasciani]

what you posted above are generic style directive that may or may not override the style directive of all classes.

If you inspect the header (firefox inspector, or equivalent in chrome), you realize that:

Topics Projects Portal ..... belong to the class "page-link"

The text in the dropdown menu belong to the class "site-nav"

I believe that we need to include class specific style sdirectives (in the dropdown menu it seems that there are two more classes, dropdown and li.

[aleksati]

Strange, as I said it didn't work to add specifications for .page-link yesterday. But now it seems to work. Added .page-link under .site-nav in the main CSS file.

.site-nav{
  float: right;
  padding-left: .5em;
  padding-right: .5em;
  position: relative;
  text-align: left;
  .page-link {
    line-height: $base-line-height;
    display: inline;
    //padding: 5px 10px;
    &:hover { color: darken($brand-color, 20%); }
  }
}

[stefanofasciani]

i think there is still some issue with the VISITED links in the drop down menu. I thought I removed the change of color for visited links across the entire website, but they still show in the drop down menu (if you clear your history, all links in the dropdown will show as black because not visited, while they are supposed to be purple)

[aleksati]

Maybe they should be black (gray) as the menubar titles are, and turn slightly purple when hovering over them (also like the menubar titles).

[stefanofasciani]

Yes, they should be consistent with the rest of the blog. Change of color for visited links should be removed everywhere.

[stefanofasciani]

they should be light purple all the time, and dark purple when hoovering (same as the titles of the blog posts)

Stefano

On Tue, Jul 14, 2020 at 12:22 PM Aleksander Tidemann < notifications@github.com> wrote:

So theyre suppose to be purple all the time, right @stefanofasciani https://github.com/stefanofasciani ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/MCT-master/mct-master.github.io/issues/19#issuecomment-658100446, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIH3N7UKP4JKNSUKLPU2A3R3QWVTANCNFSM4OYZQLBA .

[aleksati]

I think I figured out what's causing some of these problems. It seems that the @import "minima" command is importing lots of stuff which sometimes causes conflict with what we write in the main.css. If I comment out the @import minima, I have the control I should be having over fonts, visited, hovering etc.

However, we need to import a few features from "minima", so we should include it at the very top I guess. That way we change the things we have imported, not change things then override them by importing new features after.

[aleksati]

@stefanofasciani , can you quickly check over to see if this is good now?

[aleksati]

I forgot the hovering color change of the menubar titles (will do this now), but other than that it should be okay.

[stefanofasciani]

it looks fine on my side as well, just the hovering missing. well done

[aleksati]

This is working now