Refactor all CSS to use more modern, minimal features

I'm still using some quite old-fashioned CSS in parts of this site. Strip back the CSS to the bare minimum and add declarations back in only as needed.

Examples of things I should consider:

A simplified reset

Remove some of the less-needed rules and add some of the stuff in this article

[ ] text-decoration-thickness and text-underline-offset for body links. [ ] A better focus state with :focus-visible and outline-offset(See (here)[https://css-tricks.com/standardizing-focus-styles-with-css-custom-properties/]) [ ] Better scroll-padding for fragments.

Using `@layer` to split styles into groups.

I should probably keep this simple, but something like this might work...

@layer reset, theme, global, layout, components, utilities, states;

Proper Theming and Beanding

Encode my brand colours in CSS variables, including standard values for border radii, shadows, borders etc. Use color-scheme and accent-color to apply styles for different themes.

See more here

Get Ready for Container Queries

Convert all layout components (generic and cards etc) to use container queries rather than media queries.

See here and (here)[https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/?ref=sidebar#context-based-container-queries].

Use Colour Mix function to make new colours.

Eg. color-mix(in hsl, var(--brand-primary), transparent 95%)

Use `:focus-within`

To outline cards where elements inside them have focus.

Use `text-wrap: balance`

Use this to avoid orphans in headings and cards (currently Chrome-only experimental)

dannysmith / dannyis-astro