Fix mobile menus and replace glyph icons with SVG

Author: blacktm

AGENTS.md

@@ -22,6 +22,7 @@ The learn articles are a friendly guide, not a reference manual. Match the voice
 - Section headings are `#` (H1), subsections `##`. Unusual, but consistent across the directory.
 - Show code early and keep examples focused on one idea at a time.
 - Tables are fine — and the one place terse language is welcome — for attribute and parameter reference.
-- End with `Continue to the [next topic ▸](/learn/{{ page.next_topic }})` when `next_topic` is set.
+- Symbols like `▸`, `▶`, and `✕` aren't in the body font, so the OS substitutes one and iOS renders some as color emoji. Draw arrows and icons in CSS or inline SVG instead of typing the character.
+- End with `Continue to the [next topic](/learn/{{ page.next_topic }}){:.next-topic}` when `next_topic` is set.
 
 When in doubt, read a neighboring article and trust your ear. If it sounds like a person talking, you're there.

_css/app.css

@@ -362,6 +362,34 @@ video.sprite-video {
   transform: scaleX(1);
 }
 
+/* The mobile menu overlays the page rather than pushing it down, so it gets a
+   shadow to sit above the content instead of reading as part of it. */
+#mobile-menu {
+  box-shadow: 0 12px 30px rgba(0,0,0,.10);
+}
+
+/* Mobile nav links: a stacked list, so the current page is marked the way the
+   learn sidebar does it rather than with the desktop underline. */
+.mobile-nav-link {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.75rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: color 0.2s, background-color 0.2s;
+}
+.mobile-nav-link:hover {
+  color: var(--ruby-red);
+  background: var(--ruby-glow);
+}
+.mobile-nav-link.current {
+  color: var(--ruby-red);
+  background: var(--ruby-glow);
+  font-weight: 700;
+}
+
 /* --- Sidebar (learn pages) ----------------------------------------------- */
 .sidebar-link {
   display: block;
@@ -391,6 +419,27 @@ video.sprite-video {
   -webkit-user-select: none;
   user-select: none;
 }
+/* The "next topic" arrow at the foot of each learn page. Drawn with borders for
+   the same reason as the Contents caret below: Outfit carries no Geometric
+   Shapes glyphs, so a typed ▸ falls back to whatever font the OS picks. */
+.next-topic::after {
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 0.35em;
+  margin-bottom: 0.08em;
+  border-top: 0.28em solid transparent;
+  border-bottom: 0.28em solid transparent;
+  border-left: 0.32em solid currentColor;
+}
+
+/* It's reachable by keyboard now, so focus has to be visible when it lands. */
+/* Inset, because the button now runs to the card's edge and an outset ring
+   would draw outside it. The outline follows the button's own border-radius. */
+#learn-contents-menu:focus-visible {
+  outline: 2px solid var(--ruby-red);
+  outline-offset: -3px;
+}
 #learn-contents-menu-links {
   display: block;
 }
@@ -732,6 +781,9 @@ video.sprite-video {
   margin-top: 1.25rem;
 }
 .try-step-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
   padding: 0.4rem 1.1rem;
   border-radius: 9999px;
   font-size: 0.875rem;
@@ -863,8 +915,35 @@ video.sprite-video {
     padding: 0.75rem;
     background: var(--surface-card);
   }
+  /* The whole top strip of the card toggles the menu, not just the word itself.
+     The negative margin bleeds the button out over the card's padding and the
+     matching padding puts the label back exactly where it sat, so the target
+     grows from the height of the text to a comfortable ~42px without anything
+     moving. */
+  .learn-sidebar #learn-contents-menu {
+    display: block;
+    width: calc(100% + 1.5rem);
+    margin: -0.75rem;
+    padding: 0.75rem 1rem;
+    border-radius: 0.85rem;
+  }
+
+  /* Drawn with borders rather than set as ▾/▴: Outfit has no Geometric Shapes
+     glyphs, so those fall back per-character and the two arrows end up coming
+     from different fonts at different weights. One shape rotated can't mismatch. */
   .learn-sidebar #learn-contents-menu::after {
-    content: ' \25BE';
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 0.4em;
+    margin-bottom: 0.1em;
+    border-left: 0.3em solid transparent;
+    border-right: 0.3em solid transparent;
+    border-top: 0.35em solid currentColor;
+    transition: transform 0.2s cubic-bezier(.4,.2,.2,1);
+  }
+  .learn-sidebar #learn-contents-menu[aria-expanded="true"]::after {
+    transform: rotate(180deg);
   }
   #learn-contents-menu-links {
     display: none;

