Fix forum post CSS: explicit grid-column, avatar selector by alt attr, emoji right

This commit is contained in:
Russell Ballestrini 2026-01-03 06:07:14 -05:00
parent 2c13c8600f
commit de4e2d90fc

11
serp.py
View file

@ -594,7 +594,7 @@ def inject_i18n(html: str, lang: str) -> str:
# Replace nav placeholder with actual nav (add import link if enabled)
nav = NAV_HTML
if IMPORT_MODE:
nav = nav.replace('</div>', ' <a href="/import">🧪 Import</a>\n</div>')
nav = nav.replace('</div>', ' <a href="/import">Import 🧪</a>\n</div>')
html = html.replace('<!-- NAV -->', nav)
# Build language selector options
lang_options = ''.join(f'<option value="{code}"{" selected" if code == lang else ""}>{name}</option>'
@ -767,7 +767,8 @@ h3 { color: #ff6b6b; font-size: 16px; margin: 30px 0 15px 0; border-bottom: 1px
line-height: 1.7; font-size: 14px; color: #ccc; text-align: left;
}
.content-rendered img { max-width: 100%; height: auto; margin: 10px 0; }
.content-rendered img.avatar {
.content-rendered img.avatar,
.content-rendered img[alt="avatar"] {
display: inline-block; vertical-align: middle;
width: 40px; height: 40px; border-radius: 50%;
margin: 0 10px 0 0; object-fit: cover;
@ -942,10 +943,10 @@ def render_detail_page(
.content-rendered img.emoji {{ display: inline; width: 20px; height: 20px; margin: 0 2px; vertical-align: text-bottom; }}
.content-rendered .post-block {{ display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid #252530; }}
.content-rendered .post-block:last-child {{ border-bottom: none; }}
.content-rendered .post-avatar-col {{ display: flex; flex-direction: column; align-items: center; }}
.content-rendered .post-avatar-col {{ grid-column: 1; display: flex; flex-direction: column; align-items: center; width: 48px; }}
.content-rendered .post-avatar {{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }}
.content-rendered .post-avatar-placeholder {{ width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; }}
.content-rendered .post-content {{ min-width: 0; }}
.content-rendered .post-content {{ grid-column: 2; min-width: 0; }}
.content-rendered pre {{ position: relative; }}
.content-rendered pre .code-actions {{ position: absolute; top: 8px; right: 8px; display: flex; gap: 5px; }}
.content-rendered pre .code-actions button {{ background: #444; border: none; color: #ccc; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; }}
@ -4940,7 +4941,7 @@ IMPORT_CSS = """
IMPORT_CONTENT = """
<div class="container">
<h1>🧪 Import Mode</h1>
<h1>Import Mode 🧪</h1>
<p class="subtitle">Upload a neopig archive (.tar.gz or .run) to explore it</p>
<div class="upload-zone" id="upload-zone" onclick="document.getElementById('file-input').click()">