CSS Theme Improvements

[cycomachead]

This is a collection of known bugs and challenges

Mobile View

• in the mobile dropdown the text is hard to read
• the page title in the mobile view in white on white
• footer text needs to behave better - perhaps slide down below the row of logos as it's own, reasonably-sized row
• sidenotes (partial-width yellow boxes) should become endnotes (full-width yellow boxes); sideHOM boxes should become full-width also, and gray vocab and "on the exam" boxes also
• header bar text and logo missing and "Go to Table of Contents" crashes into globe icon (iPhone SE)
  
• CSP 2.3.4.3 List issues (that list has always been anomalous though)
• It would be nice if you could click an image to see a larger version of it
• The desktop view shouldn't load first and then switch to mobile view; also it shouldn't occasionally load showing only the far right margin (CSP 2.4.3, iPhone SE):
  
• Formatting involving indentation should be removed (see e.g., CSP 2.4.2.2.c.a, iPhone SE):
  
• Topic page images obscure page names (e.g., U4 Topic Page, iPhone SE)
  
• Pictures should never end up distorted (e.g., 4.1.1, iPhone SE)
  
  

Printable "Worksheet" View

• We should hide the NSF footer or format it differently.
• We probably want to display the page/lab title at the top of the printout
• Have some element, perhaps a HTML control for a "student response" which shows only on the print view.
• All normally-displayed images should print (many don't at least for Mary on e.g., CSP 3.1.3 or 7.1.2 Chrome 99.0.4844.51 macOS 10.15.7)
• We should decide how to print an animated gif, ideally, one pre-selected still with some indicator that it's actually an animated GIF that they can view online.
• Is it possible to have un-expanded "click for more" boxes (e.g., yellow-box hints, ITITs, and TIFs) hide when printing. Ideally, they would appear if expanded when printing (but without the "click for more" sentence) and then the whole box would be gone if printed while unexpanded. Maybe we could go back through and put a CSS element or ID on the surrounding box?
• Perhaps we could cut back on the indenting (such as reducing intents by 50%)
• The fill-only design elements (such as the pink "learn" box at the top) should probably get a thin border of some kind since the backgrounds don't print (and shouldn't)
• We should think about how to handle DIVs breaking across pages, e.g.:
  
• We should decide how to handle elements that float over other elements since their backgrounds won't cover what's underneath. (Actually, some folks have long wished that elements didn't float over others like this even in the screen design.) For example:
  

/cc @maryfries for additional thoughts

---

Some technical things:

We've been stuck on Bootstrap 3 + using the 'bootstrap theme' add on. I think it'd be great to drop the 'bootstrap theme' add-on and then upgrade to bootstrap 5. #74 has a start at this.