I'm fine with your suggested changes.
I tried lynx (for the first time). It looks fine with wide windows but
doesn't handle flex boxes quite right with a very narrow window. That's
probably not a common problem.
On 12/2/25 4:19 AM, Patrice Dumas wrote:
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>
​
