First edit: header background image #52
Conversation
Signed-off-by: Vanessa Sochat <vsochat@stanford.edu>
Signed-off-by: Vanessa Sochat <vsochat@stanford.edu>
| @@ -61,7 +61,7 @@ footer-link-col: "#404040" | |||
| # Alternatively, the navbar, footer, and page background can be set to use background images | |||
| # instead of colour | |||
|
|
|||
| # navbar-img: "/img/bgimage.png" | |||
| navbar-img: "../img/rse-transport-light.png" | |||
There was a problem hiding this comment.
Should we use the same background image in the footer, for consistency?
There was a problem hiding this comment.
Or at least, the same color changes?
There was a problem hiding this comment.
I didn’t give it much thought! Let me try it out quickly and see. Do you think a bold footer that sandwiches the page is better than a subtle one that doesn’t distract from the header and content?
There was a problem hiding this comment.
My thought was that headers and footers tend to be symmetric, to sandwich the page as you say.
There was a problem hiding this comment.
They can be, you can see everything from an off gray to black, to the exact same image. Here it is, as it is now (keeping a gray):
and here it is if we set the same image:
of course we'd need to fix the text color!
I actually like the dark, but having the double purple is a bit much for color (it's generally good to be selective about colors). We could also mirror something that the UK rse site did? Here is their footer:
So here is an example with ours:
I personally am of the mindset of having simplicity, and being careful about the choice of bright and dark colors. In that the footer was thin, I think I'd go for a dark (non purple) one like above. But it's fairly large, so instead it would draw attention away from what's above it. I'd definitely like to hear others' opinions too - I'm partial to the light colors, but could see the black with purple line being a reasonable option. I don't like the double purple - it's just too much purple.
There was a problem hiding this comment.
Another suggestion is to thin it down just a bit, removing the one massive GitHub link (and we can put it somewhere else) so the footer is a bit cleaner:
There was a problem hiding this comment.
That might work a little better with a dark grey, if you still want to go dark.
There was a problem hiding this comment.
Let me know if you want to see anything else!
There was a problem hiding this comment.
I actually like either of the two border options! I think the border gives a nice continuity without being so starkly contrasting with the white. But I'm good with majority rules on all these design options too...
@cosden could you describe the accessibility issues you are worried about?
I was worried about the white on maroon in the header. I put in #FFFFFF and #500e3d in https://webaim.org/resources/contrastchecker/ and it passed all the tests they have there. So as far as I can tell, it's fine!
Signed-off-by: Vanessa Sochat <vsochat@stanford.edu>
|
Did we want the small border (5px, shown here) or the large (20px, shown further back)? I lean toward the larger one, since it establishes a bit more symmetry between the header and the footer; but I could go either way. |
|
Here is 15px, for a third option
|
|
Either 15px or 20px looks good to me. |
|
The 15px (weirdly) looks better here, but in the actual browser I prefer the smaller one. I would have gone with no border at all, so now I'm compromising to be a smaller purple. Thoughts? |
Signed-off-by: Vanessa Sochat <vsochat@stanford.edu>
|
@cferenba done! 15px. |
|
|
|
This looks great! Seems to me like a good compromise - it gives some symmetry between the header and footer without an overwhelming amount of color in the footer. Unless @cosden or anyone else has major objections, I think we're good to go. |
|
I know @cosden already said he liked it, plus one other in Slack, and I'll add in my vote! Merging. |
|
Beautiful! https://us-rse.org/ Let me know what you'd like to work on / test next. |
Here is the first of several PRs (that we can move through one by one) to customize the header. Specifically, we add a subtly textured background image to give the site a little more oopmh, and (start to) make it look less identifyable as a Beautiful Jekyll theme.
A quick snapshot:
The logo would look much improved with transparency and possibly removing the text, but I do not have a version with full stripes across the top (I am not able to create a professional version with my software) so instead I left as is.
Note that the only changes here are adding a background image, and adjusting the header colors so it's readable.
Signed-off-by: Vanessa Sochat vsochat@stanford.edu