Milestone 3m: Implement new style for profile & profile editor

[timea-solid]

Based on our new designs, we update the existing profile pane (work to be done mainly in profile-pane). (The profile pane is what is displayed under the header, disregarding the left side menu completely).

Current design

• not logged in: https://www.figma.com/proto/88xQawSSXzfQprEZPaKplZ/Solid-OS?node-id=889-1939&t=Ua9tAVPCzBd6mzrD-0&scaling=scale-down-width&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=889%3A1939&hide-ui=1
• logged in: https://www.figma.com/proto/88xQawSSXzfQprEZPaKplZ/Solid-OS?node-id=889-3491&t=Ua9tAVPCzBd6mzrD-0&scaling=scale-down-width&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=889%3A3491&hide-ui=1
• empty profile: https://www.figma.com/proto/88xQawSSXzfQprEZPaKplZ/Solid-OS?node-id=889-3141&t=UymaL4VVlKnPjOiy-0&scaling=scale-down-width&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=889%3A1939
• a link to all designs in one place - open left sidebar in Figma to see them. And one can paginate on some, for example the loggedin one.

! Be aware, design is in flow, not fixed - while the placement of things are pretty fixed, colors and buttons might still change.

TODO:

• split the cards (profile, bio, resume...) accordingly.
• make them editable when logged in
• bypass the usage of RDF forms, for editing profile (which also means we do not need to change contacts-pane now).
• take the colors from figma and add them to the profile. Work locally for now by updating the css vars in the dev css file. (for now we also work locally to override solid-ui css).
• keep accessibility features
• we shall also add mobile features - will mostly done through CSS and the new pane-registry interface. We have a mobile design for profile too.