Update visual design of header (this is a design component)

[astridu]

Current header:

New header (for reference, this is the same style as the Preassembly header that was just updated):

• Background color: Stone/Dark 544948
• Stanford University in cardinal red 8C1515 at the top on white background: links to www.stanford.edu
• Stanford Libraries logo (white text w/full color rosette): links to library.stanford.edu
• Top right nav: Feedback and Logout (goes to the same place they do today); white links with underline on hover
• Title: Argo (Semibold 36pt)
• Bottom right nav: Impersonate •.  All workflows •. Bulk action • Register (Bold with white link on hover, there should be about 3 spaces between each link and the bullet point separating the 4 links)

[astridu]

Also an example of our header template here if this helps: https://sul-dlss.github.io/component-library/header/

[jcoyne]

@astridu where would you put the "Logged in as " in the new design? Are we going to keep the register drop down, or does that functionality move elsewhere?

Is the change from "Bulk Actions" to "Bulk action" (plural to singular) intentional?

I don't believe Argo currently has a logout page. What would that look like?

[astridu]

1. I didn't think we needed the 'logged in as', but let me know if there is a compelling reason to keep it.
2. Sorry, the mockup was just missing the drop down icon.

[justinlittman]

Is this design supposed to be responsive? (And if so, how?)

[astridu]

Yes. This is what we have, but I need to doublecheck on the mobile view bc we are currently working on that one.

[jcoyne]

@astridu the "logged in as" is important if you're impersonating some other user/group.

[astridu]

ok, will work on it.

[astridu]

I added the 'logged in as' back. It's next to the logout link. As for making this responsive, the EarthWorks team is working on this same header and will have the responsive design. I'm wondering if you want to wait until they have it completed and copy it?

[jcoyne]

I want to note that this header is part of the component library: https://sul-dlss.github.io/component-library/header/ although we don't yet have a dark-stone version.

[jcoyne]

We should be able to just replace the palo-alto-dark class we have in the component library with a stone-dark class described as:

:root {
  --stanford-stone-dark-rgb: 84, 73, 72;
}
.stone-dark {
  --bs-dark-rgb: var(--stanford-stone-dark-rgb);
}

[aaron-collier]

@astridu What font is used for "Argo" in the header? When using the component library and styles, I get something slightly different:

Thanks.

[astridu]

@aaron-collier Good catch! That is definitely not the right font. It should be "Source Sans 3", semibold, size 36. Thank you for letting me know.

[jcoyne]

@astridu that looks like Source Sans 3 to me. How can you tell? Ah, it should have a closed tail "g"

[aaron-collier]

@jcoyne what I noticed was that the lower case g is different.