_layouts/learn.html

@@ -27,7 +27,9 @@ <h2 class="text-xs font-bold uppercase tracking-widest text-[var(--text-muted)]
 
   <!-- Mobile sidebar -->
   <div class="md:hidden learn-sidebar mb-6">
-    <h2 id="learn-contents-menu" class="text-sm font-bold text-[var(--text-secondary)] mt-0 mb-0 px-1">Contents</h2>
+    <h2 class="text-sm font-bold text-[var(--text-secondary)] mt-0 mb-0">
+      <button id="learn-contents-menu" type="button" class="text-left" aria-controls="learn-contents-menu-links" aria-expanded="false">Contents</button>
+    </h2>
     <div id="learn-contents-menu-links" class="flex flex-col gap-0.5 mt-2">
       <a class="sidebar-link {% if page.id == '/learn/get-started' %}current{% endif %}" href="/learn/get-started">Get started</a>
       <a class="sidebar-link {% if page.id == '/learn/window' %}current{% endif %}" href="/learn/window">Window</a>
@@ -70,11 +72,21 @@ <h1 class="title text-3xl sm:text-4xl font-bold mt-0 mb-2 border-none pb-0">{{ p
 var contentsMenu = document.getElementById('learn-contents-menu');
 var contentsLinks = document.getElementById('learn-contents-menu-links');
 if (contentsMenu && contentsLinks) {
-  contentsMenu.onclick = function() {
-    contentsLinks.classList.toggle('is-expanded');
+  // aria-expanded is the single source of truth for the open state: the caret
+  // in the header is drawn off it, so there's no second flag to keep in sync.
+  var setContents = function(open) {
+    contentsLinks.classList.toggle('is-expanded', open);
+    contentsMenu.setAttribute('aria-expanded', open ? 'true' : 'false');
   };
+  // A real <button>, so Enter and Space come for free.
+  contentsMenu.addEventListener('click', function() {
+    setContents(!contentsLinks.classList.contains('is-expanded'));
+  });
+  // Only collapse when we've grown to the desktop sidebar. Mobile browsers fire
+  // `resize` while scrolling (the URL bar hides and shows), and that shouldn't
+  // close a menu the reader is in the middle of scrolling through.
   window.addEventListener('resize', function() {
-    contentsLinks.classList.remove('is-expanded');
+    if (window.innerWidth >= 768) setContents(false);
   });
 }
 </script>

_layouts/main.html

@@ -32,6 +32,14 @@
   </head>
 
   <body class="min-h-screen relative">
+    <!-- Which nav section we're in, worked out once so the desktop and mobile
+         menus can't drift apart -->
+    {% if page.url == '/try' or page.url == '/try/' %}{% assign nav_section = 'try' %}
+    {% elsif page.url contains '/examples' %}{% assign nav_section = 'examples' %}
+    {% elsif page.url contains '/learn/' %}{% assign nav_section = 'learn' %}
+    {% elsif page.url == '/community/' %}{% assign nav_section = 'community' %}
+    {% endif %}
+
     <!-- Navigation -->
     <nav class="sticky top-0 z-50 border-b-2 border-[var(--surface-border)] bg-[var(--surface-bg)]/90 backdrop-blur-xl">
       <div class="max-w-6xl mx-auto px-4 sm:px-6 flex items-center justify-between h-16">
@@ -47,31 +55,31 @@
 
         <!-- Desktop links -->
         <div class="hidden sm:flex items-center gap-8">
-          <a href="/try" class="nav-link {% if page.url == '/try/' %}active{% endif %}">Try</a>
-          <a href="/examples" class="nav-link {% if page.url contains '/examples' %}active{% endif %}">Examples</a>
-          <a href="/learn/get-started" class="nav-link {% if page.url contains '/learn/' %}active{% endif %}">Learn</a>
-          <a href="/community" class="nav-link {% if page.url == '/community/' %}active{% endif %}">Community</a>
+          <a href="/try" class="nav-link {% if nav_section == 'try' %}active{% endif %}" {% if nav_section == 'try' %}aria-current="page"{% endif %}>Try</a>
+          <a href="/examples" class="nav-link {% if nav_section == 'examples' %}active{% endif %}" {% if nav_section == 'examples' %}aria-current="page"{% endif %}>Examples</a>
+          <a href="/learn/get-started" class="nav-link {% if nav_section == 'learn' %}active{% endif %}" {% if nav_section == 'learn' %}aria-current="page"{% endif %}>Learn</a>
+          <a href="/community" class="nav-link {% if nav_section == 'community' %}active{% endif %}" {% if nav_section == 'community' %}aria-current="page"{% endif %}>Community</a>
           <a href="https://github.com/ruby2d/ruby2d" class="text-[var(--text-muted)] hover:text-[var(--ruby-red)] transition-colors" aria-label="GitHub">
             <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
           </a>
         </div>
 
         <!-- Mobile hamburger -->
-        <button id="mobile-menu-btn" class="sm:hidden text-[var(--text-secondary)] hover:text-[var(--ruby-red)] p-1 transition-colors cursor-pointer" aria-label="Menu">
+        <button id="mobile-menu-btn" class="sm:hidden text-[var(--text-secondary)] hover:text-[var(--ruby-red)] p-1 transition-colors cursor-pointer" aria-label="Menu" aria-controls="mobile-menu" aria-expanded="false">
           <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
           </svg>
         </button>
       </div>
 
       <!-- Mobile menu -->
-      <div id="mobile-menu" class="sm:hidden hidden border-t-2 border-[var(--surface-border)] bg-[var(--surface-card)]">
+      <div id="mobile-menu" class="sm:hidden hidden absolute top-full inset-x-0 border-t-2 border-[var(--surface-border)] bg-[var(--surface-card)]">
         <div class="px-4 py-3 flex flex-col gap-1">
-          <a href="/try" class="block px-3 py-2 rounded-xl text-[var(--text-secondary)] hover:text-[var(--ruby-red)] hover:bg-[var(--ruby-glow)] font-semibold text-sm transition-colors">Try</a>
-          <a href="/examples" class="block px-3 py-2 rounded-xl text-[var(--text-secondary)] hover:text-[var(--ruby-red)] hover:bg-[var(--ruby-glow)] font-semibold text-sm transition-colors">Examples</a>
-          <a href="/learn/get-started" class="block px-3 py-2 rounded-xl text-[var(--text-secondary)] hover:text-[var(--ruby-red)] hover:bg-[var(--ruby-glow)] font-semibold text-sm transition-colors">Learn</a>
-          <a href="/community" class="block px-3 py-2 rounded-xl text-[var(--text-secondary)] hover:text-[var(--ruby-red)] hover:bg-[var(--ruby-glow)] font-semibold text-sm transition-colors">Community</a>
-          <a href="https://github.com/ruby2d/ruby2d" class="block px-3 py-2 rounded-xl text-[var(--text-secondary)] hover:text-[var(--ruby-red)] hover:bg-[var(--ruby-glow)] font-semibold text-sm transition-colors">GitHub</a>
+          <a href="/try" class="mobile-nav-link {% if nav_section == 'try' %}current{% endif %}" {% if nav_section == 'try' %}aria-current="page"{% endif %}>Try</a>
+          <a href="/examples" class="mobile-nav-link {% if nav_section == 'examples' %}current{% endif %}" {% if nav_section == 'examples' %}aria-current="page"{% endif %}>Examples</a>
+          <a href="/learn/get-started" class="mobile-nav-link {% if nav_section == 'learn' %}current{% endif %}" {% if nav_section == 'learn' %}aria-current="page"{% endif %}>Learn</a>
+          <a href="/community" class="mobile-nav-link {% if nav_section == 'community' %}current{% endif %}" {% if nav_section == 'community' %}aria-current="page"{% endif %}>Community</a>
+          <a href="https://github.com/ruby2d/ruby2d" class="mobile-nav-link">GitHub</a>
         </div>
       </div>
     </nav>
@@ -109,11 +117,36 @@
       var menuBtn = document.getElementById('mobile-menu-btn');
       var mobileMenu = document.getElementById('mobile-menu');
       if (menuBtn && mobileMenu) {
+        var isOpen = function() { return !mobileMenu.classList.contains('hidden'); };
+        var setMenu = function(open) {
+          mobileMenu.classList.toggle('hidden', !open);
+          menuBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
+        };
+
         menuBtn.addEventListener('click', function() {
-          mobileMenu.classList.toggle('hidden');
+          setMenu(!isOpen());
+        });
+
+        // The menu floats over the page, so it needs a way out that isn't the
+        // hamburger itself: tap anywhere else, or press Escape.
+        document.addEventListener('click', function(e) {
+          if (!isOpen()) return;
+          if (menuBtn.contains(e.target) || mobileMenu.contains(e.target)) return;
+          setMenu(false);
         });
+
+        // Capture phase, because the Try page's wasm runtime binds its own
+        // keydown handler to `window` and consumes plain keys like Escape.
+        document.addEventListener('keydown', function(e) {
+          if (e.key !== 'Escape' || !isOpen()) return;
+          setMenu(false);
+          menuBtn.focus();
+        }, true);
+
+        // Only on a real width change — mobile browsers fire `resize` while
+        // scrolling, as the URL bar hides and shows.
         window.addEventListener('resize', function() {
-          if (window.innerWidth >= 640) mobileMenu.classList.add('hidden');
+          if (window.innerWidth >= 640) setMenu(false);
         });
       }
     </script>

_pages/examples.html

@@ -50,7 +50,7 @@ <h2 class="font-fredoka font-semibold text-2xl text-[var(--text-primary)] mb-1">
   <!-- Player -->
   <div id="playerView" class="hidden example-player max-w-[840px] mx-auto">
 
-    <a href="#" id="backLink" class="inline-flex items-center gap-1.5 font-semibold text-sm text-[var(--text-muted)] hover:text-[var(--ruby-red)] transition-colors no-underline">◂ All examples</a>
+    <a href="#" id="backLink" class="inline-flex items-center gap-1.5 font-semibold text-sm text-[var(--text-muted)] hover:text-[var(--ruby-red)] transition-colors no-underline"><svg class="w-3 h-3 shrink-0" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.5 2.5L4 6l3.5 3.5"/></svg>All examples</a>
 
     <div class="flex items-center gap-4 mt-5 mb-6">
       <span id="playerIcon" class="example-icon"></span>
@@ -84,8 +84,8 @@ <h1 id="playerTitle" class="text-2xl sm:text-3xl font-bold text-[var(--text-prim
         disabled
         onclick="runCode()"
         title="Run (⌘Enter / Ctrl+Enter)"
-        class="px-5 py-2 rounded-full font-semibold text-sm text-white bg-[var(--ruby-red)] shadow-[0_2px_8px_rgba(255,71,87,0.35)] hover:opacity-90 hover:-translate-y-0.5 active:translate-y-0 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:translate-y-0"
-      >Run &ensp;▶</button>
+        class="inline-flex items-center gap-2 px-5 py-2 rounded-full font-semibold text-sm text-white bg-[var(--ruby-red)] shadow-[0_2px_8px_rgba(255,71,87,0.35)] hover:opacity-90 hover:-translate-y-0.5 active:translate-y-0 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:translate-y-0"
+      >Run<svg class="w-2.5 h-2.5 shrink-0" viewBox="0 0 12 12" fill="currentColor" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" aria-hidden="true"><path d="M3.2 2.4L9.4 6L3.2 9.6Z"/></svg></button>
       <button
         id="consoleBtn"
         onclick="toggleConsole()"

_pages/learn/2d-basics.md

@@ -168,4 +168,4 @@ end
 show
 ```
 
-Continue to the [next topic ▸](/learn/{{ page.next_topic }})
+Continue to the [next topic](/learn/{{ page.next_topic }}){:.next-topic}

_pages/learn/audio.md

@@ -59,4 +59,4 @@ on :key_down do
 end
 ```
 
-Continue to the [next topic ▸](/learn/{{ page.next_topic }})
+Continue to the [next topic](/learn/{{ page.next_topic }}){:.next-topic}

_pages/learn/building.md

@@ -107,7 +107,7 @@ On the web, the render loop is driven by the browser's `requestAnimationFrame`,
 A couple of browser specifics worth knowing:
 
 - **Chrome** and **Firefox** run at the full refresh rate by default.
-- **Safari** caps `requestAnimationFrame` at 60Hz unless you turn off the **"Prefer Page Rendering Updates near 60fps"** flag (Safari ▸ Develop ▸ Feature Flags). With it off, Safari matches the display refresh rate too.
+- **Safari** caps `requestAnimationFrame` at 60Hz unless you turn off the **"Prefer Page Rendering Updates near 60fps"** flag (Safari › Develop › Feature Flags). With it off, Safari matches the display refresh rate too.
 
 # Setting up other platforms
 

_pages/learn/buttons.md

@@ -142,4 +142,4 @@ btn.remove          # remove from the window
 btn.add             # add back to the window
 ```
 
-Continue to the [next topic ▸](/learn/{{ page.next_topic }})
+Continue to the [next topic](/learn/{{ page.next_topic }}){:.next-topic}

_pages/learn/canvas.md

@@ -253,4 +253,4 @@ end
 
 Any of `x:`, `y:`, `width:`, `height:`, `rotate:`, `tint:`, and `opacity:` can be passed as a per-frame override.
 
-Continue to the [next topic ▸](/learn/{{ page.next_topic }})
+Continue to the [next topic](/learn/{{ page.next_topic }}){:.next-topic}