Clean up style css into a modular css structure

[gbowne1]

I propose we

/src/css/
  base/
    reset.css
    variables.css
    typography.css
  layout/
    header.css
    footer.css
    grid.css
    drawer.css
  components/
    cards.css
    badges.css
    modal.css
    forms.css
  pages/
    index.css
    login.css <in a current PR>
    register.css
    offline.css <for the offline page>
  themes/
    light.css
    dark.css
  app.css or index.css           ← imports everything above
  bootstrap-overrides.css

Then the app.css or index.css can just be a @import block for the style sheets

This is psuedo css so make it work however necessary

/* ============================================================
   1. Bootstrap (must load first)
   ============================================================ */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");

/* ============================================================
   2. Base Layer (foundation styles)
   ============================================================ */
@import url("./base/reset.css");
@import url("./base/variables.css");
@import url("./base/typography.css");

/* ============================================================
   3. Themes (system + manual overrides)
   ============================================================ */
@import url("./themes/light.css");
@import url("./themes/dark.css");

/* ============================================================
   4. Layout (global structural elements)
   ============================================================ */
@import url("./layout/header.css");
@import url("./layout/footer.css");
@import url("./layout/drawer.css");
@import url("./layout/grid.css");

/* ============================================================
   5. Components (reusable UI pieces)
   ============================================================ */
@import url("./components/cards.css");
@import url("./components/badges.css");
@import url("./components/modal.css");
@import url("./components/forms.css");

/* ============================================================
   6. Bootstrap Overrides (isolated, safe)
   ============================================================ */
@import url("./bootstrap-overrides.css");

/* ============================================================
   7. Page-Level Styles (loaded by each HTML page)
   ============================================================ */
/* Do NOT import page CSS here.
   Example: index.html loads /src/css/pages/index.css */

[gbowne1]

Doing this should also reduce lint and prettier errors and unnecessary bad workflow runs.

styles css can go away.

Apparently this is also how modern PWA are modular...

From here we can add more individual media queries etc

[gbowne1]

Also, login.html, watch.html, register.html, go-live.html have inline styles that need to be moved to individual .css