engineering/zebra-report
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

zebra-spaces: log full-width between .page and footer + resizable to 240px default

Browse source 
Per fox. Pulled the log section out of <aside class="controls"> and
moved it to a new <section id="sec-log"> sibling of .page, right
above the page-integrity footer. CSS:

- 240px default height (was 150px and stuck in a 360px column)
- resize: vertical so the user can drag it taller as needed
- min-height: 120px so it can't be collapsed to nothing
- full viewport width inside the body's padding box

Same dark-mode rules apply (#050505 bg / #333 border) since the
.log class selector didn't change.
This commit is contained in:
Russell Ballestrini 2026-06-02 13:02:32 -04:00
parent bc7bbbfc7b
commit 0dcc99599e
No known key found for this signature in database
1 changed files with 24 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

31
web/zebra-spaces.html
View file

@ -475,7 +475,21 @@
margin-top: 0.2rem;
}
.mod-actions:empty { display: none; } /* no row gap when nothing to do */
.log { border: 1px solid #000; height: 150px; overflow-y: auto; padding: 0.5rem; font-size: 0.75rem; line-height: 1.5; background: #fafafa; }
/* log lives in its own full-width section beneath the .page grid.
* 240px default, vertical resize handle so the user can drag it
* taller when the chatter outpaces the viewport. */
#sec-log { margin-top: 1.25rem; }
.log {
border: 1px solid #000;
height: 240px;
min-height: 120px;
resize: vertical;
overflow-y: auto;
padding: 0.5rem;
font-size: 0.75rem; line-height: 1.5;
background: #fafafa;
width: 100%;
}
.log-line { margin-bottom: 0.2rem; word-wrap: break-word; }
.log-line .ts { color: #888; }
.log-line.err { color: #b00; }
@ -678,14 +692,17 @@ try {
</div>
</section>
<section>
</aside>
</div>
<!-- log moved out of the right column so it can use the full viewport
width. Sits between the .page grid and the page-integrity footer,
starts at 240px tall, vertical-resize handle for growing it. -->
<section id="sec-log">
<h2>log</h2>
<div class="log" id="log"></div>
</section>
</aside>
</div>
<script>
(async () => {
const $ = (id) => document.getElementById(id);
@ -3509,8 +3526,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
<footer style="margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
<span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-02</span><br>
md5 <span class="stamp-md5">8c1238b1dd72f2c72d3b3cae9cff676a</span><br>
sha256 <span class="stamp-sha">d900d6562ff205260f2a495858882abc1b66078ecb329d3e9b70be95100c329c</span><br>
md5 <span class="stamp-md5">6943dfacd39a9bdfd65afc8ff520a202</span><br>
sha256 <span class="stamp-sha">2586303203b2c3703e7f211d7350b160c7e9638c482531fa472f128248ad72b2</span><br>
<span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
<span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify against these hashes; point at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
</footer>