Implement new layout + grid breakpoints

[joni-f-g]

This PR puts the utilities and new classes from #49 into practice, in addition to implementing the new layout/design of the site (DESSYS-146).

Layout

The core structure of the site lives in base.njk, which we've refactored to use grid utilities. Throughout, we've also applied breakpoints to the new classes to make the site responsive. We've taken a 'mobile-first' approach, leading to patterns that look like this:

<div class="col-span-full lg:col-span-9 {% if toc %} xl:col-span-6 {% endif %}">
  {% block content %}
    {% include 'main.njk' %}
  {% endblock %}
  {% include 'source-meta.njk' %}
</div>

The classes above say "Let the following content span the full length of columns by default; on large screens, only span 9 (of 12) columns; on extra-large screens where the table of contents is visible, span 6."

New site features

1. We've added a toggle-able dialog menu for small/medium viewports where, previously, documentation content would be competing for visible space with the navigation. This is leveraging github's [details-dialog-element](https://github.com/github/details-dialog-element) plugin.
2. To see a more literal illustration of the grid utilities in action, one can now press Control + G to toggle a grid overlay that mimic Figma's layout grid feature. This is leveraging a hotkey plugin.

[shawnbot]

@JacksonGonzales could you update the PR description with what you've done, please? I'm done with a first pass on the code and am reviewing the deployment now.

[shawnbot]

This looks great to me. Nice work! 💪

[shawnbot]

Sorry for thrashing on the merge... I just wanted to resolve that conflict but I messed it up the first time around 🤦