Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

Responsive, accessible navigation 9: ???

17 Feb 2021 🔖 jamstack web development
💬 EN

Visuals!

1em is 16px on most browsers. Taking a quick glance at Netlify.com, RealPython.com, Amazon.com, etc … I’m seeing menu font sizes range from about 14px to 18px.

So it doesn’t look like I need to mess w/ the font size too much to have things look “good.”

Just for fun, I made a 3rd “flexipage”, /wet, that has water.css applied to it.

Here’s what we’re starting with:

Screenshot of 3 side-by-side pages in "desktop" mode

First, I’ll set up a mixin called un_button_looking_buttons(); and include it into .topnav:

@mixin un_button_looking_buttons() {
  button {
    border: none; @mixin un_button_looking_buttons() {
  button {
    // Make a button not button-like
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    background-color: inherit;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-align: inherit;
    vertical-align: inherit;
  }
}

Screenshot of 3 side-by-side pages with "button" styling removed

Next, I’ll set up a mixin called un_link_looking_links(); and include it into .topnav as well:

@mixin un_link_looking_links() {
  a {
    // Make a link not link-like
    text-decoration: none;
    color: inherit;
  }
}

Screenshot of 3 side-by-side pages with link "decoration" & coloring removed


There’s a little bit of vertical misalignment between Page 1 and Dropdown A in my ordinary pages that doesn’t show up in /wet/. Looking into it, it seems that WaterCSS has managed to even out the line-height property to 1.4 throughout body.

In the navbar for Katie Kodes, I seem to have separately set .topnav.whole-bar button and .topnav.whole-bar a to line-height: 3rem.

In hindsight, I can see the wisdom in simply having a baseline line-height for the whole page when coming up with a CSS theme.

One of the reasons I imported WaterCSS into a single page, actually, was to make sure I didn’t paint myself into corners styling the nav that would fight with (or be made redundant by) well-designed whole-page CSS themes. Water is a nice tiny “theme.”

I guess … I guess I’ll just leave the vertical misalignment in my nav for now. It feels silly to work in a special line-height decision that, in the real world, would almost certainly be taken care of by a whole-page CSS baseline/reset.


TODO: Oh no, I forgot about voice input for controls. Is this all broken?

A11y dummy-check by Graham Armfield testing Summary and Details

Neither jason.af nor whitehouse.gov enable “Dark Mode” w/o JS. jason.af’s settings button simply doesn’t respond; Whitehouse.gov’s is a little annoying because the button is obvious but it just doesn’t do anything. Anyway, I guess I don’t have to worry about a pure-CSS color theme.

I should put a <a id="skip" class="sr-only" href="#main-anchor">Skip to main content</a> before my nav. https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/#main-anchor’s looks really good when you keystroke through it, too.

I like the way his flyout is the same color scheme as its parent, with a thinner font face, and the way each flyout is separated from the one above it by a high-contrast line (looks like also there’s a line at the bottom of the flyout, though not at right or left).

(Real Python achieves flyout item visual separation effect w/ all its subtitling, icons, arrows, changes of color, focus bounding-boxes (omg they match the colors!), etc. Oh, wait – see Store – maybe not so much.)

I think I can beat both Hassell & RP for hover-highlighting in the flyout.

Playing w/ Stephanie Walter’s page … one thing I’m noticing is that the line-height that the nav items have can really impact how much margin & padding they need to further separate from each other when they flow on top of each other. That said, Stephanie doesn’t have any special line-height’ing beyond her usual body of 1.5 and div, ol, p, ul of 1.55. Still … moral of the story it it’s hard to design a navbar before you’ve come up w/ a comprehensive site look & feel that includes line-height beyond the nav.

That said, I defintely could simply pull a Katie Kodes & muck w/ the nav line-height. (But then what of an eventual switch to branding img’s?)

TODO: Now that everything’s big, I definitely want “escape” to work in a dropdown submenu, too, not just on the parent clicker. It does at Real Python. (Note: escape does not close the whole menu on RP mobile.)


Screenshot of 4 side-by-side pages in "desktop" mode before starting on "pretty" stuff

Screenshot of 4 side-by-side pages in "mobile" mode before starting on "pretty" stuff

Screenshot of site w/o JavaScript before starting on "pretty" stuff

(See Github commit)


I rather like the sans-serif font family from Water CSS, so for lack of a better idea, I grabbed it.

I also put a thin light gray border all the way along the bottom of the masthead (inspiration: Stackbit Exto theme).

@mixin visually_distinct_top_look() {
  border-bottom: solid 1px #e9ebed;
  font-family: $sans-fontfamily;
}
#masthead {
  @include visually_distinct_top_look();
}

Screenshot of the masthead with a font applied

--- ---