feat: initial homepage — terminal aesthetic, whoami + caps + principles

2026-06-02 13:09:41 +02:00
commit ebcc4ad8de
5 changed files with 427 additions and 0 deletions
@@ -0,0 +1,201 @@
+/* bonzi homepage — terminal, monochrome, zero border-radius */
+
+:root {
+  --bg: #000;
+  --fg: #e6e6e6;
+  --dim: #6b6b6b;
+  --accent: #ffffff;
+  --green: #6cff6c;
+  --warn: #ffcb6c;
+  --off: #555;
+  --scan: rgba(255, 255, 255, 0.025);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+}
+
+html, body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+  font-size: 15px;
+  line-height: 1.6;
+  font-feature-settings: "calt" 0;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* faint scanlines overlay */
+.scanlines {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent 2px,
+    var(--scan) 2px,
+    var(--scan) 3px
+  );
+  z-index: 1000;
+  mix-blend-mode: overlay;
+}
+
+main.terminal {
+  max-width: 780px;
+  margin: 0 auto;
+  padding: 6vh 24px 12vh;
+}
+
+/* selection */
+::selection {
+  background: var(--fg);
+  color: var(--bg);
+}
+
+/* prompt lines */
+.prompt-line {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0;
+  margin-top: 2.4em;
+  font-weight: 500;
+}
+
+.prompt-line .user {
+  color: var(--green);
+}
+.prompt-line .path {
+  color: var(--accent);
+}
+.prompt-line .cmd {
+  color: var(--fg);
+  margin-left: 0.6em;
+}
+.prompt-line .cursor {
+  margin-left: 0.4em;
+  color: var(--fg);
+  animation: blink 1.05s steps(2, start) infinite;
+}
+
+@keyframes blink {
+  to { visibility: hidden; }
+}
+
+/* output blocks */
+.output {
+  margin-top: 1em;
+  padding-left: 0.2em;
+}
+
+.output p {
+  margin-bottom: 0.9em;
+}
+
+.ascii {
+  color: var(--accent);
+  font-size: 13px;
+  line-height: 1.2;
+  margin: 1.4em 0 1.6em;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.caps {
+  list-style: none;
+}
+.caps li {
+  padding: 0.18em 0;
+}
+.caps .ok    { color: var(--green); margin-right: 0.6em; }
+.caps .warn  { color: var(--warn);  margin-right: 0.6em; }
+.caps .off   { color: var(--off);   margin-right: 0.6em; }
+
+.principles {
+  list-style: none;
+  counter-reset: principle;
+}
+.principles li {
+  counter-increment: principle;
+  padding: 0.18em 0;
+}
+.principles li::before {
+  content: counter(principle, decimal-leading-zero) ".";
+  color: var(--dim);
+  margin-right: 0.8em;
+}
+
+.links {
+  list-style: none;
+}
+.links li {
+  padding: 0.2em 0;
+}
+.links .prompt-mark {
+  color: var(--dim);
+  margin-right: 0.8em;
+}
+.links a {
+  color: var(--fg);
+  text-decoration: none;
+  border-bottom: 1px dashed var(--dim);
+  transition: border-color 0.15s, color 0.15s;
+}
+.links a:hover {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.footer p {
+  margin-bottom: 0.4em;
+}
+.dim {
+  color: var(--dim);
+}
+
+/* live status dot */
+.dot {
+  display: inline-block;
+  width: 0.6em;
+  height: 0.6em;
+  background: var(--green);
+  border-radius: 50%;
+  margin-right: 0.5em;
+  vertical-align: middle;
+  box-shadow: 0 0 6px var(--green);
+  animation: pulse 2.4s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.45; }
+}
+
+/* reveal on scroll */
+[data-reveal] {
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+[data-reveal].in {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .cursor { animation: none; }
+  .dot    { animation: none; }
+  [data-reveal] { opacity: 1; transform: none; transition: none; }
+}
+
+/* small screens */
+@media (max-width: 600px) {
+  html, body { font-size: 14px; }
+  main.terminal { padding: 4vh 16px 8vh; }
+  .ascii { font-size: 11px; }
+}