Website revamp

[jbodner09]

Current design is obsolete and boring. Can we make the site look more "modern" and "seamless" like GPH?
Potential problem: how can we make it look nice, but also generic enough for ALL events? (We can't just make a sweeping change that breaks everything else from the past...)

[jbodner09]

Related: #869 (for bootstrap update) and #870 (since it may inform the design)

[vidapour]

Dana graciously offered her design skills to revamp the home page <3

Purely for aesthetic purposes. Additional features to come later.

[jbodner09]

Checklist for style updates after bootstrap merge:

• printing directly isn't working due to iframe sizing. Remove height property on https://github.com/PuzzleServer/mainpuzzleserver/blob/main/ServerCore/Pages/Submissions/Index.cshtml#L204
• Title in header doesn't need to be that big (18px was old one's size)
• Button outline on embedded submission page (and all other buttons) has disappeared and has no hover state
• caret on previous answers on embedded submission page has disappeared
• Identity management page links need newlines between them and visible to others checkbox isn't actually a checkbox
• main events homepage needs more space between current and past events, as well as nipd moved to past
• h tags need margin on top and/or bottom (that's causing the above bullet point)
• p tags have extra unnecessary margin below them
• list items like on the file management pages need less space between them
• dc icon on puzzle submission page (when embedded) isn't aligned properly
• puzzle list needs a better link to the submission page/puzzle itself once it's solved than just the timestamp
• puzzle state map needs vertical lines between table cells
• base font size needs specified (and to be small). Look at pd2023, it's huge, and even the navbar suffers from font size issues.
• Most of the issues with the above bullet are due to variables set in scss files. If we're not using those, they need to be removed, and if we are, they need to be set properly. This affects more than just font size; page layout is also affected, for example changing display or margins.

Note that while these changes may fix past events, the priority is to make sure current/future ones look good. Unfortunately, interaction with css specifically written FOR past events seems to be conflicting, and so fully fixing them would require tweaking every css file for that old event, which is obviously less important given the breaking nature of this change.

[jbodner09]

Relevant info from old issues that still needs to be addressed:

• Site accessibility pass needs to happen to make sure that screen readers work as expected, Accessibility Insights and F12 tool don't flag any issues, etc.
• Design is still the same as before the bootstrap update and could still be prettier. Also, work to improve each event's landing page in Context-aware homepage #870 should be consistent with other work to make the rest of the site look better.
• Mobile usability pass also needs to happen. Current mobile bugs (player view only) include:
  • Hamburger button isn't right-aligned, it's just directly after the event name
  • Puzzle author should be on its own line, as should the answer submission bar, instead of being in the two-column layout like on desktop
  • Previous submissions dropdown is inexplicably long due to hard-coded minimum field lengths for Name, Response, etc.