💄 Error & Maintenance Pages #538
Conversation
Issues:404 - Background size not consistent(Also the scrollbar shows all the time) 502 - Not responsive at all
502 - Custom font not loadingGotta add the Suggestions:502 - More user-friendly title message(Add 502 - Optional Discord buttonMight be too much for a simple 502 but idk Background gradientI do prefer the non-gradient look on the server message pages but it IS a little too bright without it in my opinion (probably just me because I have everything on windows set to darkmode). Maybe change the gradient to be a consistent darker overlay. |
|
Thanks for all the tips! I'm gonna be a bit AFK (moving time), but I will crack away at these suggestions. As it stands, I'm looking into the 404 page's scrollbar issue, but I pushed a commit that covers quite a few of the issues/suggestions. I like the 'page under maintenance' as the header waaaay better, users probably don't know/care about error codes. I'll take a look into the discord button idea. Quick thoughts: do we want to keep letter-spacing at 0.8rem? Given how much longer the header is compared to the 404 page, I thought it might look better at 0.4 (shown below) I pushed my current commit just so everyone can see how the current site looks after fixes so more discussion can be had- will rebase before merge. Pictures in PR updated with current commit |
background SCSS optimized, gradient implemented, 'black bar' implemented basic maintenance implementation font gradients needs to be set properly sizing fixes, font changes
glassglue
force-pushed
the
fix/errorPages
branch
from
4e18d55 to
df83cd5
Compare
-responsiveness added to text objects on the 502 page - given the length of the header, this seems to scale differently than the 404 but it's the same -min-height added to prevent the black bar from disappearing on rescales -quick font fix and gradient implementation -restructured the HTML file for simplicity
|
One more thing - I looked into removing the scrollbar from the 404 page, but I believe it's due to the use of As discussed above, here's an example of both top and bottom gradients - thoughts? |
|
Good idea to reduce the letter spacing on the header. It's quite long. I think there is still some tweaking with the background you could still do: The background height shouldn't change size here
It would also probably be better if the background size is changed with the width breakpoints
I have a commit here 3373c86 which resolves both of these (by just changing CSS that adds a background color to the text div block instead of adding a new html tag for the background itself). The top and bottom gradients look a bit too dark for me now but otherwise it's fine! As for the scrollbar issue- it occurs on every page. That would need to be fixed in a separate PR as it's not related to only error pages. |
|
Back from the hiatus! I'll add that commit that fixes those nasty issues as well - thanks for that! |
Hona
added
the
Blocked: Needs more work
|
How are you going with this @wallenben |
|
I added bakapear's fixes to this which solved the aforementioned sizing issues neatly. For posterity, the added commits make the pages look like so:
Couldn't find much on the scrollbar thing, but I'll keep looking to see what can be done. |
Gocnak
removed
the
Blocked: Needs more work
Closes #356
Closes #528.
This updates the 404 page to have the text be visible (yay)! Preview shown below:
I tried to make it as 1:1 with the render as possible - the black bar definitely helps quite a bit here.
As for the 502 page, I recreated a 'lite' version of the 404 page - because there is no button component needed, some tweaking was done. I opted to not include the gradient as I felt we wanted this page to be pretty light as-is, but it's a very quick implementation if needed. Stylistically this file fought me quite a bit (certain CSS properties didn't want to inherent correctly) so any suggestions for improvement here would be appreciated
