style(html_examples): clean htmx-like shell with no low-level plumbing

- Move CSS out of app_shell.heml into app.css served by the app. - Remove direct hemx::advanced::Effect import from example code; rely on IntoEffect. - Update README to not mention raw Effect:: APIs. - Keep generated resources and tiny runtime behavior only. req: examples/001 req: htmx_equivalents/001 req: htmx_equivalents/002
2026-06-23 11:25:59 +02:00
parent cd7f64e5a3
commit cfa4502748
4 changed files with 141 additions and 8 deletions
@@ -0,0 +1,124 @@
+:root {
+  --bg: #f5f5f5;
+  --surface: #ffffff;
+  --ink: #222222;
+  --muted: #666666;
+  --border: #d4d4d4;
+  --accent: #3465a4;
+  --accent-hover: #29528a;
+  --danger: #c0392b;
+  --danger-hover: #a93226;
+  --radius: 6px;
+  --space: 1.25rem;
+  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  padding: var(--space);
+  font-family: var(--font-body);
+  background: var(--bg);
+  color: var(--ink);
+  line-height: 1.55;
+}
+main {
+  max-width: 820px;
+  margin: 0 auto;
+}
+header {
+  margin-bottom: calc(var(--space) * 1.5);
+}
+header p:first-child {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem;
+  color: var(--muted);
+  margin: 0 0 0.25rem;
+}
+h1 {
+  font-family: var(--font-mono);
+  font-size: 1.75rem;
+  margin: 0 0 0.5rem;
+}
+header p:last-child {
+  color: var(--muted);
+  margin: 0;
+}
+section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: calc(var(--space) * 1.25);
+  margin-bottom: var(--space);
+}
+section h2 {
+  font-family: var(--font-mono);
+  font-size: 1.15rem;
+  margin: 0 0 var(--space);
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+p { margin: 0 0 var(--space); }
+form { margin: 0 0 var(--space); }
+label { font-weight: 500; }
+article label { display: block; margin-bottom: 0.75rem; }
+article label input { display: block; width: 100%; margin-top: 0.3rem; }
+input, select, button {
+  font: inherit;
+  padding: 0.45rem 0.65rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+}
+input, select { width: 100%; max-width: 360px; }
+input:focus, select:focus, button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+button {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+  cursor: pointer;
+  font-weight: 500;
+}
+button:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+[data-hemx-handle="delete_row"] button,
+[data-hemx-handle*="delete"] button,
+.danger {
+  background: var(--danger);
+  border-color: var(--danger);
+}
+[data-hemx-handle="delete_row"] button:hover,
+[data-hemx-handle*="delete"] button:hover,
+.danger:hover {
+  background: var(--danger-hover);
+  border-color: var(--danger-hover);
+}
+td form { display: inline-block; margin-right: 0.4rem; }
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--space) 0;
+}
+th, td {
+  text-align: left;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+th { font-weight: 600; color: var(--muted); }
+ul { padding-left: 1.25rem; margin: 0 0 var(--space); }
+progress {
+  width: 100%;
+  height: 1rem;
+  accent-color: var(--accent);
+}
+[data-hemx-error-for] {
+  color: var(--danger);
+  font-size: 0.9rem;
+  margin: 0.25rem 0 0;
+}
+.htmx-indicator { opacity: 0.5; }
@@ -4,7 +4,8 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hemx HTML examples</title>
-    <script defer="defer" +src="self.runtime_src"></script>
+    <link rel="stylesheet" href="/app.css">
+    <script +src="self.runtime_src" defer></script>
  </head>
  <body>
    {+= self.body =+}