Background image of logo too high and too far left on login page

Description

URL where problem occurs:
https://test.archiveofourown.org/users/login

What happens:
The logo on the login page is positioned a bit awkwardly. Flash messages can overlap it and be hard to read (particularly the activation message, which sometimes appears despite ), which won't be 100% fixed by this (text can always wrap onto multiple lines), but it's a good reason to tweak it anyway... as is the fact the CSS background property isn't set quite right.

What should happen:
The logo should move down and right a bit – 2.5em should be good, since the right and left margins on the page are 2.5em.

https://github.com/otwcode/otwarchive/blob/356fd1e675eed1f312eabc438a4beaeaa3c6a116/public/stylesheets/site/2.0/05-region-main.css#L44 should be changed to

Testing notes:
Check the layout on big, midsize (e.g. tablet in portrait mode), and small (e.g. phone) screens. (Small screens shouldn't display an image.)

Activity

Show:
Nerine Luna Cyran
April 6, 2019, 6:10 PM

Trying to go to https://test.ao3.org/login gives me a 404 error, but https://test.archiveofourown.org/users/password/new seems to have the same issue

gbhsrspm
October 20, 2019, 11:41 AM

My pull request sets it to 0.5em to the right and 3em down; I found that any further to the right made it overlap the login text on mobile screens, and it needed to be at least 3em down to avoid the banner. I also used the background-position property as the dimensions weren’t recognised as part of the background property. The url is $devinstance/users/login (with the Vagrant dev setup, this defaults to: http://127.0.0.1:7000/users/login ).

gbhsrspm
October 20, 2019, 3:04 PM

“I also used the background-position property as the dimensions weren’t recognised as part of the background property.” – actually this was just me failing at css; it works fine if you remember to delete the existing ‘top left’ dimensions first…

Sarken
December 11, 2019, 4:00 AM

It’s definitely lower, and a tiny bit farther right, but yeah, we can’t really do much about the horizontal positioning without running into the text.

Looks good!

redsummernight
December 13, 2019, 4:01 AM

It barely avoids a 1-line error message. It overlaps if the message is multi-line / the screen is narrower. I don't think the extra space up top improves it much, but I like the extra left space.

Looks good.

DeployedToBeta

Assignee

gbhsrspm

Reporter

Sarken

Roadmap

Login

Priority

Low

Affects versions

Fix versions

Components

FrontEnd

Difficulty

Easy

Milestone

Internal 0.9
Configure