Make custom Keycloak theme responsive

Description

The login screen of the custom Keycloak theme archlinux is not responsive. This means the Arch Linux logo and background do not properly scale as the window is being resized resulting in bad experience on smaller screens such as mobile devices.

Summary

The custom login CSS file was modified to modify the dimensions as the screen size changes setting the minimum threshold to the same value the default Keycloak theme does.

Breakdown

• Make the login screen background and logo scalable (responsive)

Test Environment

• Ungoogled Chromium normal window resizing
• Chrome web developer device emulation mode

Demo

simplescreenrecorder-2020-08-29_15.26.35

simplescreenrecorder-2020-08-29_15.37.51

Before (Wide)

After (Wide)

Before (Mobile)

After (Mobile)

added 1 commit

• ee0b8299 - Keep aspect ratio for SVG scaling and use cover for background scaling

Compare with previous version

added 8 commits

• ee0b8299...bd7a852d - 6 commits from branch archlinux:master
• f354a2a9 - Make the login screen background and logo scalable (responsive)
• dee6462d - Keep aspect ratio for SVG scaling and use cover for background scaling

Compare with previous version

changed the description

added 1 commit

• c0f242d0 - Increase the size of the Arch Linux logo on smaller resolutions

Compare with previous version

changed the description

merged

mentioned in commit 27c75aa3