/* * * Style Sheet for FrenchBanknotes.com * FrenchBanknotes.com site and content (c) 2008 Dave Mills * ======================================================== * * Order of entries in this file: * 0. Global CSS variables * 1. Generic tag styling * 2. Shared page styling * 3. Page-specific styling * 4. Navigation styling * 5. Classes added and removed from elements by Javascript to effect style changes * 6. Media queries * 7. Device-Specific Media queries * * NOTE: All modern browsers will load all css files even if the media type doesn't match the current output * type. That means that splitting out media types into separate files is not a good thing for performance, * as it creates more http requests to load the separate files. The only reason to split them apart is for * sanity of the programmer. I've kept the media queries here this one CSS file for now. * * Note on units. See https://zellwk.com/blog/rem-vs-em/ for an excellent write-up of when to use em vs rem. * I am trying to stick to this: * - EM is based on the current font size, and is best when you want to scale a sub-component and its children. * - REM is the default browser font size, and is best for when you want everything to scale uniformly page-wide. * Using REM means that everything in your page scales to that user preference so they don't have to even * touch the zoom. * - Use px only for small fixed design elements that I do not want to scale (borders, for example) * The body font-size is set to 87.5%, which will mean that a setting of 1rem will render as a 14px font if the user * is using default browser configuration. The user can then raise or lower that default font size and the fonts * on the site will scale accordingly. Remember, rem calculates size relative to the element, where em is * calculated by the sizing of its own element. * * Would like to use :has() and :is() (replaces :matches() and :any()) to provide some interesting CSS flexibility. * As of 9/22, all the major browsers support :has() except for Firefox (soon) and Safari for IOS (never for my old * iPad, needs IOS 15.4). :is() is quite well supported, except Safari for IOS needs to be v14. Both Chrome and Edge * for IOS do support these pseudo-classes, but require IOS 14 as well. IOS 14 doesn't run on my old iPad, so I * think my only option is to get a new iPad to use these CSS features. IOS 15 is current and comes on new iPad * Air, Pro, Mini or regular iPad. On my Android phone, I use Chrome v105, which supports both of them. * * There are some classes to help with the responsive switch between desktop, tablet and phone devices: * - enabled, disabled - these classes are used in the ul#groupNav li tags, so that all pages can * list the entire site's navigation, so that it can all be displayed in the hamburger and settings pages on * small devices, but not shown on the larger device pages which each only list the navigation for relevant * sub-pages. * - burgerMenu, styledMenu - these classes are inverses of each other that turn on and off display, and * are used to manage specific
  • tags that should be on or off in one or the other menu. * * Wherever possible, Javascript should not directly change styles on elements. It should add and remove CSS classes, * and allow the CSS to effect visual changes. I follow this except for situations where I need to make style * changes (usually size dimensions) that are only known within JS. Rather than encoding magic numbers in the JS, I * use the following techniques: * PHP values are sent to JS via "data-" attributes in the