fix terminal styling: scaling banner, mobile padding, typing caret, echoed prompt
site / generated-is-current (push) Successful in 21s

- banner scales down to fit narrow screens instead of scrolling sideways
- smaller base font/padding under sm: to stop the crooked mobile look
- block caret tracks the cursor position inside the input (ghost-span
  measurement) instead of sitting at the line end
- executed commands echo with the momme@world:~$ prompt in front
This commit is contained in:
momme
2026-10-14 02:56:53 +02:00
parent bbf1852842
commit c88dd8326d
5 changed files with 75 additions and 15 deletions
+9 -6
View File
@@ -26,8 +26,8 @@
<span class="ml-2 text-xs text-dim select-none">momme@world: ~</span>
</div>
<div id="screen" tabindex="-1" class="h-[62dvh] overflow-y-auto px-4 py-4 text-[13.5px] sm:text-[15px] leading-[1.35] cursor-text">
<pre class="text-dim overflow-x-auto not-prose"> _ _
<div id="screen" tabindex="-1" class="h-[62dvh] overflow-y-auto px-2.5 py-3 sm:px-4 sm:py-4 text-[12.5px] sm:text-[15px] leading-[1.35] cursor-text">
<pre id="banner" class="text-dim whitespace-pre w-full origin-top-left not-prose"> _ _
| | | |
_ __ ___ ___ _ __ ___ _ __ ___ ___ __ _____ _ __| | __| |
| '_ ` _ \ / _ \| '_ ` _ \| '_ ` _ \ / _ \ \ \ /\ / / _ \| '__| |/ _` |
@@ -40,10 +40,13 @@
<form id="prompt" autocomplete="off" class="flex items-baseline gap-2 mt-1">
<span aria-hidden="true" class="text-accent shrink-0">momme@world:~$</span>
<input id="cmd" aria-label="Run a command" placeholder="type a command — try `help`"
class="flex-1 min-w-0 bg-transparent outline-none border-0 p-0 text-fg placeholder:text-dim/60 caret-transparent"
autocapitalize="off" autocorrect="off" spellcheck="false">
<span aria-hidden="true" class="cursor -ml-[0.6em]"></span>
<span class="relative flex-1 min-w-0">
<input id="cmd" aria-label="Run a command" placeholder="type a command — try `help`"
class="relative block w-full bg-transparent outline-none border-0 p-0 text-fg placeholder:text-dim/60 caret-transparent overflow-hidden"
autocapitalize="off" autocorrect="off" spellcheck="false">
<span id="ghost" aria-hidden="true" class="absolute left-0 top-0 invisible whitespace-pre pointer-events-none"></span>
<span id="caret" aria-hidden="true" class="cursor absolute top-[0.05em] left-0 pointer-events-none"></span>
</span>
</form>
</div>
</div>