Files
momme c88dd8326d
site / generated-is-current (push) Successful in 21s
fix terminal styling: scaling banner, mobile padding, typing caret, echoed prompt
- 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
2026-10-14 02:56:53 +02:00

73 lines
4.6 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>momme.world — Momme Jürgensen</title>
<meta name="description" content="Hi, I'm Momme. I build and break infrastructure: Kubernetes, NixOS, self-hosting, and FPV drones. Say hello on the terminal.">
<meta name="color-scheme" content="dark">
<meta property="og:type" content="profile">
<meta property="og:title" content="momme.world">
<meta property="og:description" content="Hi, I'm Momme. I build and break infrastructure: Kubernetes, NixOS, self-hosting, and FPV drones.">
<meta property="og:url" content="https://momme.world/">
<link rel="canonical" href="https://momme.world/">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css">
</head>
<body class="min-h-dvh bg-bg text-fg font-mono antialiased flex flex-col items-center justify-center p-4 sm:p-8 selection:bg-accent/30">
<main class="w-full max-w-3xl">
<div class="rounded-lg border border-line bg-panel shadow-[0_0_40px_rgba(0,0,0,.5)] overflow-hidden">
<div class="flex items-center gap-2 border-b border-line bg-bar px-3 py-2">
<span class="size-3 rounded-full bg-[#ff5f56]"></span>
<span class="size-3 rounded-full bg-[#ffbd2e]"></span>
<span class="size-3 rounded-full bg-[#27c93f]"></span>
<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-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"> _ _
| | | |
_ __ ___ ___ _ __ ___ _ __ ___ ___ __ _____ _ __| | __| |
| '_ ` _ \ / _ \| '_ ` _ \| '_ ` _ \ / _ \ \ \ /\ / / _ \| '__| |/ _` |
| | | | | | (_) | | | | | | | | | | | __/ _ \ V V / (_) | | | | (_| |
|_| |_| |_|\___/|_| |_| |_|_| |_| |_|\___| (_) \_/\_/ \___/|_| |_|\__,_|
0110110101101111011011010110110101100101001011100111011101101111011100100110110001100100</pre>
<div id="out" class="whitespace-pre-wrap break-words"></div>
<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>
<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>
<nav class="mt-4 flex flex-wrap justify-center gap-2" aria-label="Commands">
<button data-run="contact" class="rounded border border-line bg-panel px-3 py-1 text-xs text-dim hover:text-accent hover:border-accent transition-colors">contact</button>
<button data-run="hello" class="rounded border border-line bg-panel px-3 py-1 text-xs text-dim hover:text-accent hover:border-accent transition-colors">hello</button>
<button data-run="project" class="rounded border border-line bg-panel px-3 py-1 text-xs text-dim hover:text-accent hover:border-accent transition-colors">project</button>
<button data-run="social" class="rounded border border-line bg-panel px-3 py-1 text-xs text-dim hover:text-accent hover:border-accent transition-colors">social</button>
<button data-run="stack" class="rounded border border-line bg-panel px-3 py-1 text-xs text-dim hover:text-accent hover:border-accent transition-colors">stack</button>
<button data-run="whoami" class="rounded border border-line bg-panel px-3 py-1 text-xs text-dim hover:text-accent hover:border-accent transition-colors">whoami</button>
</nav>
<p class="mt-4 text-center text-xs text-dim">
Terminal people: <code class="text-fg">curl momme.world</code>
&nbsp;·&nbsp; tailnet: <code class="text-fg">telnet momme.world 23</code>
&nbsp;·&nbsp; source: <a class="text-accent hover:underline" href="https://git.momme.cloud/momme/momme-world">git.momme.cloud/momme/momme-world</a>
</p>
</main>
<script src="/site.js"></script>
</body>
</html>