# Projektstruktur

Så här är www.nilstromab.se uppbyggt.

## Kataloger

| Katalog     | Syfte                                                             |
| ----------- | ----------------------------------------------------------------- |
| `assets/`   | Gemensamma resurser: css, js, img                                  |
| `projects/` | Ett eget projekt per underkatalog, var och en med egen `index.html` |
| `docs/`     | Anteckningar, dokumentation och QA-material (`docs/qa/`)           |
| `robots.txt`| Sajtens robots-fil                                                 |

## Nuvarande projekt

| Projekt                    | Ursprung      | Beskrivning                                                             |
| -------------------------- | ------------- | ------------------------------------------------------------------------ |
| `internetrevolutionen/`     | `index.html`  | Autospelande tidslinje; slidern ligger i `slides/internet-timeline.html`  |
| `stoke-city-2013-14/`      | `index1.html` | Stoke Citys trupp 2013/14 – homage                                        |
| `kristian-ii-bohuslan/`    | `index2.html` | Kristian II:s kampanj i Bohuslän 1531–32: tidslinje + Leaflet-karta      |
| `germanic-case-evolution/` | `index3.html` | Kasusutvecklingen i svenska/tyska/isländska; egen `style.css` + `app.js` |

Alla fyra projekt är helt fristående (inline CSS/JS eller CDN-länkar) och kan
publiceras var för sig.

## Regler

1. **Ett projekt = en katalog** under `projects/` med egen `index.html`.
2. **Nya projekt läggs till** genom att skapa en katalog och lägga till en länk på framsidan.
3. **Gemensamma resurser** (typografi, färgtema, verktygsskript) ligger i `assets/`.
4. **Gamla filer** arkiveras i git-historiken – inget raderas utan anledning.
5. **Framsida** (`/index.html`) är alltid landningssidan med länkar till alla projekt.

## Historik

Tidigare nåddes sajten via `index.html` (tidslinjen), `index1.html` (Stoke
City), `index2.html` (Kristian II) och `index3.html` (kasusdashboarden),
samt `style.css`, `app.js` och `slides/` på rotnivå. Filerna kommer från
zip-arkivet `nilstromab.zip` och är nu omplacerade enligt tabellen ovan.

## Gemensamt tema

Sedan harmoniseringen delar alla projekt samma visuella grund:

- **Tema:** `assets/css/theme.css` – pergament/dark academia, bärnstensguld-accent
  (`--color-primary`), ljus/mörk-läge via `data-theme`
- **Fonter:** IM Fell English (display), Cinzel (rubriker),
  IBM Plex Sans (brödtext), IBM Plex Mono (etiketter)
- **Per projekt behålls en egen accentfärg:**
  - internetrevolutionen: cyan `#52c7ea`
  - stoke-city-2013-14: Stoke-rött `#d31623` på bärnstensbotten
  - kristian-ii-bohuslan: guld `#c8960a` (sajtens primärfärg)
  - germanic-case-evolution: bärnstensguld + språkfärger (sv/blå, de/röd, is/teal)
- **Navigation:** varje projekt har en "← Framsidan"-länk högt upp

Nya projekt: ladda gärna `assets/css/theme.css` och följ samma mönster.

## Tillgänglighet

Sajten följer WCAG 2.1 AA i begränsad omfattning:

- **Kontrast:** alla textförgrundsfärger mot sina bakgrunder minst 4.5:1
  (brödtext) – tidigare svaga `faint`-toner är förstärkta
- **Tangentbord:** skip-länk ("Hoppa till innehållet") på framsidan,
  synliga `:focus-visible`-ramar via theme.css
- **Reduced motion:** `prefers-reduced-motion` respekteras på alla sidor
  (animationer/övergångar stängs av)
- **Skärmläsare:**
  - alla bilder har alt-texter (även JS-genererade spelarkort)
  - filterknappar har `aria-pressed` som JS håller synkad
  - diagram-canvas har `role="img"` + svenska aria-labels
  - kartan har `role="region"` + beskrivning
  - iframe har `title`
  - navigering märkt med `aria-label`
- **Semantik:** en h1 per sida, semantiska header/nav/main/footer,
  `lang` satt på alla sidor (sv respektive en för Germanic Case)