Clamped windows in the wm to the canvas for tighter screen real estate.

Added a bar that indicates when a window can be scrolled.
Updated personal info.
This commit is contained in:
Jake Holtham 2026-03-24 14:29:02 -04:00
parent 2ed4a4f13b
commit 067a114840
4 changed files with 73 additions and 7 deletions

View file

@ -216,6 +216,7 @@ body { animation: flicker 12s infinite; }
.window {
position: absolute;
min-width: 280px; min-height: 160px;
max-height: calc(100vh - 20px);
background: var(--win-bg);
border: 4px solid var(--p);
border-radius: 0;
@ -276,6 +277,25 @@ body { animation: flicker 12s infinite; }
overflow-y: auto; overflow-x: hidden;
}
/* More / scroll indicator — sits between content and footer */
.scroll-more {
padding: 1px 10px;
background: var(--win-bg);
border-top: 1px dashed var(--p-dim);
color: var(--p-dim);
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 3px;
text-align: center;
cursor: pointer;
flex-shrink: 0;
user-select: none;
transition: color 0.08s, background 0.08s, border-color 0.08s;
}
.scroll-more:hover { color: var(--p); background: var(--p-faint); }
.window.focused .scroll-more { border-top-color: var(--p-dim); }
.window.focused .scroll-more:hover { color: var(--p); }
/* Footer bar — dark bg, amber-tinted buttons */
.window-footer {
display: flex; align-items: stretch; gap: 0;

View file

@ -56,6 +56,27 @@ const WM = (() => {
footer.appendChild(spacer);
footer.appendChild(resizeHandle);
win.appendChild(footer);
// ── More / scroll indicator ──────────────
const moreBar = document.createElement("div");
moreBar.className = "scroll-more hidden";
moreBar.textContent = "-- more --";
win.insertBefore(moreBar, footer);
const content = win.querySelector(".window-content");
if (content) {
function syncMore() {
const overflows = content.scrollHeight > content.clientHeight + 2;
const atEnd = content.scrollHeight - content.scrollTop - content.clientHeight < 4;
moreBar.classList.toggle("hidden", !overflows || atEnd);
}
content.addEventListener("scroll", syncMore);
moreBar.addEventListener("click", () => {
content.scrollBy({ top: content.clientHeight * 0.8, behavior: "smooth" });
});
new ResizeObserver(syncMore).observe(content);
win._syncMore = syncMore;
}
}
/* ── Register a window element ─────────── */
@ -112,12 +133,30 @@ const WM = (() => {
/* ── Show / Hide ───────────────────────── */
/* ── Clamp window to desktop-area bounds ── */
function clampToArea(el) {
const area = document.querySelector(".desktop-area");
if (!area) return;
const ar = area.getBoundingClientRect();
const wr = el.getBoundingClientRect();
const margin = 8;
const availH = ar.bottom - wr.top - margin;
const availW = ar.right - wr.left - margin;
if (availH > 80 && wr.height > availH) el.style.height = availH + "px";
if (availW > 80 && wr.width > availW) el.style.width = availW + "px";
}
function show(id) {
const s = state.get(id);
if (!s) return;
s.el.classList.remove("hidden");
s.hidden = false;
focusEl(s.el);
requestAnimationFrame(() => {
clampToArea(s.el);
if (s.el._syncMore) s.el._syncMore();
});
}
function hide(id) {

View file

@ -2,14 +2,21 @@
permalink: false
---
## Get in touch
## Jake "**lordtet**" Holtham
### Mail
If you have an interesting problem for me, or think I'd fit in at your workplace, feel free to drop me a message.
You have the best chance of reaching me by email.
### Contact
Mail: [jake@lordnet.sh](mailto:jake@lordnet.sh) (Preferred)
Matrix: lordtet@lordnet.sh
### GitHub
### Code Repositories
- [repos.lordnet.sh](https://repos.lordnet.sh) (Primary)
- [github.com/lordtet](https://github.com/lordtet/) (Secondary, old)
### PGP

View file

@ -8,7 +8,7 @@ permalink: /
<div class="desktop-icons" aria-label="Desktop icons">
<div class="desktop-icon" data-opens="win-about" role="button" tabindex="0" aria-label="Open about">
<div class="icon-art">[i]</div>
<div class="icon-label">about_me.txt</div>
<div class="icon-label">about_me.sh</div>
</div>
<div class="desktop-icon" data-opens="win-blog" role="button" tabindex="0" aria-label="Open blog">
<div class="icon-art">[/]</div>
@ -175,7 +175,7 @@ permalink: /
id="win-contact"
data-wid="win-contact"
data-title="contact"
style="top:120px; left:240px; width:480px;">
style="top:20px; left:240px; width:480px;">
<div class="window-content">
{{ collections.contactContent[0].templateContent | safe }}