fix(website): surface RL environments and adjust homepage navigation

website/README.md

@@ -363,7 +363,8 @@ and complete private Evidence records are not website assets.
 The homepage pairs a short introduction with the installation prompt and
 ordinary setup command. Get started is the primary action; a second link goes
 straight to the first interactive example. Short Showcases and Blog descriptions
-below those actions keep both reading paths available. The introduction and
+below those actions keep both reading paths available. An RL environments link
+in the same group leads to the recording and environment-building workflow. The introduction and
 setup retain the original equal-width desktop columns. Platform links go
 directly to the Windows, macOS and Linux steps in Get started; the optional
 curl installer is listed separately and links to its on-site instructions.
@@ -377,7 +378,9 @@ Three case-study previews lead to further investigations. The closing sections
 offer a guided first task and target-specific guides. FAQ, Discord and issue
 links each have their own line explaining their purpose.
 Every content page's header and footer link GitHub, Discord and X.
-A right-side table of contents stays visible at widths of 1440px and above.
+A right-side table of contents stays visible at widths of 1680px and above,
+with a 32px gap from the content. CSS owns this layout choice; the homepage
+script reads the displayed position when opening or closing the menu.
 On narrower screens it becomes a sticky, native disclosure; selecting a link
 closes the menu and focuses the destination. The homepage script follows
 the reading position and marks the current link. Without JavaScript, the

website/public/assets/home.js

@@ -62,7 +62,6 @@ function initializeHomeNavigation() {
   if (menu === null) return;
   const currentLabel = menu.querySelector("[data-home-nav-current]");
   if (currentLabel === null) return;
-  const wideScreen = window.matchMedia("(min-width: 1440px)");
   const entries = Array.from(menu.querySelectorAll('a[href^="#"]'))
     .map((link) => ({
       link,
@@ -71,8 +70,12 @@ function initializeHomeNavigation() {
     .filter((entry) => entry.target !== null);
   if (entries.length === 0) return;
 
+  // CSS decides when there is room for a sidebar.
+  let sidebarLayout = window.getComputedStyle(menu).position === "fixed";
+  menu.open = sidebarLayout;
+
   const updatePosition = () => {
-    const offset = wideScreen.matches ? 40 : 88;
+    const offset = sidebarLayout ? 40 : 88;
     let current = entries[0];
     entries.forEach((entry) => {
       if (entry.target.getBoundingClientRect().top <= offset) current = entry;
@@ -100,7 +103,12 @@ function initializeHomeNavigation() {
     currentLabel.textContent = current.link.textContent;
   };
   const updateLayout = () => {
-    menu.open = wideScreen.matches;
+    const nextSidebarLayout =
+      window.getComputedStyle(menu).position === "fixed";
+    if (nextSidebarLayout !== sidebarLayout) {
+      sidebarLayout = nextSidebarLayout;
+      menu.open = sidebarLayout;
+    }
     updatePosition();
   };
   let scheduled = false;
@@ -109,12 +117,12 @@ function initializeHomeNavigation() {
     scheduled = true;
     window.requestAnimationFrame(() => {
       scheduled = false;
-      updatePosition();
+      updateLayout();
     });
   };
   entries.forEach(({ link, target }) => {
     link.addEventListener("click", () => {
-      if (!wideScreen.matches) menu.open = false;
+      if (!sidebarLayout) menu.open = false;
       const heading = target.querySelector("h2") ?? target;
       heading.setAttribute("tabindex", "-1");
       window.requestAnimationFrame(() =>
@@ -122,7 +130,6 @@ function initializeHomeNavigation() {
       );
     });
   });
-  wideScreen.addEventListener("change", updateLayout);
   window.addEventListener("scroll", schedulePosition, { passive: true });
   window.addEventListener("resize", schedulePosition, { passive: true });
   window.addEventListener("hashchange", schedulePosition);

website/public/assets/styles.css

@@ -1808,12 +1808,12 @@ pre code {
   margin-top: 0.3rem;
   white-space: normal;
 }
-@media (min-width: 1440px) {
+@media (min-width: 1680px) {
   .home-page-nav {
     position: fixed;
     top: 7.5rem;
-    right: max(1.5rem, calc((100vw - 1080px) / 2 - 156px));
+    right: max(1.5rem, calc((100vw - 1080px) / 2 - 192px));
-    width: 132px;
+    width: 160px;
     max-height: calc(100svh - 9rem);
     overflow-y: auto;
     border: 0;

website/public/index.html

@@ -241,6 +241,10 @@
               <a class="text-link" href="#dinosaur">See an example ↓</a>
             </div>
             <div class="home-reading-links">
+              <p>
+                <a href="#rl-environments">Build RL environments →</a>: record a
+                web app for training and testing agents.
+              </p>
               <p>
                 <a href="showcase/">Showcases →</a> — investigations and
                 interactive demos.