🐛 still missing org custom templates for our error pages

[DerekNonGeneric]

🐛 Bug report

Location

Section of the site where the content exists

Affected URL(s):

• https://open.inf.is/403
• https://open.inf.is/404
• https://open.inf.is/405 (?)

Description

Concise explanation of the problem

in our long-lasting issue: #1540 it was made clear that this was going to be a two-part challenge; however, one shouldn't breathe too big a sigh of relief when reading the portion i've excerpted from the original — altho it's true that now we've got a great head-start on tackling the complete solution…

we are very much a culture of "whole jobs done well" here — so let's get this show on the road w/ implementing the whole shebang — which would address all points below…

• we now have a 404 page (good)

  

• the styles are, however, not ideally implemented;
  they show up on other pages when viewing the source (bad)

• using an h2 heading for the text of the error is simply obtuse and unacceptable as that is essentially dissing the semantic web; which we've made very clear (several times) something we perceive as an unbreakable tenant (w/ exceptions only made under extreme circumstances; this is not one of them)

• we need to create a custom template for them; those would live in the below dir
  https://github.com/OpenINF/openinf.github.io/tree/live/_layouts

_Originally posted by @DerekNonGeneric in #1540

---

• I would like to work on this issue and submit a pull request.

[DerekNonGeneric]

first let's start by breaking the points down; we begin w/ the below:

• the styles are, however, not ideally implemented;
  they show up on other pages when viewing the source (bad)

---

now, this may seem like a simple dumb mistake that someone like myself w/ such interest in performance could not possibly live w/ himself for making — the truth of the matter is that correcting this is not always straightforward (depends much on static site generator being used) and seeing as how we were not too heavily invested in Jekyll at the time, such a low-hanging & low-impact perf optimization was not high priority, but here's how i typically like to handle this when using Jekyll (in particular):

• create a custom CSS class for each major page template (errors would be one); that is applied to some HTML tag very-high in the hierarchy (body maybe could be a good one)
• create a custom SCSS file specifically for addressing the styling of these newly-created error template pages (and nothing more, don't go overboard; just the error template bits)
• in the template governing the head tag, create some conditional includes:
  • within the style tag, if the page being compiled uses our new error template, include the compiled SCSS file that we've made for specifically styling error template pages
  • apply the CSS class (might just be called .error-page) to the body HTML tag allowing for any additional specificity control if necessary (most useful w/ more diverse templates, specifically when they are subtly different and/or composed of several templates nested within each other)

alright, so that's generally the plan i use for tackling the unused CSS styles (not a huge problem), but something i had not considered is how this would all interplay w/ the other long-standing issue regarding minimal CSS per page (critical path):

• 🎨✨ adopting sanitize.css #851

i do not imagine there being much deviation from my proposed solution above…