On Mon, Dec 01, 2025 at 03:26:30PM -0800, Raymond Toy wrote:
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <meta charset="UTF-8">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title></title>
> <style type="text/css">
> /*
> --- CORE FLEXBOX LOGIC (Outer Container) ---
> This controls the responsive switching between one row and multiple
> rows.
> */
> .nav-panel {
> width: 100%;
> display: flex;
> flex-wrap: wrap; /* CRITICAL: Allows items to wrap to a new line
> when space runs out */
> gap: 0.25rem; /* Minimal space between ENTRIES when on one line */
> }
>
> /*
> --- Individual Entry (data-entry) ---
> The layout for each entry (key + value).
>
> Note: Allow the entry's width to be determined by its content.
> */
> .nav-entry {
> display: flex; /* Makes the key and value sit side-by-side */
> flex-grow: 0; /* Prevents entries from expanding to fill extra
> space */
> flex-basis: auto; /* Allows width to be set by content */
>
> background-color: #f3f4f6;
I think that we should keep a "true" space here for text browsers
instead of padding-right.
> /* A little bit of space between each entry, whether on
> one line or more */
> padding-right: 0.5rem;
> }
>
> /*
> --- Item 1 (Key/Label) ---
> */
> .nav-key {
> font-weight: bold;
> color: #1f2937;
> flex-shrink: 0; /* Prevents the key/label from shrinking */
> margin-right: 0.25rem; /* Minimal space between KEY and VALUE */
> }
>
> /*
> --- Item 2 (Value) ---
> */
> .nav-value {
> flex: 1; /* Allows the value to take up all remaining space in
> the entry */
> color: #4b5563;
> word-wrap: break-word; /* Ensures long content wraps */
> overflow-wrap: break-word;
> }
> </style>
> </head>
> <body>
>
> <div class="nav-panel">
> <span class="nav-entry">
> <span class="nav-key">Next:</span>
> <span class="nav-value">A SERVE-EVENT Example</span>
> </span>
>
> <span class="nav-entry">
> <span class="nav-key">Previous:</span>
> <span class="nav-value">Using SERVE-EVENT with Unix File
> Descriptors</span>
> </span>
>
> <span class="nav-entry">
> <span class="nav-key">Up:</span>
> <span class="nav-value">Event Dispatching with SERVE-EVENT</span>
> </span>
>
These are 2 buttons without key/label and value/link, so should be
<span class="nav-entry">[Content]</span>
<span class="nav-entry">[Index]</span>
> <span class="nav-entry">
> <span class="nav-key">[Content][Index]</div>
> </span>
> </div>
> <hr>
> <p>
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
> aliquam sapien id risus interdum pretium. Sed pulvinar hendrerit
> fermentum. Vivamus nec bibendum libero. Quisque convallis, massa
> quis cursus molestie, ante dolor varius odio, sit amet gravida
> felis purus ac eros. Etiam porttitor accumsan bibendum. Aenean
> convallis commodo commodo. Mauris lobortis sem in massa maximus
> mattis. In mattis varius odio eu ultricies. Curabitur dignissim
> ornare elit eget fringilla.
> </p>
>
> </body>
> </html>
