So, I finished the login screen design.
My first try did not include any graphics but the logo of "BIBEL lesen" and the icon of "Registrieren". This was really plain and very straight forward. But after replacing the opaque color with a repeatable background pattern image, I did not want to go back.
I showed them to a friend of mine. He was polite saying the design was "nice". Since nice is the little sister of ugly I decided that this login screen needed a better appearance. So I used rounded corners instead of sharp ones, replaced the greenish linen background pattern with a stockphoto fullscreen on background-size: cover;.
I also want this app to be mobile friendly. But having no time for developing two or more separate apps, I go for one app with media queries to the rescue. I chose one basic css and for each higher resolution I add more information. So I work with min-with.I think this matches the mobile-first philosophy better than the max-width approach.I will hopefully result in good (i.e. less) CSS code. But now: The screenshots:
