fix(lite): ship lite.css in asset build and release

priv/static/assets is gitignored, so the hand-written stylesheet never
entered production releases and /assets/lite.css returned HTML (MIME error).

apps/elektrine/assets/css/lite.css

@@ -0,0 +1,580 @@
+/* Elektrine lite — self-contained, no JS, Tor-friendly. ~3KB. */
+:root {
+  color-scheme: dark;
+  --bg: #121214;
+  --bg-2: #1a1a1e;
+  --bg-3: #222228;
+  --fg: #e8e6e3;
+  --muted: #9a9790;
+  --border: #33333a;
+  --link: #8ab4d9;
+  --link-hover: #b3d0eb;
+  --accent: #6f95c4;
+  --accent-fg: #0f1419;
+  --ok-bg: rgba(74, 140, 90, 0.15);
+  --ok-border: rgba(74, 140, 90, 0.35);
+  --err-bg: rgba(180, 70, 70, 0.15);
+  --err-border: rgba(180, 70, 70, 0.4);
+  --warn-bg: rgba(180, 140, 50, 0.12);
+  --warn-border: rgba(180, 140, 50, 0.35);
+  --radius: 8px;
+  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  overflow-x: clip;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font);
+  line-height: 1.5;
+  color: var(--fg);
+  background: var(--bg);
+  overflow-x: clip;
+}
+
+a {
+  color: var(--link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+a:hover {
+  color: var(--link-hover);
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+code {
+  font-family: var(--mono);
+  font-size: 0.875em;
+  background: var(--bg-3);
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+}
+
+.lite-wrap {
+  max-width: 42rem;
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.25rem 1rem 3rem;
+  min-width: 0;
+  overflow-x: clip;
+}
+
+@media (min-width: 640px) {
+  .lite-wrap {
+    padding: 1.75rem 1.5rem 4rem;
+  }
+}
+
+.lite-wrap main,
+.lite-stack,
+.lite-stack-sm,
+.lite-card,
+.lite-list,
+.lite-row {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.lite-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem 1rem;
+  padding-bottom: 1rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.lite-brand {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--fg);
+  text-decoration: none;
+  letter-spacing: -0.02em;
+}
+
+.lite-brand span {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--muted);
+  margin-left: 0.25rem;
+}
+
+.lite-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem 0.85rem;
+  font-size: 0.875rem;
+}
+
+.lite-nav a,
+.lite-nav button {
+  color: var(--muted);
+  text-decoration: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.lite-nav a:hover,
+.lite-nav button:hover {
+  color: var(--fg);
+}
+
+.lite-nav .lite-nav-user {
+  color: var(--muted);
+}
+
+.lite-tagline {
+  margin: 0.5rem 0 0;
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.lite-flash {
+  margin: 0 0 1rem;
+  padding: 0.65rem 0.85rem;
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  border: 1px solid;
+}
+
+.lite-flash-info {
+  background: var(--ok-bg);
+  border-color: var(--ok-border);
+}
+
+.lite-flash-error {
+  background: var(--err-bg);
+  border-color: var(--err-border);
+}
+
+.lite-footer {
+  margin-top: 2.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.lite-h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+}
+
+.lite-h2 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.lite-lead {
+  margin: 0.5rem 0 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+.lite-muted {
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+
+.lite-xs {
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.lite-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.lite-stack-sm {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.lite-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem 1rem;
+  min-width: 0;
+}
+
+.lite-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.lite-list > li {
+  padding: 0.85rem 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.lite-list > li:first-child {
+  border-top: 0;
+}
+
+.lite-list a.lite-block {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.lite-list a.lite-block:hover {
+  background: transparent;
+}
+
+.lite-list-item-unread {
+  background: var(--bg-2);
+}
+
+.lite-list-item-unread .lite-item-title {
+  font-weight: 600;
+}
+
+.lite-item-title {
+  font-size: 0.9rem;
+}
+
+.lite-item-meta {
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.lite-body {
+  font-size: 0.9rem;
+  line-height: 1.65;
+  margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* Plain-text posts keep newlines */
+.lite-body-pre {
+  white-space: pre-wrap;
+}
+
+.lite-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.85rem 1rem;
+  background: var(--bg-2);
+  font-size: 0.875rem;
+  line-height: 1.55;
+  overflow-x: auto;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* Markdown / HTML content inside canary etc. */
+.lite-prose {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  max-width: 100%;
+}
+
+.lite-prose > *:first-child {
+  margin-top: 0;
+}
+
+.lite-prose > *:last-child {
+  margin-bottom: 0;
+}
+
+.lite-prose h1,
+.lite-prose h2,
+.lite-prose h3 {
+  margin: 1rem 0 0.5rem;
+  font-weight: 600;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.lite-prose h1 {
+  font-size: 1.25rem;
+}
+
+.lite-prose h2 {
+  font-size: 1.05rem;
+}
+
+.lite-prose h3 {
+  font-size: 0.95rem;
+}
+
+.lite-prose p,
+.lite-prose ul,
+.lite-prose ol {
+  margin: 0 0 0.75rem;
+}
+
+.lite-prose li {
+  margin-bottom: 0.25rem;
+}
+
+.lite-prose code,
+.lite-prose pre {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+}
+
+.lite-prose code {
+  background: var(--bg-3);
+  padding: 0.1em 0.3em;
+  border-radius: 4px;
+}
+
+.lite-prose pre {
+  margin: 0 0 0.75rem;
+  padding: 0.65rem;
+  background: var(--bg-3);
+  border-radius: var(--radius);
+  overflow-x: auto;
+  max-width: 100%;
+  white-space: pre-wrap;
+}
+
+.lite-pre {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.lite-details summary {
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.lite-details pre {
+  margin-top: 0.75rem;
+}
+
+.lite-card-warn {
+  background: var(--warn-bg);
+  border-color: var(--warn-border);
+}
+
+.lite-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+  padding-bottom: 0.65rem;
+  margin-bottom: 0.25rem;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.875rem;
+}
+
+.lite-tabs a {
+  text-decoration: none;
+  color: var(--muted);
+  padding: 0.15rem 0;
+}
+
+.lite-tabs a:hover {
+  color: var(--fg);
+}
+
+.lite-tabs a[aria-current="page"] {
+  color: var(--fg);
+  font-weight: 600;
+  border-bottom: 2px solid var(--accent);
+}
+
+.lite-badge {
+  display: inline-block;
+  min-width: 1.25rem;
+  padding: 0 0.35rem;
+  margin-left: 0.25rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  line-height: 1.35;
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--accent-fg);
+  text-align: center;
+  vertical-align: middle;
+}
+
+.lite-btn,
+button.lite-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.85rem;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-2);
+  color: var(--fg);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.lite-btn:hover {
+  background: var(--bg-3);
+  color: var(--fg);
+}
+
+.lite-btn-primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-fg);
+}
+
+.lite-btn-primary:hover {
+  filter: brightness(1.08);
+  color: var(--accent-fg);
+  background: var(--accent);
+}
+
+.lite-btn-sm {
+  padding: 0.3rem 0.65rem;
+  font-size: 0.8rem;
+}
+
+.lite-btn-block {
+  width: 100%;
+}
+
+.lite-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  min-width: 0;
+}
+
+.lite-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.lite-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+}
+
+.lite-label > span {
+  color: var(--muted);
+}
+
+.lite-input,
+.lite-textarea {
+  width: 100%;
+  padding: 0.5rem 0.65rem;
+  font: inherit;
+  font-size: 0.9rem;
+  color: var(--fg);
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.lite-textarea {
+  font-family: var(--mono);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  resize: vertical;
+  min-height: 8rem;
+}
+
+.lite-check {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.lite-check input {
+  width: 1rem;
+  height: 1rem;
+}
+
+.lite-pager {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  align-items: center;
+  padding-top: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.lite-article-header {
+  padding-bottom: 0.85rem;
+  margin-bottom: 0.25rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.lite-replies {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.lite-inline-form {
+  display: inline;
+}
+
+hr.lite-hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+  margin: 1rem 0;
+}
+
+.lite-break {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}

apps/elektrine/mix.exs

@@ -143,10 +143,16 @@ defmodule Elektrine.MixProject do
         "tailwind.install --if-missing",
         "esbuild.install --if-missing"
       ],
-      "assets.build": ["tailwind elektrine", "esbuild elektrine"],
+      "assets.build": [
+        "tailwind elektrine",
+        "esbuild elektrine",
+        # Hand-written no-JS stylesheet (not built by tailwind/esbuild).
+        "cmd --cd assets cp css/lite.css ../priv/static/assets/lite.css"
+      ],
       "assets.deploy": [
         "tailwind elektrine --minify",
         "esbuild elektrine --minify",
+        "cmd --cd assets cp css/lite.css ../priv/static/assets/lite.css",
         "phx.digest"
       ]
     ]

scripts/release/deploy_release.sh

@@ -62,6 +62,9 @@ cd "$ROOT_DIR/release_builder"
 mix deps.get --only "$MIX_ENV"
 mix tailwind elektrine --minify
 mix esbuild elektrine --minify
+# Hand-written no-JS stylesheet lives under assets/ (tracked); priv/static/assets is gitignored.
+mkdir -p ../apps/elektrine/priv/static/assets
+cp ../apps/elektrine/assets/css/lite.css ../apps/elektrine/priv/static/assets/lite.css
 mix phx.digest ../apps/elektrine/priv/static --no-compile
 rm -rf ../_build/release_builder
 mix clean