Page d'identification : utilise un bloc visuel pour l'identification, avec une image personnalisée en entête.
Page du portail : la boîte utilisateur est semblale au bloc d'authentification. La liste des applications est placée en vis-à-vis de la boite utilisateur.

Personnaliser le thème

Les sources contiennent une base pour le logo. Pour mon usage personnel, j'ai ajouté le nom de mon instance (cf captures d'écran). J'ai défini des variables afin de faciliter l'utilisation d'une image différente. Normalement, il devrait être possible d'avoir l'affichage désiré en modifiant seulement la valeur des variables.

Explication des variables

(...) Une fois l'image modifiée, il faut adapter les dimensions de la boîte.

Renseigner la taille exacte { width: ...px, height: ...px } pour la page d'identification et c'est bon.
Pour la boîte "utilisateur", c'est un peu plus complexe. a. Changer l'url de l'image de fond et renseigner la hauteur de l'image dans l'attribut padding-top au lieu de height. Il faut également adapter la largeur de manière classique (width) b. Il faut également modifier l'attribut margin-left des éléments de la boîte utilisateur. La valeur de celui-ci correspond à la distance entre le bord gauche de l'image de fond et le début de la ligne de base de 336px. Pour peu qu'elle soit bien centrée, ce qui est de toute façon nécessaire, c'est simplement (largeur de l'image - 336) / 2

Notes sur l'image

Nous avons conservé la taille originale de la boîte d'authentification, soit 21em ou 336px. Ainsi, l'image utilisée en entête doit avoir une base de 336px pour conserver l'effet de bloc. L'image peut être plus large, comme c'est le cas ici par exemple, mais il faut alors faire attention à bien centrer les 336 pixels de la dernière ligne qui seront collés aux autres éléments d'interface.

Le conteneur flex de l'image est paramétré pour ne pas rétrécir (flex-shrink: 0), afin de ne pas casser l'interface quand l'écran est trop petit.