Issue 14: lage responsivt design med plain css

[olestan]

Change

Added responsive styling using plain CSS and updated the layout and styling of the header, weather cards, details dialog, and footer. Some components were also reorganized into dedicated folders.

Closes #14

Verification

• Used browser inspect/dev tools to test the responsive layout at different pixel widths.
• Checked that cards, controls, header, footer, and details dialog adapt correctly without unwanted overflow.

Course requirements and AI use

This change addresses the responsive design requirement using plain CSS, primarily with Flexbox and Grid.

AI was used for debugging, suggestions for reasonable design tokens, and help when getting stuck. The suggestions were reviewed and the implementation was manually verified using browser dev tools.

[hasanmo]

Den andre PR-en bør merges til dev før denne PR-en for responsivt design. Design-branchen må deretter hente siste versjon av dev, slik at CSS- og komponentendringene bygges på de nye modellene og aktivitetsdataene. Når den andre PR er godkjent og merget, kan jeg merge dev i responsive design branchen for å sjekke videre. hva synes dere ? @olestan @oliveror @oliverdr

Verification

[olestan]

Til senere hadde det vært bra om header, footer og detailsoverlay ble refaktorisert til komponenter under /components, men jeg har for dette issuet holdt meg til strukturen slikk den er i App.tsx

[hasanmo]

Well done, short time left, so we can merge and test and continue on left issues