search

zwbetz-gh / cupper-hugo-theme

An accessibility-friendly Hugo theme, ported from the original Cupper project.
https://cupper-hugo-theme.netlify.app/
MIT License
301 stars 190 forks source link

Align active nav contents with the rest of the nav #2

Closed JPablomr closed 5 years ago

JPablomr commented 5 years ago

I noticed that the active element in the nav for large screens does not align with the rest of the elements:

not aligned nav

I'm not sure if this is by design, so feel free to ignore me if so. I am solving it with this:

@media screen and (min-width: 768px) {
  .pattern [aria-current] {
    margin-left: 0.25em;
  }
}

aligned nav

I'm not entirely sure what's the best way to implement this inside the code (I have an overrides.css file so I can keep pulling updates.)

zwbetz-gh commented 5 years ago

Hi @JPablomr, thanks for bringing this up. I noticed this too when initially porting the theme. I think it is by design, in order to make the active nav "pop".

But now that I've seen what it looks like when aligned, I like that better 🙂 so this has been fixed in ebea25e.