Nav tracker for chapters

Adds a panel below the navigation buttons that tracks which chapter is active. The style is similar to what-is-drought

One goal of the site layout is to have the story fit into a single view, whether on desktop or mobile. To do this, I've contained the core story contents all within grid-container-viz and set the height to 90vh. Within this container is the title, images, text, buttons, and now navigation. To get the elements to size right, I'm using a flex layout that grows or shrinks elements to the space and adapts between mobile and desktop. This works fairly well, however if the chapter text is extra long (maybe only in 1-2 of the current text chunks) it will be longer than 90vh and overlap with the references.

To address this, I am setting min-height instead of height on the container. This allows the text space to grow for larger text, but in most caess keeps a consistent sized space for the text to be in. This is preferred because on mobile, having a consistently sized text container keeps the buttons in the same place for each chapter and easy to navigate through. Without this, the button placement would shift up and down between chapters.

In a few cases there are still layout shifts with the text. This could potentially be resolved by refining the text on the longer chapters. For now, the buttons slightly move, but it's a pretty minimal issue. See screenshots below for how this performs on desktop, large mobile (ipohneXR), and smaller mobile (iphone se). I think ~700-800 is the height threshold where we start seeing this.

desktop:

large mobile:

small mobile:

I think this also addresses page routing prohibits sharing of link (#19) · Issues · Water Mission Area / VizLab / trout_and_climate · GitLab (usgs.gov) I refined the router chapter associated, and expect this to resolve the issues with navigation.