From e97b9ba22eac87cbe8426dd520b782d0c45cffa1 Mon Sep 17 00:00:00 2001 From: Jeffrey Alan Scudder Date: Tue, 13 Jan 2026 00:57:43 +0000 Subject: [PATCH] give: light mode refinements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - KidLisp slide handles/hits brighter with stronger shadows - KidLisp slide images show at higher opacity (0.85/1.0) - Chat captions match their header backgrounds exactly - Lær Klokken caption uses yellow gradient - System chat caption uses purple gradient --- .../public/aesthetic.computer/disks/chat.mjs | 38 +++++++++---------- .../public/give.aesthetic.computer/index.html | 23 ++++++++++- 2 files changed, 38 insertions(+), 23 deletions(-) diff --git a/system/public/aesthetic.computer/disks/chat.mjs b/system/public/aesthetic.computer/disks/chat.mjs index 847267d6eb..b7970c9a52 100644 --- a/system/public/aesthetic.computer/disks/chat.mjs +++ b/system/public/aesthetic.computer/disks/chat.mjs @@ -370,18 +370,14 @@ function paint( ) { const client = options?.otherChat || chat; - // Extract typeface name option (defaults to undefined for normal typeface) - const typefaceName = options?.typeface; - - // Calculate rowHeight based on the typeface being used - // For unifont, use 16 (standard unifont height at scale 1) - // For default typeface, use the blockHeight + 1 - const currentRowHeight = typefaceName === "unifont" ? 17 : (typeface.blockHeight + 1); - // Calculate dynamic bottom margin based on selected font const selectedFontConfig = CHAT_FONTS[userSelectedFont] || CHAT_FONTS["font_1"]; const bottomMargin = getBottomMargin(selectedFontConfig, typeface.blockHeight); + // Use user-selected font for message rendering (overrides per-message stored font) + const typefaceName = selectedFontConfig.typeface; + const currentRowHeight = selectedFontConfig.rowHeight ?? (typeface.blockHeight + 1); + // Default theme const defaultTheme = { background: [100, 100, 145], @@ -568,9 +564,9 @@ function paint( // console.log("No message layout found for:", message); } - // 🔤 Get per-message font settings - const msgTypefaceName = message.computedTypefaceName ?? typefaceName; - const msgRowHeight = message.computedRowHeight ?? currentRowHeight; + // 🔤 Use current user-selected font for rendering (not per-message stored font) + const msgTypefaceName = typefaceName; + const msgRowHeight = currentRowHeight; const x = leftMargin; const tb = message.tb; // Precomputed in `computeScrollbar` for each message. @@ -727,7 +723,7 @@ function paint( // Use MatrixChunky8 for compact timestamps tacked onto the end of messages const timestampWidth = text.width(ago, "MatrixChunky8"); - const timestampGap = getFontTimestampGap(message.font || "font_1"); + const timestampGap = getFontTimestampGap(userSelectedFont); // Position timestamp right after the last *visually rendered* line of the message layout.timestamp.x = lastLineRenderedWidthForThisMessage + timestampGap; @@ -2363,16 +2359,17 @@ async function loadPaintingPreview(code, get, store) { function computeMessagesHeight({ text, screen }, chat, defaultTypefaceName, defaultRowHeight) { let height = 0; + + // 🔤 Use user-selected font for ALL messages + const selectedFontConfig = CHAT_FONTS[userSelectedFont] || CHAT_FONTS["font_1"]; + const msgTypefaceName = selectedFontConfig.typeface ?? defaultTypefaceName; + const msgRowHeight = selectedFontConfig.rowHeight ?? defaultRowHeight; + // Iterate through the messages array. for (let i = 0; i < chat.messages.length; i += 1) { const message = chat.messages[i]; - // 🔤 Get font for this message (default to font_1 for backwards compatibility) - const msgFont = message.font || "font_1"; - const msgTypefaceName = getFontTypeface(msgFont) ?? defaultTypefaceName; - const msgRowHeight = getFontRowHeight(msgFont, defaultRowHeight); - - // Store computed font info on the message for use in paint + // Store computed font info on the message for use in paint (now using selected font) message.computedTypefaceName = msgTypefaceName; message.computedRowHeight = msgRowHeight; @@ -2423,11 +2420,10 @@ function computeMessagesLayout({ screen, text }, chat, defaultTypefaceName, defa for (let i = chat.messages.length - 1; i >= 0; i--) { const msg = chat.messages[i]; - // 🔤 Get per-message font settings (computed in computeMessagesHeight) + // 🔤 Use user-selected font settings (computed in computeMessagesHeight) const msgTypefaceName = msg.computedTypefaceName ?? defaultTypefaceName; const msgRowHeight = msg.computedRowHeight ?? defaultRowHeight; - const msgFont = msg.font || "font_1"; - const msgTimestampGap = getFontTimestampGap(msgFont); + const msgTimestampGap = getFontTimestampGap(userSelectedFont); // Parse elements first to know if we have painting previews const parsedElements = parseMessageElements(msg.fullMessage); diff --git a/system/public/give.aesthetic.computer/index.html b/system/public/give.aesthetic.computer/index.html index 356ae125d4..97580d661a 100644 --- a/system/public/give.aesthetic.computer/index.html +++ b/system/public/give.aesthetic.computer/index.html @@ -6250,6 +6250,25 @@ body.light-mode .baby-colors { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25); } + + /* Light mode: KidLisp slide - brighter handles/hits, full opacity images */ + body.light-mode .kidlisp-slide-credit .credit-handle { + color: #d946ef; + text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.6); + } + + body.light-mode .kidlisp-slide-plays { + color: #f59e0b; + text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.6); + } + + body.light-mode .kidlisp-slide img.loaded { + opacity: 0.85; + } + + body.light-mode .kidlisp-slide:hover img.loaded { + opacity: 1; + } /* Light mode: Invest section */ body.light-mode .invest-section { @@ -6320,7 +6339,7 @@ } body.light-mode .chat-preview .module-caption { - background: linear-gradient(135deg, rgba(255, 251, 235, 0.95) 0%, rgba(254, 243, 199, 0.98) 100%); + background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); color: var(--text); } @@ -6356,7 +6375,7 @@ } body.light-mode .chat-preview-system .module-caption { - background: linear-gradient(135deg, rgba(245, 243, 255, 0.95) 0%, rgba(237, 233, 254, 0.98) 100%); + background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); color: var(--text); } -- 2.51.2