---
layout: skeleton
---

{% from 'nav.njk' import nav_link with context %}
{% set nav %}
  {{ nav_link('/', false) }}
  {{ nav_link('/foundations') }}
  {{ nav_link('/components') }}
  {{ nav_link('/usage') }}
{% endset %}

{% set toc = content | toc %}

<div class="bg-grey-1">
  <div class="responsive-container flex flex-wrap justify-between py-8">
    <details class="details-reset">
      <summary
        data-hotkey="Control+g"
        aria-label="press Control+g to enable the grid overlay"
        class="text-slate-light font-mono"
      >Press <kbd>Control</kbd> + <kbd>G</kbd> to toggle grid overlay</summary>
      <div class="z-50 pointer-events-none responsive-container fixed h-full top-0 left-0 right-0 opacity-10">
        <div class="responsive-grid grid md:hidden h-full">
          {% for i in range(0, 6) %}
            <div class="bg-red-grid"></div>
          {% endfor %}
        </div>
        <div class="responsive-grid hidden md:grid h-full">
          {% for i in range(0, 12) %}
            <div class="bg-red-grid"></div>
          {% endfor %}
        </div>
      </div>
    </details>
    <div>
      {% include 'repo-links.njk' %}
    </div>
  </div>
</div>

<div class="responsive-container flex lg:hidden mt-60 mb-28 items-center">
  <details class="details-reset">
    <summary role="navigation" aria-label="open navigation menu">
      <sfgov-icon class="pr-20" symbol="menu" role="img" aria-label="hamburger menu"></sfgov-icon>
    </summary>
    <details-dialog class="top-0 left-0 w-full h-full fixed p-20 bg-grey-1 z-50 max-w-sm">
      <sfgov-icon class="py-20 block mt-96 ml-8" symbol="close" role="img" aria-label="x" data-close-dialog></sfgov-icon>
      {{ nav | safe }}
    </details-dialog>
  </details>

  <header>
    {% include 'header.njk' %}
  </header>
</div>

{% block main %}
  <div class="responsive-grid responsive-container grid-rows-2">
    <div class="hidden lg:block lg:row-span-full lg:col-span-3">
      {% include 'header.njk' %}
      {{ nav | safe }}
    </div>
    <div class="col-span-full lg:col-span-9 lg:mt-48">
      {% include 'title.njk' %}
    </div>
    <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>
    {% if toc %}
      <div class="hidden xl:block xl:col-span-3">
        {% include 'toc.njk' %}
      </div>
    {% endif %}
  </div>
{% endblock %}

{% include 'footer.njk' %}