UI tweaks

Author: 1cg

docs/_data/nav.yml

@@ -1,24 +1,32 @@
 - url: /
   label: Home
   ico: "🏠"
+  desc: Project overview & installation
 - url: /docs.html
   label: Guide
   ico: "📖"
+  desc: A tour through the libraries
 - url: /fixi.html
   label: fixi
   ico: "🚲"
+  desc: Supercharged HTML
 - url: /moxi.html
   label: moxi
   ico: "🥊"
+  desc: Inline scripting & reactivity
 - url: /paxi.html
   label: paxi
   ico: "♻️"
+  desc: DOM morphing / patching
 - url: /ssexi.html
   label: ssexi
   ico: "📡"
+  desc: Streaming HTML & events
 - url: /rexi.html
   label: rexi
   ico: "🐕"
+  desc: Ergonomic fetch wrappers
 - url: /demo.html
   label: Demo
   ico: "📼"
+  desc: How to see working examples

docs/_layouts/default.html

@@ -25,14 +25,14 @@
 <details class="mobilenav">
     <summary>Menu</summary>
     <nav>
-        {% for item in site.data.nav %}<a href="{{ item.url | relative_url }}"{% if u == item.url %} class="active"{% endif %}>{% if item.ico %}<span class="ico">{{ item.ico }}</span> {% endif %}{{ item.label }}</a>{% endfor %}
+        {% for item in site.data.nav %}<a href="{{ item.url | relative_url }}"{% if u == item.url %} class="active"{% endif %}>{% if item.ico %}<span class="ico">{{ item.ico }}</span>{% endif %}<span class="lbl">{{ item.label }}</span>{% if item.desc %}<span class="desc">{{ item.desc }}</span>{% endif %}</a>{% endfor %}
     </nav>
 </details>
 
 <main>
     <h1>{{ page.heading | default: page.title | default: "The Fixi Project" }}</h1>
     <nav class="topnav">
-        {% for item in site.data.nav %}<a href="{{ item.url | relative_url }}"{% if u == item.url %} class="active"{% endif %}>{% if item.ico %}<span class="ico">{{ item.ico }}</span>{% endif %}{{ item.label }}</a>{% endfor %}
+        {% for item in site.data.nav %}<a href="{{ item.url | relative_url }}"{% if u == item.url %} class="active"{% endif %}>{% if item.ico %}<span class="ico">{{ item.ico }}</span>{% endif %}<span class="lbl">{{ item.label }}</span></a>{% endfor %}
     </nav>
 {{ content }}
     <nav class="pagination">

docs/fixi.md

@@ -12,6 +12,23 @@ in response to any event, and place the response HTML anywhere in the document.
 
 Like htmx, fixi uses attributes to add behaviors to HTML elements.
 
+### A Simple Demo
+
+Here is a fixi-powered button that loads a fragment into a panel:
+
+```html
+<button fx-action="/profile" 
+        fx-target="#panel" 
+        fx-swap="innerHTML">
+    Load profile
+</button>
+<output id="panel"></output>
+```
+
+Clicking this button issues a `GET /profile` request & whatever HTML comes back is placed inside `#panel`.
+
+This demonstrates the core idea of fixi: an element issues a request, gets some HTML back & places it somewhere in the DOM.
+
 ## Attributes
 
 The five core fixi attributes are:
@@ -110,25 +127,6 @@ Per-element listeners always win over these defaults.
 
 Below are some fixi-only examples to show what you can do with it.
 
-### A Simple Button
-
-Here is a fixi-powered button that loads a fragment into a panel:
-
-```html
-<button fx-action="/profile" 
-        fx-target="#panel" 
-        fx-swap="innerHTML">
-    Load profile
-</button>
-<output id="panel"></output>
-```
-
-Clicking this button issues a `GET /profile` request & whatever HTML comes back is placed inside `#panel`. 
-
-This demonstrates the core idea of fixi: an element issues a request, gets some HTML back & places it somewhere in the DOM.
-
-Note that `fx-trigger` was not used because the default for a button is the natural event: `click`.
-
 ### Inline Editing
 
 A common fixi pattern is to click a row (or div) and to swap in an edit form, then submit to swap back to a

docs/site.css

@@ -16,11 +16,11 @@ main {
     background: #fff;
     border-top: 1px solid #e0e0e0;
     border-bottom: 1px solid #e0e0e0;
-    padding: 0.6em 0;
+    padding: 0.7em 0;
     margin: 1em 0 2em;
     display: flex;
     flex-wrap: nowrap;
-    gap: 0.6em;
+    gap: 1.1em;
     justify-content: center;
     align-items: center;
 }
@@ -32,9 +32,10 @@ main {
     color: #2563eb;
     text-decoration: none;
     white-space: nowrap;
+    font-size: 1.1em;
 }
 
-.topnav a:hover { text-decoration: underline; }
+.topnav a:hover .lbl { text-decoration: underline; }
 
 .topnav a.active {
     color: #1a1a1a;
@@ -85,21 +86,29 @@ main {
         color: #2563eb;
         text-decoration: none;
         display: flex;
-        justify-content: center;
         align-items: center;
+        gap: 0.6em;
         padding: 0.5em 0;
         border-bottom: 1px solid #e0e0e0;
     }
     .mobilenav nav a:last-child { border-bottom: none; }
-    .mobilenav nav a:hover { text-decoration: underline; }
-    .mobilenav nav a.active {
+    .mobilenav nav a:hover .lbl { text-decoration: underline; }
+    .mobilenav nav a.active .lbl {
         color: #1a1a1a;
         font-weight: 600;
     }
     .mobilenav nav a .ico {
         font-size: 2em;
-        margin-right: 0.05em;
-        vertical-align: -0.2em;
+        flex-shrink: 0;
+    }
+    .mobilenav nav a .lbl {
+        font-weight: 600;
+        min-width: 4.5em;
+    }
+    .mobilenav nav a .desc {
+        color: #666;
+        font-size: 0.9em;
+        flex: 1;
     }
 }