docs: sticky toc

.eleventy.cjs

@@ -29,11 +29,17 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addShortcode('cem', async function() {
     const { customElementsManifestToMarkdown } = await import('@custom-elements-manifest/to-markdown');
     const customElementsManifest = JSON.parse(await fs.readFile(path.join(__dirname, 'custom-elements.json')))
-    return customElementsManifestToMarkdown(customElementsManifest, {
+    const content = customElementsManifestToMarkdown(customElementsManifest, {
       headingOffset: 2,
       private: 'details',
     });
-  })
+
+    return `<div class="api-table">
+
+${content}
+
+</div>`;
+  });
 
   eleventyConfig.on('eleventy.before', async function () {
     const { execaCommand } = await import('execa');

docs/styles.css

@@ -1,40 +1,48 @@
 @import "./theme.css";
 
 body {
-  display: block;
-}
-
-aside {
-  order: 0;
+  display: grid;
+  gap: 20px;
+  grid-template-areas: "header" "toc" "main";
+  grid-template-rows: auto auto 1fr;
+  grid-template-columns: 100%;
 }
 
 header {
-  grid-column: 1/-1;
+  grid-area: header;
 }
 
-@media (min-width: 1260px) {
-  aside { order: 1; }
-
-  body {
-    display: grid;
-    gap: 20px;
-    grid-template: 1fr / minmax(900px, 1000px) minmax(300px, 600px);
-    place-content: center;
-  }
-
-  aside > nav.toc {
-    position: fixed;
-  }
+aside {
+  grid-area: toc;
 }
 
 main {
+  grid-area: main;
   display: block;
-  margin: 0 auto;
-  max-width: 1000px;
 }
 
 iframe {
   width: 100%;
   height: 100px;
   border: none;
 }
+
+.api-table {
+  max-width: 100%;
+  overflow-x: scroll;
+}
+
+@media (min-width: 1200px) {
+  body {
+    grid-template-areas: "header toc" "main toc";
+    grid-template-rows: 1fr auto;
+    grid-template-columns: minmax(300px, 1000px) minmax(200px, 400px);
+    place-content: center;
+  }
+
+  aside > nav.toc {
+    position: sticky;
+    height: max-content;
+    top: 20px;
+  }
+}