docs polish + new icons (and mobile nav fix)

Author: 1cg

www/commands/add.md

@@ -24,7 +24,7 @@ The `when` clause lets you filter which elements in the target actually get the
   _="on change add { --accent-color: my.value } to document.body"
 />
 
-<button _="on click add [@disabled='true'] to <button/> when it is not me">Disable Other Buttons</button>
+<button _="on click add @disabled='true' to <button/> when it is not me">Disable Other Buttons</button>
 
 <button _="on click add .{'-foo-bar'} to #that">Add Class With A Dash Prefix!</button>
 
@@ -39,6 +39,13 @@ add item to myArray                      -- array.push(item)
 add item to mySet                        -- set.add(item)
 ```
 
+### See also
+
+- [`remove`](/commands/remove) -- the inverse operation
+- [`take`](/commands/take) -- move a class or attribute from one element to another
+- [`toggle`](/commands/toggle) -- flip a class or attribute on and off
+- [`show`](/commands/show) / [`hide`](/commands/hide) -- also support the `when` clause for per-element filtering
+
 ### Syntax
 
 ```ebnf

www/commands/fetch.md

@@ -155,7 +155,7 @@ To cancel a fetch request, send a `fetch:abort` event to the element that trigge
 If you need to fetch from a dynamically-generated URL, use a [template literal string](/expressions/string/) as the URL:
 
 ```hyperscript
-set userId to my [@data-userId]
+set userId to my @data-userId
 fetch `/users/${userId}/profile` as JSON  -- parsed into an object
 ```
 

www/commands/hide.md

@@ -106,6 +106,12 @@ More information here: [Safelisting specific utilities - Tailwind CSS v4.0](http
 <div _="on click hide with twOpacity">Hide Me With Opacity!</div>
 ```
 
+### See also
+
+- [`show`](/commands/show) -- the inverse operation
+- [`toggle`](/commands/toggle) -- flip between shown and hidden
+- [`add`](/commands/add) / [`remove`](/commands/remove) -- also support the `when` clause for per-element filtering
+
 ### Syntax
 
 ```ebnf

www/commands/put.md

@@ -6,7 +6,7 @@ title: put - ///_hyperscript
 
 The `put` command inserts content into a variable, property, or the DOM. It reads naturally for placement operations like "put X into Y" or "put X after Y".
 
-Content added to the DOM via `put` will have any hyperscript within it automatically initialized -- no need to call `processNode()`.
+Content added to the DOM via `put` will have any hyperscript within it automatically initialized -- no need to call `_hyperscript.process()`.
 
 ### Examples
 

www/commands/remove.md

@@ -69,6 +69,13 @@ the property. This keeps the common case `remove firstChild of me`
 doing what you'd expect.
 {% endnote %}
 
+### See also
+
+- [`add`](/commands/add) -- the inverse operation
+- [`take`](/commands/take) -- move a class or attribute from one element to another
+- [`toggle`](/commands/toggle) -- flip a class or attribute on and off
+- [`show`](/commands/show) / [`hide`](/commands/hide) -- also support the `when` clause for per-element filtering
+
 ### Syntax
 
 ```ebnf

www/commands/show.md

@@ -75,6 +75,12 @@ If you're using Tailwind CSS, you can use their utility classes instead. Set `_h
 </div>
 ```
 
+### See also
+
+- [`hide`](/commands/hide) -- the inverse operation
+- [`toggle`](/commands/toggle) -- flip between shown and hidden
+- [`add`](/commands/add) / [`remove`](/commands/remove) -- also support the `when` clause for per-element filtering
+
 ### Syntax
 
 ```ebnf

www/commands/take.md

@@ -19,7 +19,7 @@ take <class-ref+ | attribute-ref> [with <value>] [from <source> [giving <value>]
 | Clause                | What it does | Default if omitted |
 |-----------------------|--------------|--------------------|
 | `<class-ref>`         | One or more `.classNames` to move | - required form A |
-| `<attribute-ref>`     | An `@attr` or `[@attr='value']` to move | - required form B |
+| `<attribute-ref>`     | An `@attr` or `@attr='value'` to move | - required form B |
 | `with <value>`        | A *replacement* given to the `from` elements instead of having the class/attribute removed. For the attribute form `<value>` is any expression; for the class form it is a single class reference. | class is removed / attribute is removed |
 | `from <expression>`   | Source element(s) to take from | for classes: any element on the page that has the class; for attributes: must be specified |
 | `giving <value>`      | Same meaning as `with`, but written *after* the `from` clause where it usually reads more naturally. Cannot be combined with `with`. | - |

www/commands/toggle.md

@@ -4,7 +4,7 @@ title: toggle - ///_hyperscript
 
 ## The `toggle` Command
 
-The `toggle` command flips classes, attributes, or visibility on and off -- the simplest way to create interactive UI.
+The `toggle` command flips classes, attributes, or visibility on and off.
 
 You can toggle:
 
@@ -36,7 +36,7 @@ Toggle a class on another element:
 Toggle an attribute:
 
 ```html
-<button _="on click toggle [@disabled='true']">Toggle Disabled!</button>
+<button _="on click toggle @disabled='true'">Toggle Disabled!</button>
 ```
 
 Toggle with a timeout - reverts after the duration:

www/css/os9.css

@@ -120,13 +120,16 @@ body {
     position: sticky;
     top: 0;
     z-index: 100;
+    height: 44px;
+    box-sizing: border-box;
 }
 
 .navbar nav {
     max-width: 94ch;
     margin: 0 auto;
     display: flex;
     align-items: center;
+    height: 100%;
 }
 
 .nav-links {
@@ -147,7 +150,7 @@ body {
     color: var(--text);
     font-family: var(--font-heading);
     font-size: 0.95rem;
-    padding: 8px 14px;
+    padding: 10px 14px;
 }
 
 .navbar a:hover {
@@ -159,7 +162,7 @@ body {
 
 /* Logo */
 .nav-logo-img {
-    height: 44px;
+    height: 28px;
     width: auto;
     image-rendering: pixelated;
     vertical-align: middle;
@@ -275,8 +278,8 @@ body {
     flex-direction: column;
     justify-content: center;
     gap: 4px;
-    width: 32px;
-    height: 32px;
+    width: 36px;
+    height: 36px;
     padding: 4px;
     background: none;
     border: none;
@@ -304,16 +307,23 @@ body {
         left: -1rem;
         right: -1rem;
         background: var(--bg);
-        border-bottom: 1px solid var(--border);
         box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-        padding: 8px 0;
+        padding: 0;
         z-index: 98;
         gap: 0;
         max-height: 0;
         overflow: hidden;
-        transition: max-height 0.2s ease-out;
+        box-sizing: border-box;
+        pointer-events: none;
+        border-bottom: 0 solid var(--border);
+        transition: max-height 0.2s ease-out, border-bottom-width 0s linear 0.2s;
+    }
+    .nav-open .nav-links {
+        max-height: 500px;
+        pointer-events: auto;
+        border-bottom-width: 1px;
+        transition: max-height 0.2s ease-out, border-bottom-width 0s linear;
     }
-    .nav-open .nav-links { max-height: 500px; }
     .nav-links li { width: 100%; text-align: center; }
     .nav-links a {
         display: block;

www/css/site.css

@@ -38,6 +38,12 @@
     line-height: 1;
     margin-bottom: 0.5rem;
 }
+img.docs-card-icon {
+    width: 64px;
+    height: 64px;
+    object-fit: contain;
+    image-rendering: pixelated;
+}
 .docs-card strong {
     font-family: var(--font-heading);
     font-size: 1.05rem;