Simplify 404/500 page

[wxiaoguang]

It doesn't need to waste user's bandwidth to download a 404.png/500.png when error occurs.

ps: I think we do not need to translate "Not Found" and "Internal Server Error", they are widely used internet terms IMO, and they are clearer than the previous images (which only show a number)

[silverwind]

Maybe put on two lines?

       404 (48px)
    Not Found (32px)

[wxiaoguang]

Maybe put on two lines?

       404 (48px)
    Not Found (32px)

No idea which looks really better. Fee free to edit it.

Personally I don't think it's worth to make it that complex, most users do not use these pages daily.

[silverwind]

Some tweaks done. Ideally I'd want to vertically center on screen but that's actually not so cleanly possible with the current CSS so I left it unchanged. New design has less space and no ugly divider on 500 page.

[silverwind]

Actually changed the color to --color-text-light-2:

[wxiaoguang]

Wrong position.

[silverwind]

Fixed, the asymmetry is ugly, but I guess that text above would need to be separated out of the <pre> block to fix that as well.

[wxiaoguang]

[silverwind]

Maybe reduce spacing below code a small bit so that margin looks more equal above and below?

[silverwind]

Tweaked once more. I think it looks more visually pleasing if vertical margin between elements is roughly the same.

[silverwind]

Hold on with merge, I will try to vertically center on screen.

[silverwind]

Vertical centering added. Took a bit more CSS than I would have liked but the page layout is quite complex unfortunately.

[silverwind]

Let's wait for @wxiaoguang to have a final look.

[wxiaoguang]

Vertical centering added. Took a bit more CSS than I would have liked but the page layout is quite complex unfortunately.

I really dislike using too many CSS tricks for such a trivial page.

[wxiaoguang]

And it is even totally wrong! I will revert all unnecessary changes and won't spend time on such a trivial PR.

[silverwind]

I really dislike using too many CSS tricks for such a trivial page.

As I said, the complex CSS is because the page layout is bad and could still drastically simplified.

And it is even totally wrong! I will revert all unnecessary changes and won't spend time on such a trivial PR.

Would have been a trivial fix. I will iterate on it and vertically center it. I think it's important to have well-designed pages and especially on big screen it looks bad with the fixed margin currently.

[wxiaoguang]

I really dislike using too many CSS tricks for such a trivial page.

As I said, the complex CSS is because the page layout is bad and could still drastically simplified.

Hacking tricks don't really work well. There are different cases:

• 404 full page
• 404 embedded page with repo header
• 500 full page
• 500 in a partially rendered page, the error message part could appear at any place, unpredictable.

And it is even totally wrong! I will revert all unnecessary changes and won't spend time on such a trivial PR.

Would have been a trivial fix. I will iterate on it and vertically center it. I think it's important to have well-designed pages and especially on big screen it looks bad with the fixed margin currently.

I believe in: correctness > good maintainability > feature/enhancement > base maintainability > unclear patching for blockers > tricky fine-tunes.

For most UI alignment problems, we have fixed them with "base maintainability". But for this one, it only seems to be "tricky fine-tunes" at the moment.

[wxiaoguang]

If you would really to fine tune, try this: cb1462d

[wxiaoguang]

Anything else to change? If no, leave more fune-tunes to the future.

At least, this change is already better than before and doesn't introduce new problems (the UI didn't align in old code either)

[silverwind]

The centering looks slightly off, maybe I will tune later.