Implement new layout + grid breakpoints

docs/_includes/base.njk

@@ -1,37 +1,80 @@
 ---
 layout: skeleton
 ---
-{% include 'header.njk' %}
+
+{% 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 %}
 
-{% block main %}
-  <div class="px-20 max-w-xl mx-auto mt-40 mb-100">
-    <div class="lg:flex justify-end">
-      <div class="lg:w-1/4 lg:mr-60 mb-40">
-        {% block nav %}
-          {% include 'nav.njk' %}
-        {% endblock %}
-      </div>
-      <div class="lg:w-3/4">
-        {% block content %}
-          {% include 'title.njk' %}
-          {% if toc %}
-            <div class="flex justify-start flex-row-reverse">
-              <div class="none lg:block lg:w-1/4 mb-40 ml-40">
-                {% include 'toc.njk' %}
-              </div>
-              <div class="lg:w-3/4">
-                {% include 'main.njk' %}
-              </div>
-            </div>
-          {% else %}
-            {% include 'main.njk' %}
-          {% endif %}
-        {% endblock %}
-        {% include 'source-meta.njk' %}
+<div class="bg-grey-1">
+  <div class="responsive-container flex justify-between py-8">
+    <details>
+      <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>
+    <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 %}
 

docs/_includes/footer.njk

@@ -1,4 +1,4 @@
-<footer class="py-60 bg-black text-white">
+<footer class="col-span-6 md:col-span-12 mt-80 py-60 bg-black text-white">
   <div class="max-w-xl mx-auto">
     <div class="flex items-start">
       <div class="w-1/2 flex items-center">

docs/_includes/header.njk

@@ -1,33 +1,11 @@
-<header>
-  <div class="px-20 max-w-xl mx-auto py-20 lg:py-48">
-    <div class="flex items-center justify-between">
-      <a class="flex items-center no-underline" href="/">
-        <img
-          alt="City &amp; County of San Francisco"
-          class="block"
-          height="60"
-          src="https://sf.gov/themes/custom/sfgovpl/logo.svg">
-        <div class="pl-16">
-          <div class="title-sm text-slate mt-2">{{ site.title }}</div>
-        </div>
-      </a>
-      <div class="flex items-center">
-        <div>
-          <a
-            href="{{ '/' | published_url(package.version) }}"
-            class="text-slate-light font-mono no-underline"
-          >{{ package.name }}@{{ package.version }}</a>
-
-          <a
-            class="text-slate-light font-medium no-underline ml-24"
-            href="{{ '' | repo_url }}"
-          >
-            <svg style="fill: currentColor;" class="align-middle inline-block mr-2 mb-4" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
-            GitHub
-          </a>
-        </div>
-        {# % include 'search.njk' % #}
-      </div>
+<div class="max-w-xl mx-auto py-20 lg:py-48">
+  <a class="flex items-center no-underline" href="/">
+    <img
+      alt="City &amp; County of San Francisco"
+      class="block h-48 w-48"
+      src="https://sf.gov/themes/custom/sfgovpl/logo.svg">
+    <div class="pl-16">
+      <div class="title-xs text-slate mt-2">{{ site.title }}</div>
     </div>
-  </div>
-</header>
+  </a>
+</div>

docs/_includes/nav.njk

@@ -12,7 +12,7 @@
       <div class="flex-auto">{{ node.data.title }}</div>
       <div>
         {% if deep and children.length %}
-          <sfgov-icon symbol="chevron-down"></sfgov-icon>
+          <sfgov-icon symbol="chevron-down" role="img" aria-label="arrow pointing down"></sfgov-icon>
         {% endif %}
       </div>
     </a>
@@ -26,13 +26,13 @@
         <ul class="m-0 p-0 list-none">
           {% for child in children %}
             {% set child_active = child.url === page.url %}
-            <li class="pl-16 m-0 mb-20">
+            <li class="pl-16 m-0 mb-20 {{ 'bg-slate-2 rounded-4' if child_active }}">
               <a
                 href="{{ child.url }}"
                 {% if child_active %}
                   aria-current="page"
                 {% endif %}
-                class="block text-slate no-underline {{ 'font-medium' if child_active }}"
+                class="block no-underline {{ 'text-white' if child_active else 'text-slate-4' }}"
               >
                 {{ child.data.title }}
               </a>
@@ -43,9 +43,3 @@
     {% endif %}
   </div>
 {% endmacro %}
-
-{{ nav_link('/', false) }}
-{{ nav_link('/foundations') }}
-{{ nav_link('/components') }}
-{{ nav_link('/resources') }}
-{{ nav_link('/usage') }}

docs/_includes/repo-links.njk

@@ -0,0 +1,16 @@
+<div class="inline-flex flex-wrap">
+    <a
+      href="{{ '/' | published_url(package.version) }}"
+      class="text-slate-light font-mono no-underline"
+    >{{ package.name }}@{{ package.version }}</a>
+</div>
+
+<div class="inline-flex flex-wrap">
+    <a
+      class="text-slate-light font-medium no-underline ml-24"
+      href="{{ '' | repo_url }}"
+    >
+      <svg style="fill: currentColor;" class="align-middle inline-block mr-2 mb-4" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+      GitHub
+    </a>
+</div>