Update error pages#41
Merged
yCodeTech merged 2 commits intoJun 8, 2026
Merged
Conversation
-update dark scheme rendering
yCodeTech
added a commit
that referenced
this pull request
Jul 3, 2026
* Update error pages (#41) Refactor code structure for improved readability and maintainability -update dark scheme rendering Co-authored-by: Stu <31927084+yCodeTech@users.noreply.github.com> * refactor: 404 and 500 error pages structure and refined CSS. - Added container div for improved HTML structure and added classes for better style selectors. - Moved the flex styles from the body to the new container class. - Refined values for widths, margins, and font sizes. - Changed some of the styles to use CSS nesting. - Moved the SVG styles into the main style block to keep all styles together. - Moved the `@media prefers-color-scheme` rules to be nested under each element that it's for. - Updated colours for dark mode. - Auto formatting * fix: small logo on desktop by ensuring the content fills the flex space. Using width stretch the content fills the entire of the flex container space, capping at max-width, so the logo is always at optimum size. Reason why this only affects the 404 page and not 500 page, is because 500 has the additional paragraphs that always makes the content fill the flex container. * fix: change `width: stretch` to `flex-basis: 100%` Width stretch is supported but some browsers require a different name, so we're switching to flex basis 100% instead which does the same job of filling the flex container space, but without an additional property for certain browsers. --------- Co-authored-by: Damien MATHIEU <contact@hounddd.fr>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request updates the
404.htmland500.htmlerror page templates to improve their appearance, responsiveness, and maintainability. The changes modernize the layout, enhance accessibility, and unify the branding and SVG usage across both pages.Styling and Layout Improvements:
Added a responsive
<meta name="viewport">tag and reworked the CSS to use flexbox for centering, improved font scaling withclamp(), and better color handling for both light and dark modes. This ensures the error pages look good on all devices and respect user preferences.Moved inline styles into a
<style>block for maintainability and consistency, and removed redundant or outdated inline style attributes from HTML elements.SVG and Branding Consistency:
500.htmlto match the more modern and maintainable structure from404.html, using consistent class names and gradient definitions. This unifies the branding and reduces code duplication.These updates collectively provide a more polished, user-friendly, and maintainable error page experience.-update dark scheme rendering