Add logo to the header.

[joedolson]

Fixes #185

[github-actions]

PR Preview
🚀 View PR Preview at https://wpaccessibility.org/pr-preview/pr-191.
If you see a 404 error, please wait a few minutes and refresh the page.
2025-09-30 20:52 UTC

[rianrietveld]

@joedolson Yes, this adds color and brightens up the design!
A few things

• In Firefox the logo is chopped off at the top
• the menu text scrolls below the title,
• on mobile view the logo is huge when zoomed in 200%, maybe adjust the size for smaller screen width

See screen shots

[rianrietveld]

Another thought: shouldn't the logo be clickable to the homepage, as in "expected behaviour"?

[joedolson]

I debated over that, and tried it both ways. But the text on the image is significant, and I felt that needed to be reflected in the alt text, which wouldn't have been appropriate in a link.

I'm thinking you may not be getting the latest CSS in your rendering; the mobile logo should be considerably smaller than that.

[rianrietveld]

@joedolson I did some more testing and this CSS solves the issues:

.site-header {
  display: flex;
  align-items: center;

  .lh-wrapper {
    align-items: center;
    img {
      max-width: 130px;
      padding-left: 1rem;
    }

    @include mq(lg) {
      img {
        max-width: 85%;
      }
    }

  }

}

The media queries are defined in: https://github.com/wpaccessibility/wp-a11y-docs/blob/main/_sass/abstracts/_media-query.scss

It also makes the logo less in your face and adds some padding and fixes the overlap of text in the sidedar menu.