Social Links Profile

No direct questions. Mostly a refresher as I haven't done CSS/HTML in ages (apart from a personal thing). Uses margin-inline but margin-bottom as in theory only the text would change direction not the location of the blocks, and I use clamp() for sizing the frame (327 mobile, 384 desktop) and the padding in the frame (24px at mobile, 40px at desktop).

Was trying to use a split CSS / @layout and struggling a bit with how to parcel out the bits into separate files.

I've done:

css/
    index.css (pulls in all the other files)
    reset.css (general resets)
    base.css (some base level styling, originally included setting font size/weight/color on body)
    properties.css (any properties i'm using ... well basically everything is a property, (bad?) habit I've gotten into)
    typography.css (imports the font face)

The others are currently empty while I tried to decide whether to split everything in properties.css into separate files and also break down social-profile.css out across those files too. Depends on if wanting to treat the thing as a component, or an actual page. If its a component then actually the css variables should be moved into social-profile.css

So in theory for page:

• font properties, h1/p/a styling would go into typography.css
• spacing / margin / padding properties & related styling into layout.css or spacing.css
• colour properties, h1/p/a/body/social-profile styling would go into theme.css or color.css
• then only specific styling would go into social-profile.css

But if treating it like a component I guess I really should:

• move specific properties from properties.css to social-profile.css
• setup general properties in properties.css (like --fw-400, --bg-color and so on)

Have submitted for now with the weird quasi mix of both styles. Will pick one and refactor later.

Only enhancement over the base design is that it will adjust the layout for mobile landscape. So that it profile part is on the left and links on the right. This is the only media query.