momme.world: terminal-style personal site, nginx + ConfigMap deploy

Static site (no build step) with a browser terminal, plain-text output for curl, and plain k8s manifests under k8s/ for ArgoCD.
2026-10-13 20:34:54 +02:00
commit 9f923b4f35
12 changed files with 740 additions and 0 deletions
@@ -0,0 +1,136 @@
+:root {
+  --bg: #0b0e14;
+  --panel: #11151f;
+  --border: #232b3a;
+  --fg: #d6deeb;
+  --dim: #7c879b;
+  --accent: #7ee787;
+  --accent-2: #6cb6ff;
+  --warn: #f2cc60;
+  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono",
+          Menlo, Consolas, monospace;
+}
+
+* { box-sizing: border-box; }
+
+html, body { margin: 0; }
+
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--mono);
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  justify-content: center;
+  padding: clamp(12px, 4vw, 48px) clamp(10px, 3vw, 24px) 40px;
+}
+
+main { width: 100%; max-width: 46rem; }
+
+.term {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
+}
+
+.titlebar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: #151a26;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--dim);
+}
+.dot { width: 11px; height: 11px; border-radius: 50%; }
+.dot.r { background: #ff5f57; }
+.dot.y { background: #febc2e; }
+.dot.g { background: #28c840; }
+.title { margin-left: 8px; }
+
+.screen {
+  padding: 18px clamp(12px, 2.5vw, 22px) 20px;
+  min-height: 58vh;
+  max-height: 78vh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  outline: none;
+}
+
+.hello {
+  color: var(--accent-2);
+  font-size: clamp(6.5px, 1.55vw, 12px);
+  line-height: 1.25;
+  margin: 0 0 18px;
+  overflow-x: auto;
+}
+
+#out { white-space: pre-wrap; word-break: break-word; }
+
+.line { margin: 0; display: block; }
+.line.cmd { color: var(--fg); }
+.line.cmd::before { content: "momme@world:~$ "; color: var(--dim); }
+.line.out { color: var(--fg); margin-bottom: 6px; }
+.line.dim { color: var(--dim); }
+.line.err { color: #ff6b6b; }
+a { color: var(--accent-2); text-decoration: none; }
+a:hover, a:focus-visible { text-decoration: underline; }
+.hl { color: var(--accent); }
+.key { color: var(--warn); }
+
+.cursor {
+  display: inline-block;
+  width: 8px;
+  height: 1.05em;
+  background: var(--accent);
+  vertical-align: text-bottom;
+  animation: blink 1.1s steps(1) infinite;
+}
+@keyframes blink { 50% { opacity: 0; } }
+
+#prompt { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
+.ps1 { color: var(--dim); white-space: nowrap; }
+#cmd {
+  flex: 1;
+  min-width: 0;
+  background: none;
+  border: 0;
+  outline: none;
+  color: var(--fg);
+  font: inherit;
+  caret-color: var(--accent);
+}
+#cmd::placeholder { color: #4b5566; }
+
+.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
+.chips button {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--dim);
+  font: inherit;
+  font-size: 13px;
+  padding: 5px 14px;
+  cursor: pointer;
+  transition: color .15s, border-color .15s;
+}
+.chips button:hover, .chips button:focus-visible {
+  color: var(--accent);
+  border-color: var(--accent);
+  outline: none;
+}
+
+.curl { color: var(--dim); font-size: 13px; margin: 16px 2px 0; }
+.curl code { background: var(--panel); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
+
+.facts h2 { font-size: 15px; color: var(--accent); margin: 26px 0 8px; }
+.facts ul { padding-left: 20px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .cursor { animation: none; }
+}