git.stevedylan.dev

Merge pull request #33 from stevedylandev/feat/add-darkmatter-css-crate a4812d32

Add darkmatter css create

Steve Simkins · 2026-04-18 20:00 69 file(s) · +1458 −1818

Cargo.lock +16 −0

]

[[package]]
name = "andromeda-darkmatter-css"
version = "0.1.0"
dependencies = [
 "axum",
 "rust-embed",
]

[[package]]
name = "andromeda-db"
version = "0.1.0"
dependencies = [

version = "0.2.0"
dependencies = [
 "andromeda-auth",
 "andromeda-darkmatter-css",
 "andromeda-db",
 "askama 0.15.6",
 "askama_web",

version = "0.2.0"
dependencies = [
 "andromeda-auth",
 "andromeda-darkmatter-css",
 "andromeda-db",
 "askama 0.13.1",
 "axum",

version = "0.2.0"
dependencies = [
 "andromeda-auth",
 "andromeda-darkmatter-css",
 "andromeda-db",
 "arboard",
 "askama 0.15.6",

name = "og"
version = "0.1.0"
dependencies = [
 "andromeda-darkmatter-css",
 "askama 0.13.1",
 "axum",
 "dotenvy",

version = "0.1.3"
dependencies = [
 "andromeda-auth",
 "andromeda-darkmatter-css",
 "andromeda-db",
 "anyhow",
 "askama 0.12.1",

version = "0.1.4"
dependencies = [
 "andromeda-auth",
 "andromeda-darkmatter-css",
 "andromeda-db",
 "askama 0.15.6",
 "askama_web",

name = "shrink"
version = "0.1.2"
dependencies = [
 "andromeda-darkmatter-css",
 "askama 0.15.6",
 "axum",
 "image",

version = "0.2.0"
dependencies = [
 "andromeda-auth",
 "andromeda-darkmatter-css",
 "andromeda-db",
 "arboard",
 "askama 0.15.6",

Cargo.toml +2 −0

10	10		"apps/posts",
11	11		"crates/auth",
12	12		"crates/db",
	13	+	"crates/darkmatter-css",
13	14		]
14	15		resolver = "3"
15	16

52	53		# Workspace crates
53	54		andromeda-auth = { path = "crates/auth" }
54	55		andromeda-db = { path = "crates/db" }
	56	+	andromeda-darkmatter-css = { path = "crates/darkmatter-css" }

apps/cellar/Cargo.toml +1 −0

tracing-subscriber = { workspace = true }
andromeda-auth = { workspace = true }
andromeda-db = { workspace = true, features = ["session"] }
andromeda-darkmatter-css = { workspace = true }
askama = "0.15"
askama_web = { version = "0.15", features = ["axum-0.8"] }
reqwest = { version = "0.12", features = ["json", "rustls-tls"], default-features = false }

apps/cellar/Dockerfile +6 −1

COPY Cargo.toml Cargo.lock .
COPY crates/auth/Cargo.toml crates/auth/
COPY crates/db/Cargo.toml crates/db/
COPY crates/darkmatter-css/Cargo.toml crates/darkmatter-css/
COPY apps/sipp/Cargo.toml apps/sipp/
COPY apps/feeds/Cargo.toml apps/feeds/
COPY apps/parcels/Cargo.toml apps/parcels/

# Create stubs for dependency caching
RUN mkdir -p crates/auth/src && echo '' > crates/auth/src/lib.rs \
    && mkdir -p crates/db/src && echo '' > crates/db/src/lib.rs \
    && mkdir -p crates/darkmatter-css/src && echo '' > crates/darkmatter-css/src/lib.rs \
    && mkdir -p crates/darkmatter-css/assets \
    && for app in sipp feeds parcels jotts og shrink cellar posts; do \
         mkdir -p apps/$app/src && echo 'fn main() {}' > apps/$app/src/main.rs; \
       done

# Copy real source
COPY crates/auth/src crates/auth/src
COPY crates/db/src crates/db/src
COPY crates/darkmatter-css/src crates/darkmatter-css/src
COPY crates/darkmatter-css/assets crates/darkmatter-css/assets
COPY apps/cellar/src apps/cellar/src
COPY apps/cellar/static apps/cellar/static
COPY apps/cellar/templates apps/cellar/templates

RUN touch apps/cellar/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs && cargo build --release -p cellar
RUN touch apps/cellar/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs crates/darkmatter-css/src/*.rs && cargo build --release -p cellar

FROM debian:bookworm-slim
RUN apt-get update && apt-get install -y ca-certificates && rm -rf /var/lib/apt/lists/*

apps/cellar/src/server/mod.rs +1 −0

        .route("/admin/analyze-image", post(admin::post_analyze_image))
        // Static assets
        .route("/static/{*path}", get(public::serve_static))
        .merge(andromeda_darkmatter_css::router::<Arc<AppState>>())
        .layer(DefaultBodyLimit::max(10 * 1024 * 1024))
        .with_state(state);


apps/cellar/static/styles.css +5 −170

@font-face {
  font-family: "Commit Mono";
  src: url("/static/fonts/CommitMono-400-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Commit Mono";
  src: url("/static/fonts/CommitMono-700-Regular.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Commit Mono", monospace, sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html {
  background: #121113;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
  min-height: 100vh;
  max-width: 700px;
  margin: auto;
  padding: 0 1rem;
}

@media (max-width: 480px) {
  body {
    padding: 1rem;
    gap: 1rem;
  }
}

a {
  color: #ffffff;
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
}

/* Header */

.header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-top: 2rem;
  border-bottom: 1px solid #333;
  padding-bottom: 1rem;
}
/* cellar — app-specific styles.
 * Shared reset / tokens / components come from /assets/darkmatter.css.
 */

.logo {
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 12px;
}

/* Main content */

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Forms */

.form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

label {
  font-size: 12px;
  opacity: 0.7;
}

input, textarea {
  background: #121113;
  color: #ffffff;
  border: 1px solid white;
  padding: 0.4rem 0.75rem;
  font-size: 16px;
  width: 100%;
  border-radius: 0;
textarea {
  min-height: 120px;
}

input[type="file"] {

  font-size: 12px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

button {
  background: #121113;
  color: #ffffff;
  padding: 0.4rem 0.75rem;
  border: 1px solid white;
  cursor: pointer;
  width: fit-content;
  font-size: 14px;
  border-radius: 0;
}

button:hover {
  opacity: 0.7;
}

button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Error */

.error {
  color: #ffffff;
  border-left: 2px solid #ffffff;
  padding-left: 0.5rem;
  font-size: 13px;
  opacity: 0.8;
}

.empty {
  opacity: 0.5;
  font-size: 12px;
}

/* Wine list (public) */

  display: flex;
  gap: 1rem;
  font-size: 12px;
}

.inline-form {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

.link-button:hover {
  opacity: 0.7;
}

/* Score inputs */

apps/cellar/templates/base.html +1 −0

  <meta property="og:image" content="/static/og.png">
  <meta property="og:type" content="website">
  <meta name="theme-color" content="#121113" />
  <link rel="stylesheet" href="/assets/darkmatter.css">
  <link rel="stylesheet" href="/static/styles.css">
  <link rel="alternate" type="application/rss+xml" title="Cellar RSS" href="/feed.xml">
</head>

apps/cellar/templates/login.html +1 −0

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cellar</title>
  <meta name="theme-color" content="#121113" />
  <link rel="stylesheet" href="/assets/darkmatter.css">
  <link rel="stylesheet" href="/static/styles.css">
</head>
<body>

apps/feeds/Cargo.toml +1 −0

tracing-subscriber = { workspace = true, features = ["env-filter"] }
andromeda-auth = { workspace = true }
andromeda-db = { workspace = true, features = ["axum", "session", "feeds"] }
andromeda-darkmatter-css = { workspace = true }
askama = "0.13"
reqwest = { version = "0.12", features = ["json"] }
feed-rs = "2"

apps/feeds/Dockerfile +6 −1

COPY Cargo.toml Cargo.lock .
COPY crates/auth/Cargo.toml crates/auth/
COPY crates/db/Cargo.toml crates/db/
COPY crates/darkmatter-css/Cargo.toml crates/darkmatter-css/
COPY apps/sipp/Cargo.toml apps/sipp/
COPY apps/feeds/Cargo.toml apps/feeds/
COPY apps/parcels/Cargo.toml apps/parcels/

# Create stubs for dependency caching
RUN mkdir -p crates/auth/src && echo '' > crates/auth/src/lib.rs \
    && mkdir -p crates/db/src && echo '' > crates/db/src/lib.rs \
    && mkdir -p crates/darkmatter-css/src && echo '' > crates/darkmatter-css/src/lib.rs \
    && mkdir -p crates/darkmatter-css/assets \
    && for app in sipp feeds parcels jotts og shrink cellar posts; do \
         mkdir -p apps/$app/src && echo 'fn main() {}' > apps/$app/src/main.rs; \
       done

# Copy real source
COPY crates/auth/src crates/auth/src
COPY crates/db/src crates/db/src
COPY crates/darkmatter-css/src crates/darkmatter-css/src
COPY crates/darkmatter-css/assets crates/darkmatter-css/assets
COPY apps/feeds/src apps/feeds/src
COPY apps/feeds/static apps/feeds/static
COPY apps/feeds/askama.toml apps/feeds/askama.toml

RUN touch apps/feeds/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs && cargo build --release -p feeds
RUN touch apps/feeds/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs crates/darkmatter-css/src/*.rs && cargo build --release -p feeds

FROM debian:bookworm-slim
RUN apt-get update && apt-get install -y ca-certificates && rm -rf /var/lib/apt/lists/*

apps/feeds/src/main.rs +2 −1

        .init();

    let db_path =
        std::env::var("FEEDS_DB_PATH").unwrap_or_else(|_| "/data/feeds.sqlite".to_string());
        std::env::var("FEEDS_DB_PATH").unwrap_or_else(|_| "feeds.sqlite".to_string());
    let conn = Connection::open(&db_path).expect("open sqlite");
    conn.execute_batch(SESSION_SCHEMA).expect("session schema");
    conn.execute_batch(fdb::FEEDS_SCHEMA).expect("feeds schema");

        .route("/static/{*path}", get(static_handler))
        .merge(admin_router)
        .merge(api_router)
        .merge(andromeda_darkmatter_css::router::<Arc<AppState>>())
        .with_state(state);

    let host = std::env::var("HOST").unwrap_or_else(|_| "0.0.0.0".to_string());

apps/feeds/src/templates/admin.html +7 −6

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#121113" />
    <link rel="stylesheet" href="/assets/darkmatter.css" />
    <link rel="stylesheet" href="/static/styles.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">

    </div>

    {% if let Some(msg) = success %}
    <p class="success-msg">{{ msg }}</p>
    <p class="success">{{ msg }}</p>
    {% endif %}
    {% if let Some(err) = error %}
    <p class="error-msg">{{ err }}</p>
    <p class="error">{{ err }}</p>
    {% endif %}

    <section class="admin-form">

            <a href="{% if let Some(url) = sub.site_url %}{{ url }}{% else %}{{ sub.feed_url }}{% endif %}" target="_blank" rel="noopener noreferrer">{{ sub.title }}</a>
          </h3>
          {% if let Some(last) = sub.last_fetched_at %}
          <p class="feed-meta"><span class="feed-date">last: {{ last }}</span>{% if let Some(err) = sub.last_error %} <span class="error-msg">· {{ err }}</span>{% endif %}</p>
          <p class="feed-meta"><span class="feed-date">last: {{ last }}</span>{% if let Some(err) = sub.last_error %} <span class="error">· {{ err }}</span>{% endif %}</p>
          {% endif %}
          <form method="POST" action="/admin/feeds/{{ sub.id }}/category" class="inline">
            <input type="text" name="category_name" placeholder="category" list="categories-list"

          const data = await resp.json();
          if (!resp.ok) {
            status.textContent = data.error || 'No feeds found';
            status.className = 'discover-status error-msg';
            status.className = 'discover-status error';
            status.style.display = 'block';
            return;
          }
          feedInput.value = data[0];
          status.textContent = data.length + ' feed(s) found';
          status.className = 'discover-status success-msg';
          status.className = 'discover-status success';
          status.style.display = 'block';
          if (data.length > 1) {
            results.style.display = 'flex';

          }
        } catch (e) {
          status.textContent = 'Request failed';
          status.className = 'discover-status error-msg';
          status.className = 'discover-status error';
          status.style.display = 'block';
        } finally {
          btn.disabled = false;

apps/feeds/src/templates/index.html +2 −1

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#121113" />
    <link rel="stylesheet" href="/assets/darkmatter.css" />
    <link rel="stylesheet" href="/static/styles.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">

    {% endif %}

    {% if let Some(err) = error %}
    <div id="error" style="color: #ff6b6b;">
    <div id="error" class="error">
      <p>{{ err }}</p>
    </div>
    {% elif items.is_empty() %}

apps/feeds/src/templates/login.html +2 −1

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#121113" />
    <link rel="stylesheet" href="/assets/darkmatter.css" />
    <link rel="stylesheet" href="/static/styles.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">

      <h1>FEEDS</h1>
    </a>
    {% if let Some(err) = error %}
    <p class="error-msg">{{ err }}</p>
    <p class="error">{{ err }}</p>
    {% endif %}

    <form class="admin-form" method="POST" action="/admin/login">

apps/feeds/static/fonts/CommitMono-400-Italic.otf (deleted) +0 −0

Binary file — no preview.

apps/feeds/static/fonts/CommitMono-400-Regular.otf (deleted) +0 −0

Binary file — no preview.

apps/feeds/static/fonts/CommitMono-700-Italic.otf (deleted) +0 −0

Binary file — no preview.

apps/feeds/static/fonts/CommitMono-700-Regular.otf (deleted) +0 −0

Binary file — no preview.

apps/feeds/static/styles.css +131 −262

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Commit Mono", monospace, sans-serif;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html {
	background: #121113;
	color: #ffffff;
}

html::-webkit-scrollbar {
	display: none;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	gap: 1.5rem;
	min-height: 100vh;
	max-width: 700px;
	margin: auto;
}
/* feeds — app-specific styles.
 * Shared reset / tokens / components come from /assets/darkmatter.css.
 */

.header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 2rem;
}
/* The logo wraps an h1 in feeds markup. */

.logo {
	text-decoration: none !important;
}

.links {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 12px;
	text-decoration: none;
.logo h1 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}

.about {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 14px;
	line-height: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 14px;
  line-height: 1.25rem;
}

button {
	background: #121113;
	color: #ffffff;
	padding: 6px;
	border: 1px solid white;
	cursor: pointer;
	width: fit-content;
}

a {
	background: #121113;
	color: #ffffff;
	text-decoration: none !important;
}

ul {
	margin-left: 1.5rem;
}

li {
	padding: 0.5rem 0;
}

code {
	background: #333;
	padding: 3px;
}
/* Feeds list */

.feeds-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feed-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid #333;
}

#feed-urls {
	font-size: 12px;
	color: #888;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid #333;
}

.feed-item:last-child {
	border-bottom: none;
  border-bottom: none;
}

.feed-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: #888;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  opacity: 0.5;
}

.feed-source {
	font-weight: 700;
}

.feed-date {
	color: #666;
  font-weight: 700;
}

.feed-title {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.feed-title a {
	text-decoration: none;
	color: #ffffff;
	transition: color 0.2s ease;
}

.feed-title a:hover {
	color: #ccc;
  text-decoration: none;
}

.feed-author {
	font-size: 12px;
	color: #888;
	font-style: italic;
  font-size: 12px;
  opacity: 0.5;
  font-style: italic;
}

.no-feeds {
	text-align: center;
	color: #888;
	padding: 2rem;
#feed-urls {
  font-size: 12px;
  opacity: 0.5;
}

.no-feeds,
#loading {
	text-align: center;
	color: #888;
	padding: 2rem;
  text-align: center;
  opacity: 0.5;
  padding: 2rem;
}

#error {
	text-align: center;
	padding: 2rem;
  text-align: center;
  padding: 2rem;
}

@media (max-width: 480px) {
	.feed-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.feed-title {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	body {
		padding: 1rem;
		gap: 1rem;
	}
}
/* Admin forms */

.admin-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.admin-form label {
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.05em;
.admin-form h3 {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.5;
}

.admin-form input {
	background: #1a1a1c;
	color: #ffffff;
	border: 1px solid #333;
	padding: 10px;
	font-family: "Commit Mono", monospace, sans-serif;
	font-size: 14px;
	outline: none;
.admin-notice,
.hint {
  font-size: 12px;
  opacity: 0.5;
  line-height: 1.4;
}

.admin-form input:focus {
	border-color: #666;
}

.error-msg {
	color: #ff6b6b;
	font-size: 14px;
}

.success-msg {
	color: #6bff8a;
	font-size: 14px;
}

.admin-notice {
	font-size: 14px;
	color: #888;
	line-height: 1.4;
}
/* Discover panel */

.discover-row {
	display: flex;
	gap: 0.5rem;
	width: 100%;
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.discover-row input {
	flex: 1;
	background: #1a1a1c;
	color: #ffffff;
	border: 1px solid #333;
	padding: 10px;
	font-family: "Commit Mono", monospace, sans-serif;
	font-size: 14px;
	outline: none;
}

.discover-row input:focus {
	border-color: #666;
  flex: 1;
}

.discover-status {
	font-size: 12px;
  font-size: 12px;
}

.discover-results {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

.discover-result-item {
	background: #1a1a1c;
	color: #888;
	border: 1px solid #333;
	padding: 8px 10px;
	font-size: 12px;
	text-align: left;
	cursor: pointer;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  background: #121113;
  color: #ffffff;
  border: 1px solid #333;
  padding: 8px 10px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.discover-result-item:hover {
	border-color: #666;
	color: #ffffff;
  border-color: #555;
  opacity: 1;
}

.discover-result-item.active {
	border-color: #6bff8a;
	color: #ffffff;
  border-color: #ffffff;
  opacity: 1;
}

/* Admin subs */

.admin-subs {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-subs h3 {
  font-size: 14px;
  opacity: 0.5;
  font-weight: 400;
}

.feed-item form.inline {
	display: flex;
	gap: 0.5rem;
	align-items: center;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.feed-item form.inline input {
	flex: 1;
	background: #1a1a1c;
	color: #ffffff;
	border: 1px solid #333;
	padding: 10px;
	font-family: "Commit Mono", monospace, sans-serif;
	font-size: 14px;
	outline: none;
  flex: 1;
}

.feed-item form.inline input:focus {
	border-color: #666;
}
/* Generic .danger on buttons (used in admin) */

button.loading {
	cursor: wait;
button.danger,
.btn.danger {
  opacity: 0.5;
}

.spinner::after {
	content: "⠋";
	display: inline-block;
	animation: braille-spin 0.8s steps(10) infinite;
button.danger:hover,
.btn.danger:hover {
  opacity: 0.3;
}

@keyframes braille-spin {
	0%   { content: "⠋"; }
	10%  { content: "⠙"; }
	20%  { content: "⠹"; }
	30%  { content: "⠸"; }
	40%  { content: "⠼"; }
	50%  { content: "⠴"; }
	60%  { content: "⠦"; }
	70%  { content: "⠧"; }
	80%  { content: "⠇"; }
	90%  { content: "⠏"; }
/* Category list (admin) */

.category-list {
  list-style: none;
  margin-left: 0;
}

.admin-subs h3 {
	font-size: 14px;
	color: #888;
	font-weight: 400;
.category-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
}

@font-face {
	font-family: "Commit Mono";
	src: url("fonts/CommitMono-400-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
}
@media (max-width: 480px) {
  .feed-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

@font-face {
	font-family: "Commit Mono";
	src: url("fonts/CommitMono-700-Regular.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
  .feed-title {
    font-size: 14px;
  }
}

apps/jotts/Cargo.toml +1 −0

tracing-subscriber = { workspace = true }
andromeda-auth = { workspace = true }
andromeda-db = { workspace = true, features = ["session", "axum"] }
andromeda-darkmatter-css = { workspace = true }
askama = "0.15"
askama_web = { version = "0.15", features = ["axum-0.8"] }
pulldown-cmark = "0.12"

apps/jotts/Dockerfile +6 −1

COPY Cargo.toml Cargo.lock .
COPY crates/auth/Cargo.toml crates/auth/
COPY crates/db/Cargo.toml crates/db/
COPY crates/darkmatter-css/Cargo.toml crates/darkmatter-css/
COPY apps/sipp/Cargo.toml apps/sipp/
COPY apps/feeds/Cargo.toml apps/feeds/
COPY apps/parcels/Cargo.toml apps/parcels/

# Create stubs for dependency caching
RUN mkdir -p crates/auth/src && echo '' > crates/auth/src/lib.rs \
    && mkdir -p crates/db/src && echo '' > crates/db/src/lib.rs \
    && mkdir -p crates/darkmatter-css/src && echo '' > crates/darkmatter-css/src/lib.rs \
    && mkdir -p crates/darkmatter-css/assets \
    && for app in sipp feeds parcels jotts og shrink cellar posts; do \
         mkdir -p apps/$app/src && echo 'fn main() {}' > apps/$app/src/main.rs; \
       done

# Copy real source
COPY crates/auth/src crates/auth/src
COPY crates/db/src crates/db/src
COPY crates/darkmatter-css/src crates/darkmatter-css/src
COPY crates/darkmatter-css/assets crates/darkmatter-css/assets
COPY apps/jotts/src apps/jotts/src
COPY apps/jotts/static apps/jotts/static
COPY apps/jotts/templates apps/jotts/templates

RUN touch apps/jotts/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs && cargo build --release -p jotts
RUN touch apps/jotts/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs crates/darkmatter-css/src/*.rs && cargo build --release -p jotts

FROM debian:bookworm-slim
COPY --from=builder /app/target/release/jotts /usr/local/bin/jotts

apps/jotts/src/server.rs +1 −0

        // Static assets
        .route("/static/{*path}", get(serve_static))
        .merge(api_router)
        .merge(andromeda_darkmatter_css::router::<Arc<AppState>>())
        .with_state(state);

    let addr = format!("{}:{}", host, port);

apps/jotts/static/styles.css +3 −213

@font-face {
  font-family: "Commit Mono";
  src: url("/static/fonts/CommitMono-400-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Commit Mono";
  src: url("/static/fonts/CommitMono-700-Regular.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Commit Mono", monospace, sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html {
  background: #121113;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
  min-height: 100vh;
  max-width: 700px;
  margin: auto;
  padding: 0 1rem;
}

@media (max-width: 480px) {
  body {
    padding: 1rem;
    gap: 1rem;
  }
}

a {
  color: #ffffff;
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
}

/* Header */

.header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-top: 2rem;
  border-bottom: 1px solid #333;
  padding-bottom: 1rem;
}

.logo {
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 12px;
}

/* Main content */

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Forms */

.form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

label {
  font-size: 12px;
  opacity: 0.7;
}

input, textarea {
  background: #121113;
  color: #ffffff;
  border: 1px solid white;
  padding: 0.4rem 0.75rem;
  font-size: 16px;
  width: 100%;
  border-radius: 0;
}

textarea {
  min-height: 400px;
  resize: vertical;
}

button {
  background: #121113;
  color: #ffffff;
  padding: 0.4rem 0.75rem;
  border: 1px solid white;
  cursor: pointer;
  width: fit-content;
  font-size: 14px;
  border-radius: 0;
}

button:hover {
  opacity: 0.7;
}

/* Error */

.error {
  color: #ffffff;
  border-left: 2px solid #ffffff;
  padding-left: 0.5rem;
  font-size: 13px;
  opacity: 0.8;
}

/* Note list */
/* jotts — app-specific styles.
 * Shared reset / tokens / components come from /assets/darkmatter.css.
 */

.note-list {
  display: flex;

  opacity: 0.5;
}

.empty {
  opacity: 0.5;
  font-size: 12px;
}

/* Note view */

.note-header {

  font-size: 12px;
}

.inline-form {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

.link-button:hover {
  opacity: 0.7;
}

/* Markdown rendered content */

.markdown-body {

  margin-bottom: 0.25rem;
}

.markdown-body code {
  background: #1e1c1f;
  padding: 2px 4px;
  font-size: 13px;
}

.markdown-body pre {
  background: #1e1c1f;
  padding: 12px;
  overflow-x: auto;
  margin-bottom: 0.75rem;
  border: 1px solid #333;
}

.markdown-body pre code {
  background: none;
  padding: 0;
}

.markdown-body blockquote {

}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
}



.markdown-body th {
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.5;
  font-size: 12px;
}

.markdown-body hr {

}

.markdown-body input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 1px solid white;
  border-radius: 0;
  padding: 0;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  cursor: pointer;
}

.markdown-body input[type="checkbox"]:checked::after {
  content: '✔︎';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: white;
  line-height: 1;
}
}

apps/jotts/templates/base.html +1 −0

  <meta property="og:image" content="/static/og.png">
  <meta property="og:type" content="website">
  <meta name="theme-color" content="#121113" />
  <link rel="stylesheet" href="/assets/darkmatter.css">
  <link rel="stylesheet" href="/static/styles.css">
</head>
<body>

apps/jotts/templates/login.html +1 −0

  <meta property="og:image" content="/static/og.png">
  <meta property="og:type" content="website">
  <meta name="theme-color" content="#121113" />
  <link rel="stylesheet" href="/assets/darkmatter.css">
  <link rel="stylesheet" href="/static/styles.css">
</head>
<body>

apps/og/Cargo.toml +1 −0

dotenvy = { workspace = true }
tracing = { workspace = true }
tracing-subscriber = { workspace = true }
andromeda-darkmatter-css = { workspace = true }
askama = "0.13"
reqwest = { version = "0.12", features = ["rustls-tls"], default-features = false }
scraper = "0.22"

apps/og/Dockerfile +6 −1

COPY Cargo.toml Cargo.lock .
COPY crates/auth/Cargo.toml crates/auth/
COPY crates/db/Cargo.toml crates/db/
COPY crates/darkmatter-css/Cargo.toml crates/darkmatter-css/
COPY apps/sipp/Cargo.toml apps/sipp/
COPY apps/feeds/Cargo.toml apps/feeds/
COPY apps/parcels/Cargo.toml apps/parcels/

# Create stubs for dependency caching
RUN mkdir -p crates/auth/src && echo '' > crates/auth/src/lib.rs \
    && mkdir -p crates/db/src && echo '' > crates/db/src/lib.rs \
    && mkdir -p crates/darkmatter-css/src && echo '' > crates/darkmatter-css/src/lib.rs \
    && mkdir -p crates/darkmatter-css/assets \
    && for app in sipp feeds parcels jotts og shrink cellar posts; do \
         mkdir -p apps/$app/src && echo 'fn main() {}' > apps/$app/src/main.rs; \
       done

RUN cargo build --release -p og

# Copy real source
COPY crates/darkmatter-css/src crates/darkmatter-css/src
COPY crates/darkmatter-css/assets crates/darkmatter-css/assets
COPY apps/og/src apps/og/src
COPY apps/og/templates apps/og/templates
COPY apps/og/static apps/og/static

RUN touch apps/og/src/*.rs && cargo build --release -p og
RUN touch apps/og/src/*.rs crates/darkmatter-css/src/*.rs && cargo build --release -p og

FROM debian:bookworm-slim
RUN apt-get update && apt-get install -y ca-certificates && rm -rf /var/lib/apt/lists/*

apps/og/src/server.rs +2 −1

    let app = Router::new()
        .route("/", get(get_index))
        .route("/check", post(post_check))
        .route("/static/{*path}", get(static_handler));
        .route("/static/{*path}", get(static_handler))
        .merge(andromeda_darkmatter_css::router::<()>());

    let port = std::env::var("PORT").unwrap_or_else(|_| "3000".to_string());
    let addr = format!("0.0.0.0:{port}");

apps/og/static/styles.css +6 −120

@font-face {
    font-family: "Commit Mono";
    src: url("/static/fonts/CommitMono-400-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Commit Mono";
    src: url("/static/fonts/CommitMono-700-Regular.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Commit Mono", monospace, sans-serif;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html {
    background: #121113;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 1.5rem;
    min-height: 100vh;
    max-width: 700px;
    margin: auto;
    padding: 0 1rem 6rem;
}

a {
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}

/* === HEADER === */

.header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 2rem;
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
}

.logo {
    font-size: 28px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

/* === INDEX PAGE === */
/* og — app-specific styles.
 * Shared reset / tokens / components come from /assets/darkmatter.css.
 */

.index-container {
    width: 100%;


.check-form input {
    flex: 1;
    background: #121113;
    color: #ffffff;
    border: 1px solid white;
    padding: 0.4rem 0.75rem;
    font-size: 14px;
    border-radius: 0;
    outline: none;
    width: 100%;
}

.check-form input::placeholder {

}

.check-form button {
    background: #121113;
    color: #ffffff;
    padding: 0.4rem 0.75rem;
    border: 1px solid white;
    cursor: pointer;
    width: fit-content;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0;
}

.check-form button:hover {
    opacity: 0.7;
}

/* === RESULTS PAGE === */
/* Results page */

.results-container {
    display: flex;

    word-break: break-all;
}

label, .label {
.label {
    display: block;
    font-size: 12px;
    opacity: 0.7;

.results-meta span:last-child {
    opacity: 0.5;
    font-size: 12px;
}

/* === ERROR === */

.error {
    border-left: 2px solid #ffffff;
    padding-left: 0.5rem;
    font-size: 13px;
    opacity: 0.8;
}

.error h2 {

    margin-bottom: 0.25rem;
}

/* === PREVIEWS === */

.preview-section {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: auto;
}

/* === TAGS === */

.tag-section {
    display: flex;

    font-size: 14px;
}

/* === BACK LINK === */

.back-link {
    display: inline-block;
    font-size: 12px;

    opacity: 0.7;
}

/* === RESPONSIVE === */

@media (max-width: 480px) {
    body {
        padding: 1rem;
        gap: 1rem;
    }

.tag-item {
    .tag-item {
        flex-direction: column;
        gap: 0.25rem;
    }

apps/og/templates/base.html +1 −0

    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
    <link rel="manifest" href="/static/site.webmanifest">
    <link rel="stylesheet" href="/assets/darkmatter.css">
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>

apps/parcels/Cargo.toml +1 −0

tracing-subscriber = { workspace = true, features = ["env-filter"] }
andromeda-auth = { workspace = true }
andromeda-db = { workspace = true, features = ["session"] }
andromeda-darkmatter-css = { workspace = true }
rusqlite = { workspace = true }
reqwest = { version = "0.12", features = ["json"] }
askama = { version = "0.12", features = ["with-axum"] }

apps/parcels/Dockerfile +6 −1

COPY Cargo.toml Cargo.lock .
COPY crates/auth/Cargo.toml crates/auth/
COPY crates/db/Cargo.toml crates/db/
COPY crates/darkmatter-css/Cargo.toml crates/darkmatter-css/
COPY apps/sipp/Cargo.toml apps/sipp/
COPY apps/feeds/Cargo.toml apps/feeds/
COPY apps/parcels/Cargo.toml apps/parcels/

# Create stubs for dependency caching
RUN mkdir -p crates/auth/src && echo '' > crates/auth/src/lib.rs \
    && mkdir -p crates/db/src && echo '' > crates/db/src/lib.rs \
    && mkdir -p crates/darkmatter-css/src && echo '' > crates/darkmatter-css/src/lib.rs \
    && mkdir -p crates/darkmatter-css/assets \
    && for app in sipp feeds parcels jotts og shrink cellar posts; do \
         mkdir -p apps/$app/src && echo 'fn main() {}' > apps/$app/src/main.rs; \
       done

# Copy real source
COPY crates/auth/src crates/auth/src
COPY crates/db/src crates/db/src
COPY crates/darkmatter-css/src crates/darkmatter-css/src
COPY crates/darkmatter-css/assets crates/darkmatter-css/assets
COPY apps/parcels/src apps/parcels/src
COPY apps/parcels/templates apps/parcels/templates
COPY apps/parcels/static apps/parcels/static

RUN touch apps/parcels/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs && cargo build --release -p parcels
RUN touch apps/parcels/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs crates/darkmatter-css/src/*.rs && cargo build --release -p parcels

FROM debian:bookworm-slim
RUN apt-get update && apt-get install -y ca-certificates && rm -rf /var/lib/apt/lists/*

apps/parcels/src/main.rs +1 −0

        .route("/packages/{id}/refresh", post(post_refresh_package))
        .route("/packages/{id}/delete", post(post_delete_package))
        .nest_service("/static", ServeDir::new("static"))
        .merge(andromeda_darkmatter_css::router::<Arc<AppState>>())
        .with_state(state);

    let listener = tokio::net::TcpListener::bind(&bind_addr)

apps/parcels/static/styles.css (added) +126 −0

1	+	/* parcels — app-specific styles.
2	+	* Shared reset / tokens / components come from /assets/darkmatter.css.
3	+	*/
4	+
5	+	.null {
6	+	opacity: 0.3;
7	+	}
8	+
9	+	.parcel-list {
10	+	display: flex;
11	+	flex-direction: column;
12	+	width: 100%;
13	+	}
14	+
15	+	.parcel-list a {
16	+	text-decoration: none;
17	+	}
18	+
19	+	.parcel-item {
20	+	display: flex;
21	+	flex-direction: column;
22	+	gap: 0.25rem;
23	+	padding: 0.75rem 0;
24	+	border-bottom: 1px solid #333;
25	+	}
26	+
27	+	.parcel-item:last-child {
28	+	border-bottom: none;
29	+	}
30	+
31	+	.parcel-label {
32	+	font-size: 16px;
33	+	}
34	+
35	+	.parcel-tracking {
36	+	font-size: 12px;
37	+	opacity: 0.5;
38	+	}
39	+
40	+	.parcel-meta {
41	+	font-size: 12px;
42	+	opacity: 0.5;
43	+	font-style: italic;
44	+	}
45	+
46	+	.detail-header {
47	+	display: flex;
48	+	justify-content: space-between;
49	+	align-items: baseline;
50	+	margin-bottom: 0.25rem;
51	+	}
52	+
53	+	.detail-title {
54	+	font-size: 16px;
55	+	font-weight: 700;
56	+	}
57	+
58	+	.detail-tracking {
59	+	opacity: 0.6;
60	+	margin-bottom: 1rem;
61	+	}
62	+
63	+	.detail-table {
64	+	width: auto;
65	+	margin-bottom: 1.5rem;
66	+	}
67	+
68	+	.detail-table th {
69	+	padding-right: 2rem;
70	+	}
71	+
72	+	.event-section-header {
73	+	opacity: 0.5;
74	+	font-size: 12px;
75	+	text-transform: uppercase;
76	+	margin-bottom: 1rem;
77	+	border-bottom: 1px solid #333;
78	+	padding-bottom: 0.5rem;
79	+	}
80	+
81	+	.event-item {
82	+	padding: 0.75rem 0;
83	+	border-bottom: 1px solid #1e1c1f;
84	+	}
85	+
86	+	.event-timestamp {
87	+	opacity: 0.5;
88	+	font-size: 12px;
89	+	margin-bottom: 0.2rem;
90	+	}
91	+
92	+	.event-type {
93	+	font-weight: 700;
94	+	}
95	+
96	+	.event-location {
97	+	opacity: 0.6;
98	+	font-size: 13px;
99	+	}
100	+
101	+	.empty-note {
102	+	opacity: 0.4;
103	+	}
104	+
105	+	.login-wrap {
106	+	max-width: 320px;
107	+	margin: 4rem auto;
108	+	width: 100%;
109	+	}
110	+
111	+	.login-wrap h1 {
112	+	font-size: 24px;
113	+	margin-bottom: 2rem;
114	+	font-weight: 700;
115	+	}
116	+
117	+	.form-group {
118	+	margin-bottom: 1rem;
119	+	}
120	+
121	+	.form-group label {
122	+	display: block;
123	+	margin-bottom: 0.25rem;
124	+	opacity: 0.7;
125	+	font-size: 12px;
126	+	}

apps/parcels/templates/add.html +11 −6

{% block title %}PARCELS — add package{% endblock %}
{% block content %}
<div class="header">
  <h1><a href="/" style="text-decoration:none;">PARCELS</a></h1>
  <a href="/" class="logo">PARCELS</a>
  <nav class="links">
    <a href="/">← back</a>
  </nav>
</div>
{% if let Some(err) = error %}
<div class="error">{{ err }}</div>
<p class="error">{{ err }}</p>
{% endif %}
<form method="POST" action="/packages" style="max-width: 400px;">
  <div class="form-group">
<form class="form" method="POST" action="/packages">
  <div class="form-field">
    <label for="tracking_number">tracking number</label>
    <input type="text" id="tracking_number" name="tracking_number" required autofocus
           placeholder="e.g. 9400111899223397992148">
  </div>
  <div class="form-group">
  <div class="form-field">
    <label for="label">label</label>
    <input type="text" id="label" name="label" required placeholder="e.g. Amazon order">
  </div>
  <button type="submit">add package</button>
  <div class="form-actions">
    <button type="submit">add package</button>
  </div>
</form>
{% endblock %}

apps/parcels/templates/base.html +4 −88

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#121113" />
  <title>{% block title %}Parcels{% endblock %}</title>
  <link rel="stylesheet" href="/assets/darkmatter.css">
  <link rel="stylesheet" href="/static/styles.css">
  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">

  <meta property="og:title" content="PARCELS">
  <meta property="og:image" content="/static/og.png">
  <meta property="og:type" content="website">
  <style>
    @font-face {
      font-family: 'CommitMono';
      src: url('/static/fonts/CommitMono-400-Regular.otf') format('opentype');
      font-weight: 400;
    }
    @font-face {
      font-family: 'CommitMono';
      src: url('/static/fonts/CommitMono-700-Regular.otf') format('opentype');
      font-weight: 700;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: #121113;
      color: #ffffff;
      font-family: 'CommitMono', monospace;
      font-size: 14px;
      line-height: 1.6;
      min-height: 100vh;
      max-width: 700px;
      margin: auto;
      padding: 0 1rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .container { padding: 0; }
    a { color: #ffffff; text-decoration: none; }
    a:hover { opacity: 0.7; }
    input, button {
      font-family: 'CommitMono', monospace;
      font-size: 14px;
      background: #121113;
      color: #ffffff;
      border: 1px solid #ffffff;
      padding: 0.4rem 0.75rem;
      border-radius: 0;
      cursor: pointer;
    }
    button:hover { opacity: 0.7; }
    input { width: 100%; }
    .error {
      color: #ffffff;
      border-left: 2px solid #ffffff;
      padding-left: 0.5rem;
      font-size: 13px;
      opacity: 0.8;
    }
    table { width: 100%; border-collapse: collapse; }
    th, td {
      text-align: left;
      padding: 0.4rem 0.5rem;
      border-bottom: 1px solid #333;
      vertical-align: top;
    }
    th { opacity: 0.5; font-weight: 400; font-size: 12px; text-transform: uppercase; }
    .header {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 2rem;
      border-bottom: 1px solid #333;
      padding-bottom: 1rem;
    }
    .links { display: flex; gap: 0.75rem; font-size: 12px; }
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; margin-bottom: 0.25rem; opacity: 0.7; font-size: 12px; }
    .null { opacity: 0.3; }
    .status-delivered { /* no color accent per design */ }
    .status-alert { opacity: 0.8; }
    .actions { display: flex; gap: 0.5rem; }
    .parcel-list { display: flex; flex-direction: column; width: 100%; }
    .parcel-list a { text-decoration: none; }
    .parcel-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid #333;
    }
    .parcel-item:last-child { border-bottom: none; }
    .parcel-label { font-size: 16px; color: #fff; }
    .parcel-tracking { font-size: 12px; color: #888; }
    .parcel-meta { font-size: 12px; color: #888; font-style: italic; }
  </style>
</head>
<body>
  <div class="container">
    {% block content %}{% endblock %}
  </div>
  {% block content %}{% endblock %}
</body>
</html>

apps/parcels/templates/detail.html +17 −20

{% block title %}PARCELS — {% if let Some(label) = package.label %}{{ label }}{% else %}{{ package.tracking_number }}{% endif %}{% endblock %}
{% block content %}
<div class="header">
  <h1><a href="/" style="text-decoration:none;">PARCELS</a></h1>
  <nav>
  <a href="/" class="logo">PARCELS</a>
  <nav class="links">
    <a href="/">← back</a>
  </nav>
</div>
{% if let Some(err) = error %}
<div class="error">{{ err }}</div>
<p class="error">{{ err }}</p>
{% endif %}

<div style="margin-bottom: 2rem;">
  <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
<div>
  <div class="detail-header">
    {% if let Some(label) = package.label %}
    <div style="font-size: 16px; font-weight: 700;">{{ label }}</div>
    <div class="detail-title">{{ label }}</div>
    {% endif %}
    <form method="POST" action="/packages/{{ package.id }}/delete"
    <form class="inline-form" method="POST" action="/packages/{{ package.id }}/delete"
          onsubmit="return confirm('Delete this package?')">
      <button type="submit" style="font-size: 12px; opacity: 0.6; border-color: #555; margin-top: 0.5rem;">delete</button>
      <button type="submit" class="link-button danger">delete</button>
    </form>
  </div>
  <div style="opacity: 0.6; margin-bottom: 1rem;">{{ package.tracking_number }}</div>
  <div class="detail-tracking">{{ package.tracking_number }}</div>

  <table style="width: auto; margin-bottom: 1.5rem;">
  <table class="detail-table">
    <tr>
      <th style="padding-right: 2rem;">status</th>
      <th>status</th>
      <td>{% if let Some(s) = package.status %}{{ s }}{% else %}<span class="null">—</span>{% endif %}</td>
    </tr>
    <tr>

      <td>{% if let Some(d) = package.expected_delivery %}{{ d }}{% else %}<span class="null">—</span>{% endif %}</td>
    </tr>
  </table>

</div>

{% if !events.is_empty() %}
<div>
  <div style="opacity: 0.5; font-size: 12px; text-transform: uppercase; margin-bottom: 1rem; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">
    event history
  </div>
  <div class="event-section-header">event history</div>
  {% for event in events %}
  <div style="padding: 0.75rem 0; border-bottom: 1px solid #1e1c1f;">
    <div style="opacity: 0.5; font-size: 12px; margin-bottom: 0.2rem;">
  <div class="event-item">
    <div class="event-timestamp">
      {% if let Some(ts) = event.event_timestamp %}{{ ts }}{% else %}<span class="null">—</span>{% endif %}
    </div>
    <div style="font-weight: 700;">
    <div class="event-type">
      {% if let Some(et) = event.event_type %}{{ et }}{% else %}<span class="null">—</span>{% endif %}
    </div>
    {% if event.event_city.is_some() || event.event_state.is_some() %}
    <div style="opacity: 0.6; font-size: 13px;">
    <div class="event-location">
      {% if let Some(city) = event.event_city %}{{ city }}{% endif %}{% if event.event_city.is_some() && event.event_state.is_some() %}, {% endif %}{% if let Some(state) = event.event_state %}{{ state }}{% endif %}
    </div>
    {% endif %}

  {% endfor %}
</div>
{% else %}
<p style="opacity: 0.4;">no events yet. click refresh to load tracking history.</p>
<p class="empty">no events yet. click refresh to load tracking history.</p>
{% endif %}
{% endblock %}

apps/parcels/templates/index.html +6 −5

{% block title %}PARCELS{% endblock %}
{% block content %}
<div class="header">
  <h1>PARCELS</h1>
  <div class="links">
  <a href="/" class="logo">PARCELS</a>
  <nav class="links">
    <a href="/packages/add">add package</a>
  </div>
    <a href="/logout">logout</a>
  </nav>
</div>
{% if let Some(err) = error %}
<div class="error">{{ err }}</div>
<p class="error">{{ err }}</p>
{% endif %}
{% if packages.is_empty() %}
<p style="opacity: 0.4;">no packages. <a href="/packages/add">add one</a></p>
<p class="empty">no packages. <a href="/packages/add">add one</a></p>
{% else %}
<div class="parcel-list">
  {% for pkg in packages %}

apps/parcels/templates/login.html +6 −6

{% extends "base.html" %}
{% block title %}PARCELS — login{% endblock %}
{% block content %}
<div style="max-width: 320px; margin: 4rem auto;">
  <h1 style="font-size: 24px; margin-bottom: 2rem; font-weight: 700;">PARCELS</h1>
<div class="login-wrap">
  <h1>PARCELS</h1>
  {% if let Some(err) = error %}
  <div class="error">{{ err }}</div>
  <p class="error">{{ err }}</p>
  {% endif %}
  <form method="POST" action="/login">
    <div class="form-group">
  <form class="form" method="POST" action="/login">
    <div class="form-field">
      <label for="password">password</label>
      <input type="password" id="password" name="password" autofocus required>
    </div>
    <button type="submit" style="width: 100%; margin-top: 0.5rem;">sign in</button>
    <button type="submit">sign in</button>
  </form>
</div>
{% endblock %}

apps/posts/Cargo.toml +1 −0

tracing-subscriber = { workspace = true }
andromeda-auth = { workspace = true }
andromeda-db = { workspace = true, features = ["session"] }
andromeda-darkmatter-css = { workspace = true }
serde_rusqlite = "0.41"
askama = "0.15"
askama_web = { version = "0.15", features = ["axum-0.8"] }

apps/posts/Dockerfile +6 −1

COPY Cargo.toml Cargo.lock .
COPY crates/auth/Cargo.toml crates/auth/
COPY crates/db/Cargo.toml crates/db/
COPY crates/darkmatter-css/Cargo.toml crates/darkmatter-css/
COPY apps/sipp/Cargo.toml apps/sipp/
COPY apps/feeds/Cargo.toml apps/feeds/
COPY apps/parcels/Cargo.toml apps/parcels/

# Create stubs for dependency caching
RUN mkdir -p crates/auth/src && echo '' > crates/auth/src/lib.rs \
    && mkdir -p crates/db/src && echo '' > crates/db/src/lib.rs \
    && mkdir -p crates/darkmatter-css/src && echo '' > crates/darkmatter-css/src/lib.rs \
    && mkdir -p crates/darkmatter-css/assets \
    && for app in sipp feeds parcels jotts og shrink cellar posts; do \
         mkdir -p apps/$app/src && echo 'fn main() {}' > apps/$app/src/main.rs; \
       done

# Copy real source
COPY crates/auth/src crates/auth/src
COPY crates/db/src crates/db/src
COPY crates/darkmatter-css/src crates/darkmatter-css/src
COPY crates/darkmatter-css/assets crates/darkmatter-css/assets
COPY apps/posts/src apps/posts/src
COPY apps/posts/static apps/posts/static
COPY apps/posts/templates apps/posts/templates

RUN touch apps/posts/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs && cargo build --release -p posts
RUN touch apps/posts/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs crates/darkmatter-css/src/*.rs && cargo build --release -p posts

FROM debian:bookworm-slim
COPY --from=builder /app/target/release/posts /usr/local/bin/posts

apps/posts/src/server/mod.rs +2 −0

        .route("/files/{filename}", get(public::serve_uploaded_file))
        // Static assets
        .route("/static/{*path}", get(public::serve_static))
        // Shared Darkmatter CSS assets + /darkmatter gallery
        .merge(andromeda_darkmatter_css::router::<Arc<AppState>>())
        // Fallback
        .fallback(get(public::fallback_handler))
        .with_state(state)

apps/posts/static/fonts/CommitMono-400-Regular.otf → crates/darkmatter-css/assets/fonts/CommitMono-400-Regular.otf +0 −0

Binary file — no preview.

apps/posts/static/fonts/CommitMono-700-Regular.otf → crates/darkmatter-css/assets/fonts/CommitMono-700-Regular.otf +0 −0

Binary file — no preview.

apps/posts/static/styles.css +34 −535

@font-face {
  font-family: "Commit Mono";
  src: url("/static/fonts/CommitMono-400-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Commit Mono";
  src: url("/static/fonts/CommitMono-700-Regular.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Commit Mono", monospace, sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html {
  background: #121113;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
  min-height: 100vh;
  max-width: 700px;
  margin: auto;
  padding: 0 1rem 4rem;
}

@media (max-width: 480px) {
  body {
    padding: 1rem;
    gap: 1rem;
  }
}

a {
  color: #ffffff;
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
}
/* posts — app-specific styles.
 * Shared reset / tokens / components come from /assets/darkmatter.css.
 */

/* Header */

.header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-top: 2rem;
  border-bottom: 1px solid #333;
  padding-bottom: 1rem;
}

.logo {
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 12px;
}

/* Main content */

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Forms */

.form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

label {
  font-size: 12px;
  opacity: 0.7;
}

input, textarea, select {
  background: #121113;
  color: #ffffff;
  border: 1px solid white;
  padding: 0.4rem 0.75rem;
  font-size: 16px;
  width: 100%;
  border-radius: 0;
}

textarea {
  min-height: 400px;
  resize: vertical;
}
/* Textarea variants */

textarea.post-content {
  min-height: 500px;


textarea.attributes-textarea {
  min-height: 80px;
}

.nav-links-input {
  min-height: 40px;
  height: 40px;
}

.available-fields {

  opacity: 0.6;
}

button, .btn {
  background: #121113;
  color: #ffffff;
  padding: 0.4rem 0.75rem;
  border: 1px solid white;
  cursor: pointer;
  width: fit-content;
  font-size: 14px;
  border-radius: 0;
  text-decoration: none;
  display: inline-block;
}

button:hover, .btn:hover {
  opacity: 0.7;
}

/* Error / Success */

.error {
  color: #ffffff;
  border-left: 2px solid #ffffff;
  padding-left: 0.5rem;
  font-size: 13px;
  opacity: 0.8;
}

.success {
  color: #ffffff;
  border-left: 2px solid #555;
  padding-left: 0.5rem;
  font-size: 13px;
  opacity: 0.7;
}

.empty {
  opacity: 0.5;
  font-size: 12px;
}

/* Post list (public) */

.post-list {

  gap: 0.25rem;
}

.post-item-enhanced .post-item-info {
  gap: 0.25rem;
}

.post-title {
  font-size: 16px;
}

  opacity: 0.5;
}

/* Tags */
.post-excerpt {
  font-size: 12px;
  opacity: 0.6;
  line-height: 1.4;
}

.post-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.tag {
  font-size: 11px;
  opacity: 0.5;
  background: #1e1c1f;
  padding: 1px 6px;
  border: 1px solid #333;
}

/* Post header (public single) */

  letter-spacing: -0.5px;
}

/* Intro */

.intro {
  padding-bottom: 1rem;
  border-bottom: 1px solid #333;
}

/* Inline form */

.inline-form {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

.link-button:hover {
  opacity: 0.7;
}

.link-button.danger {
  opacity: 0.5;
}

.link-button.danger:hover {
  opacity: 0.3;
}

/* Admin toolbar */

.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.admin-toolbar h2 {
  font-size: 18px;
  font-weight: 700;
}

/* Admin list */

.admin-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.admin-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #333;
  gap: 1rem;
}

.admin-list-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.admin-list-title {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-list-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.admin-list-date {
  font-size: 11px;
  opacity: 0.4;
}

.admin-list-actions {
  display: flex;
  gap: 1rem;
  font-size: 12px;
  flex-shrink: 0;
}

/* Status badges */

.status-badge {
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid #333;
}

.status-published {
  opacity: 1;
  border-color: #555;
}

.status-draft {
  opacity: 0.4;
}

/* Form layout */

.form-row {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.form-row .form-field {
  flex: 1;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.checkbox-field {
  justify-content: flex-end;
}

.checkbox-field label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  opacity: 1;
  cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid white;
  border-radius: 0;
  cursor: pointer;
  position: relative;
}

.checkbox-field input[type="checkbox"]:checked::after {
  content: '✔︎';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: white;
  line-height: 1;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 480px) {
  .form-row {
    flex-direction: column;
  }

  .admin-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Markdown rendered content */

.markdown-body {

  margin-bottom: 0.25rem;
}

.markdown-body code {
  background: #1e1c1f;
  padding: 2px 4px;
  font-size: 13px;
}

.markdown-body pre {
  background: #1e1c1f;
  padding: 12px;
  overflow-x: auto;
  margin-bottom: 0.75rem;
  border: 1px solid #333;
}

.markdown-body pre code {
  background: none;
  padding: 0;
}

.markdown-body blockquote {

}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
}

.markdown-body th,
.markdown-body td {
  border: 1px solid #333;
  padding: 6px;
  text-align: left;
}

.markdown-body th {
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.5;
  font-size: 12px;
}

.markdown-body hr {

}

.markdown-body input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 1px solid white;
  border-radius: 0;
  padding: 0;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  cursor: pointer;
}

.markdown-body input[type="checkbox"]:checked::after {
  content: '✔︎';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: white;
  line-height: 1;
}

/* File upload input */

input[type="file"] {
  background: #121113;
  color: #ffffff;
  border: 1px solid white;
  padding: 0.4rem 0.75rem;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  background: #121113;
  color: #ffffff;
  border: 1px solid #555;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-family: "Commit Mono", monospace;
  font-size: 12px;
  margin-right: 0.5rem;
}
/* Footnotes */

.post-excerpt {
.markdown-body .footnote-definition {
  font-size: 12px;
  opacity: 0.6;
  line-height: 1.4;
}

.post-item-enhanced .post-item-info {
  gap: 0.25rem;
}

.nav-links-input {
  min-height: 40px;
  height: 40px;
}

.switch-row {
  opacity: 0.7;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.switch-label {
  font-size: 14px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
.markdown-body .footnote-definition-label {
  font-size: 11px;
  opacity: 0.5;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
.markdown-body .footnote-definition p {
  margin-bottom: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #333;
  border-radius: 20px;
  transition: background 0.2s;
}

.switch-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: #888;
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.switch input:checked + .switch-slider {
  background: #555;
.markdown-body sup.footnote-reference a {
  font-size: 11px;
  text-decoration: none;
  opacity: 0.6;
}

.switch input:checked + .switch-slider::before {
  transform: translateX(16px);
  background: #ffffff;
.markdown-body sup.footnote-reference a:hover {
  opacity: 1;
}

/* File thumbnails */

  flex-shrink: 0;
}

/* Footer */

.footer {
  width: 100%;
  border-top: 1px solid #333;
  padding-top: 1rem;
  margin-top: auto;
  display: flex;
  justify-content: center;
}
/* RSS link in footer */

.rss-link {
  display: flex;

.rss-link:hover {
  opacity: 0.8;
}

/* Export buttons */

a.btn {
  display: inline-block;
  background: #121113;
  color: #ffffff;
  border: 1px solid white;
  padding: 0.4rem 0.75rem;
  font-size: 14px;
  font-family: "Commit Mono", monospace;
  text-decoration: none;
  cursor: pointer;
}

a.btn:hover {
  opacity: 0.7;
}

/* Footnotes */

.markdown-body .footnote-definition {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.markdown-body .footnote-definition-label {
  font-size: 11px;
  opacity: 0.5;
  flex-shrink: 0;
}

.markdown-body .footnote-definition p {
  margin-bottom: 0;
}

.markdown-body sup.footnote-reference a {
  font-size: 11px;
  text-decoration: none;
  opacity: 0.6;
}

.markdown-body sup.footnote-reference a:hover {
  opacity: 1;
}

.hidden {
  display: none;
}

apps/posts/templates/admin_base.html +1 −0

  <title>{% block title %}Admin{% endblock %}</title>
  <link rel="icon" href="/static/favicons/favicon.ico">
  <meta name="theme-color" content="#121113" />
  <link rel="stylesheet" href="/assets/darkmatter.css">
  <link rel="stylesheet" href="/static/styles.css">
</head>
<body>

apps/posts/templates/base.html +1 −0

  {% endif %}
  <meta name="theme-color" content="#121113" />
  {% block meta %}{% endblock %}
  <link rel="stylesheet" href="/assets/darkmatter.css">
  <link rel="stylesheet" href="/static/styles.css">
  <link rel="stylesheet" href="/custom-styles.css">
</head>

apps/posts/templates/login.html +1 −0

  <title>Login</title>
  <link rel="icon" href="/static/favicons/favicon.ico">
  <meta name="theme-color" content="#121113" />
  <link rel="stylesheet" href="/assets/darkmatter.css">
  <link rel="stylesheet" href="/static/styles.css">
</head>
<body>

apps/shrink/Cargo.toml +1 −0

tower-http = { workspace = true, features = ["fs"] }
tracing = { workspace = true }
tracing-subscriber = { workspace = true }
andromeda-darkmatter-css = { workspace = true }
askama = "0.15"
image = "0.25"
img-parts = "0.3"

apps/shrink/Dockerfile +6 −1

COPY Cargo.toml Cargo.lock .
COPY crates/auth/Cargo.toml crates/auth/
COPY crates/db/Cargo.toml crates/db/
COPY crates/darkmatter-css/Cargo.toml crates/darkmatter-css/
COPY apps/sipp/Cargo.toml apps/sipp/
COPY apps/feeds/Cargo.toml apps/feeds/
COPY apps/parcels/Cargo.toml apps/parcels/

# Create stubs for dependency caching
RUN mkdir -p crates/auth/src && echo '' > crates/auth/src/lib.rs \
    && mkdir -p crates/db/src && echo '' > crates/db/src/lib.rs \
    && mkdir -p crates/darkmatter-css/src && echo '' > crates/darkmatter-css/src/lib.rs \
    && mkdir -p crates/darkmatter-css/assets \
    && for app in sipp feeds parcels jotts og shrink cellar posts; do \
         mkdir -p apps/$app/src && echo 'fn main() {}' > apps/$app/src/main.rs; \
       done

RUN cargo build --release -p shrink

# Copy real source
COPY crates/darkmatter-css/src crates/darkmatter-css/src
COPY crates/darkmatter-css/assets crates/darkmatter-css/assets
COPY apps/shrink/src apps/shrink/src
COPY apps/shrink/templates apps/shrink/templates
COPY apps/shrink/static apps/shrink/static

RUN touch apps/shrink/src/*.rs && cargo build --release -p shrink
RUN touch apps/shrink/src/*.rs crates/darkmatter-css/src/*.rs && cargo build --release -p shrink

FROM debian:bookworm-slim
WORKDIR /app

apps/shrink/src/server.rs +2 −1

        .route("/", get(get_index))
        .route("/compress", post(post_compress))
        .layer(DefaultBodyLimit::max(20 * 1024 * 1024))
        .nest_service("/static", ServeDir::new("static"));
        .nest_service("/static", ServeDir::new("static"))
        .merge(andromeda_darkmatter_css::router::<()>());

    let addr = format!("{}:{}", host, port);
    tracing::info!("Listening on {}", addr);

apps/shrink/static/styles.css +14 −125

@font-face {
    font-family: "Commit Mono";
    src: url("/static/fonts/CommitMono-400-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Commit Mono";
    src: url("/static/fonts/CommitMono-700-Regular.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: #121113;
    color: #ffffff;
    font-family: "Commit Mono", monospace, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 100vh;
}

::-webkit-scrollbar {
    display: none;
}

header {
    margin-top: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
}

.logo {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.05em;
}

main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* shrink — app-specific styles.
 * Shared reset / tokens / components come from /assets/darkmatter.css.
 */

/* Drop Zone */
#drop-zone {

    text-align: right;
}

#quality-note {
    font-size: 12px;
    opacity: 0.5;
    text-transform: uppercase;
    min-height: 1.2em;
}

/* Number Inputs */
input[type="number"] {
    background: #121113;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0;
    padding: 0.4rem 0.75rem;
    font-family: "Commit Mono", monospace, sans-serif;
    font-size: 14px;
    width: 90px;
    outline: none;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

input[type="number"]:hover,
input[type="number"]:focus {
    border-color: #ffffff;
}

.dimension-sep {

    opacity: 0.3;
}

/* Select */
select {
    background: #121113;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0;
    padding: 0.4rem 0.75rem;
    font-family: "Commit Mono", monospace, sans-serif;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

select:hover,
select:focus {
    border-color: #ffffff;
}

/* Buttons */
button {
    background: #121113;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 0;
    padding: 0.6rem 1.5rem;
    font-family: "Commit Mono", monospace, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.15s;
}

button:hover {
    opacity: 0.7;
}

button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Results */
#result-section {
    display: none;

    text-decoration: none;
    align-self: flex-start;
}

button {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.6rem 1.5rem;
}

button:disabled {
    opacity: 0.3;
    cursor: default;
}

apps/shrink/templates/base.html +3 −2

    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
    <link rel="manifest" href="/static/site.webmanifest">
    <link rel="stylesheet" href="/assets/darkmatter.css">
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <header>
    <div class="header">
        <a href="/" class="logo">SHRINK</a>
    </header>
    </div>
    <main>
        {% block content %}{% endblock %}
    </main>

apps/sipp/Cargo.toml +1 −0

rusqlite = { workspace = true }
andromeda-db = { workspace = true, features = ["session"] }
andromeda-auth = { workspace = true }
andromeda-darkmatter-css = { workspace = true }
askama = "0.15.4"
askama_web = { version = "0.15.1", features = ["axum-0.8"] }
ratatui = "0.30"

apps/sipp/Dockerfile +6 −1

COPY Cargo.toml Cargo.lock .
COPY crates/auth/Cargo.toml crates/auth/
COPY crates/db/Cargo.toml crates/db/
COPY crates/darkmatter-css/Cargo.toml crates/darkmatter-css/
COPY apps/sipp/Cargo.toml apps/sipp/
COPY apps/feeds/Cargo.toml apps/feeds/
COPY apps/parcels/Cargo.toml apps/parcels/

# Create stubs for dependency caching
RUN mkdir -p crates/auth/src && echo '' > crates/auth/src/lib.rs \
    && mkdir -p crates/db/src && echo '' > crates/db/src/lib.rs \
    && mkdir -p crates/darkmatter-css/src && echo '' > crates/darkmatter-css/src/lib.rs \
    && mkdir -p crates/darkmatter-css/assets \
    && for app in sipp feeds parcels jotts og shrink cellar posts; do \
         mkdir -p apps/$app/src && echo 'fn main() {}' > apps/$app/src/main.rs; \
       done

# Copy real source
COPY crates/auth/src crates/auth/src
COPY crates/db/src crates/db/src
COPY crates/darkmatter-css/src crates/darkmatter-css/src
COPY crates/darkmatter-css/assets crates/darkmatter-css/assets
COPY apps/sipp/src apps/sipp/src
COPY apps/sipp/static apps/sipp/static
COPY apps/sipp/templates apps/sipp/templates

RUN touch apps/sipp/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs && cargo build --release -p sipp-so
RUN touch apps/sipp/src/*.rs crates/auth/src/*.rs crates/db/src/*.rs crates/darkmatter-css/src/*.rs && cargo build --release -p sipp-so

FROM debian:bookworm-slim
COPY --from=builder /app/target/release/sipp /usr/local/bin/sipp

apps/sipp/src/server.rs +1 −0

        .route("/snippets", post(create_snippet))
        .merge(api_routes)
        .route("/static/{*path}", get(serve_static))
        .merge(andromeda_darkmatter_css::router::<AppState>())
        .with_state(state);

    let addr = format!("{}:{}", host, port);

apps/sipp/static/fonts/CommitMono-400-Italic.otf (deleted) +0 −0

Binary file — no preview.

apps/sipp/static/fonts/CommitMono-400-Regular.otf (deleted) +0 −0

Binary file — no preview.

apps/sipp/static/fonts/CommitMono-700-Italic.otf (deleted) +0 −0

Binary file — no preview.

apps/sipp/static/fonts/CommitMono-700-Regular.otf (deleted) +0 −0

Binary file — no preview.

apps/sipp/static/styles.css +49 −247

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Commit Mono", monospace, sans-serif;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html {
	background: #121113;
	color: #ffffff;
	font-size: 14px;
	line-height: 1.6;
}

a {
	color: #ffffff;
	text-decoration: none;
}

a:hover {
	opacity: 0.7;
}

html::-webkit-scrollbar {
	display: none;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	gap: 1.5rem;
	min-height: 100vh;
	max-width: 700px;
	margin: auto;
	padding: 0 1rem 4rem;
}
/* sipp — app-specific styles.
 * Shared reset / tokens / components come from /assets/darkmatter.css.
 */

.header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 2rem;
}
/* Logo wraps an h1 in sipp markup. */

.logo {
	text-decoration: none !important;
.logo h1 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}

.links {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 12px;
	text-decoration: none;
}

.links .inline-form {
	display: inline;
	margin: 0;
	padding: 0;
}

.links .link-button {
	font-size: 12px;
}
/* Snippet icon links */

.icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #878787;
	width: 24px;
	height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #878787;
  width: 24px;
  height: 24px;
}

.icon svg {
	width: 24px;
	height: 24px;
  width: 24px;
  height: 24px;
}

.icon svg path {
	fill: #878787;
  fill: #878787;
}

.icon:hover svg path {
	fill: white;
  fill: #ffffff;
}

/* Create-snippet form */

#snippetForm {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

input, textarea, select {
	background: #121113;
	color: #ffffff;
	border: 1px solid white;
	padding: 0.4rem 0.75rem;
	font-size: 16px;
	width: 100%;
	border-radius: 0;
#snippetName {
  font-size: 14px;
  opacity: 0.7;
}

textarea {
	min-height: 400px;
	resize: vertical;
}
/* Highlighted snippet viewer */

.code-container {
	border: 1px solid white;
	height: 400px;
	overflow: auto;
  border: 1px solid #ffffff;
  height: 400px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.code-container pre {
	background-color: #121113 !important;
	padding: 6px;
	margin: 0;
	min-height: 100%;
	font-size: 13px;
	line-height: 1.4;
}

button, .btn {
	background: #121113;
	color: #ffffff;
	padding: 0.4rem 0.75rem;
	border: 1px solid white;
	cursor: pointer;
	width: fit-content;
	font-size: 14px;
	border-radius: 0;
	text-decoration: none;
	display: inline-block;
}

button:hover, .btn:hover {
	opacity: 0.7;
}

@media (max-width: 480px) {
	body {
		padding: 1rem;
		gap: 1rem;
	}
}

.empty {
	opacity: 0.5;
	font-size: 12px;
}

.admin-list {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.admin-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #333;
	gap: 1rem;
}

.admin-list-info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.admin-list-title {
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.admin-list-meta {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.admin-list-date {
	font-size: 11px;
	opacity: 0.4;
}

.admin-list-actions {
	display: flex;
	gap: 1rem;
	font-size: 12px;
	flex-shrink: 0;
}

.inline-form {
	display: inline;
	margin: 0;
	padding: 0;
}

.link-button {
	background: none;
	border: none;
	color: #ffffff;
	cursor: pointer;
	font-size: 12px;
	padding: 0;
	font-family: inherit;
}

.link-button:hover {
	opacity: 0.7;
}

.link-button.danger {
	opacity: 0.5;
}

.link-button.danger:hover {
	opacity: 0.3;
}

@media (max-width: 480px) {
	.admin-list-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

main {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
  background-color: #121113 !important;
  padding: 6px;
  margin: 0;
  min-height: 100%;
  font-size: 13px;
  line-height: 1.4;
  border: none;
}

label {
	font-size: 12px;
	opacity: 0.7;
}
/* Viewer action row */

.error {
	color: #ffffff;
	border-left: 2px solid #ffffff;
	padding-left: 0.5rem;
	font-size: 13px;
	opacity: 0.8;
.button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@font-face {
	font-family: "Commit Mono";
	src: url("/static/fonts/CommitMono-400-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
}
/* Snippet page header variant (plain <a class="header">) */

@font-face {
	font-family: "Commit Mono";
	src: url("/static/fonts/CommitMono-700-Regular.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
.nav {
  width: 100%;
  margin-top: 2rem;
}

apps/sipp/templates/admin.html +1 −0

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#121113" />
    <link rel="stylesheet" href="/assets/darkmatter.css" />
    <link rel="stylesheet" href="/static/styles.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">

apps/sipp/templates/index.html +1 −0

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#121113" />
    <link rel="stylesheet" href="/assets/darkmatter.css" />
    <link rel="stylesheet" href="/static/styles.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">

apps/sipp/templates/login.html +1 −0

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#121113" />
    <link rel="stylesheet" href="/assets/darkmatter.css" />
    <link rel="stylesheet" href="/static/styles.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">

apps/sipp/templates/snippet.html +1 −0

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/assets/darkmatter.css" />
    <link rel="stylesheet" href="/static/styles.css" />
    <meta name="theme-color" content="#121113" />
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">

crates/darkmatter-css/Cargo.toml (added) +8 −0

1	+	[package]
2	+	name = "andromeda-darkmatter-css"
3	+	version = "0.1.0"
4	+	edition = "2024"
5	+
6	+	[dependencies]
7	+	axum = { workspace = true }
8	+	rust-embed = { workspace = true }

crates/darkmatter-css/assets/darkmatter.css (added) +623 −0

1	+	/* Darkmatter — canonical CSS for Andromeda apps.
2	+	* Source of truth for reset, tokens, and shared components.
3	+	* Docs: /darkmatter
4	+	*/
5	+
6	+	@font-face {
7	+	font-family: "Commit Mono";
8	+	src: url("/assets/fonts/CommitMono-400-Regular.otf") format("opentype");
9	+	font-weight: 400;
10	+	font-style: normal;
11	+	font-display: swap;
12	+	}
13	+
14	+	@font-face {
15	+	font-family: "Commit Mono";
16	+	src: url("/assets/fonts/CommitMono-700-Regular.otf") format("opentype");
17	+	font-weight: 700;
18	+	font-style: normal;
19	+	font-display: swap;
20	+	}
21	+
22	+	/* ── Reset + webkit hardening ─────────────────────────────────────── */
23	+
24	+	*,
25	+	*::before,
26	+	*::after {
27	+	padding: 0;
28	+	margin: 0;
29	+	box-sizing: border-box;
30	+	font-family: "Commit Mono", monospace, sans-serif;
31	+	-webkit-tap-highlight-color: transparent;
32	+	}
33	+
34	+	* {
35	+	scrollbar-width: none;
36	+	-ms-overflow-style: none;
37	+	}
38	+
39	+	html {
40	+	background: #121113;
41	+	color: #ffffff;
42	+	font-size: 14px;
43	+	line-height: 1.6;
44	+	-webkit-text-size-adjust: 100%;
45	+	text-size-adjust: 100%;
46	+	}
47	+
48	+	html::-webkit-scrollbar {
49	+	display: none;
50	+	}
51	+
52	+	body {
53	+	display: flex;
54	+	flex-direction: column;
55	+	justify-content: start;
56	+	align-items: start;
57	+	gap: 1.5rem;
58	+	min-height: 100vh;
59	+	max-width: 700px;
60	+	margin: auto;
61	+	padding: 0 1rem 4rem;
62	+	}
63	+
64	+	@media (max-width: 480px) {
65	+	body {
66	+	padding: 1rem;
67	+	gap: 1rem;
68	+	}
69	+	}
70	+
71	+	/* ── Links ────────────────────────────────────────────────────────── */
72	+
73	+	a {
74	+	color: #ffffff;
75	+	text-decoration: none;
76	+	touch-action: manipulation;
77	+	}
78	+
79	+	a:hover {
80	+	opacity: 0.7;
81	+	}
82	+
83	+	/* ── Header / nav ─────────────────────────────────────────────────── */
84	+
85	+	.header {
86	+	display: flex;
87	+	flex-direction: column;
88	+	gap: 0.5rem;
89	+	width: 100%;
90	+	margin-top: 2rem;
91	+	border-bottom: 1px solid #333;
92	+	padding-bottom: 1rem;
93	+	}
94	+
95	+	.logo {
96	+	font-size: 28px;
97	+	font-weight: 700;
98	+	text-decoration: none;
99	+	text-transform: uppercase;
100	+	}
101	+
102	+	.links {
103	+	display: flex;
104	+	align-items: center;
105	+	gap: 0.75rem;
106	+	font-size: 12px;
107	+	}
108	+
109	+	/* ── Main ─────────────────────────────────────────────────────────── */
110	+
111	+	main {
112	+	width: 100%;
113	+	display: flex;
114	+	flex-direction: column;
115	+	gap: 1rem;
116	+	}
117	+
118	+	/* ── Forms ────────────────────────────────────────────────────────── */
119	+
120	+	.form {
121	+	display: flex;
122	+	flex-direction: column;
123	+	gap: 0.5rem;
124	+	width: 100%;
125	+	}
126	+
127	+	.form-row {
128	+	display: flex;
129	+	gap: 0.5rem;
130	+	width: 100%;
131	+	}
132	+
133	+	.form-row .form-field {
134	+	flex: 1;
135	+	}
136	+
137	+	.form-field {
138	+	display: flex;
139	+	flex-direction: column;
140	+	gap: 0.25rem;
141	+	}
142	+
143	+	.form-actions {
144	+	display: flex;
145	+	gap: 0.5rem;
146	+	}
147	+
148	+	@media (max-width: 480px) {
149	+	.form-row {
150	+	flex-direction: column;
151	+	}
152	+	}
153	+
154	+	label {
155	+	font-size: 12px;
156	+	opacity: 0.7;
157	+	}
158	+
159	+	input,
160	+	textarea,
161	+	select {
162	+	background: #121113;
163	+	color: #ffffff;
164	+	border: 1px solid #ffffff;
165	+	padding: 0.4rem 0.75rem;
166	+	font-size: 16px; /* 16px prevents iOS focus zoom */
167	+	width: 100%;
168	+	border-radius: 0;
169	+	-webkit-appearance: none;
170	+	appearance: none;
171	+	outline: none;
172	+	}
173	+
174	+	input:focus,
175	+	textarea:focus,
176	+	select:focus {
177	+	outline: none;
178	+	}
179	+
180	+	textarea {
181	+	min-height: 400px;
182	+	resize: vertical;
183	+	}
184	+
185	+	select {
186	+	background-image: none;
187	+	padding-right: 0.75rem;
188	+	}
189	+
190	+	input[type="file"] {
191	+	cursor: pointer;
192	+	font-size: 14px;
193	+	}
194	+
195	+	input[type="file"]::-webkit-file-upload-button,
196	+	input[type="file"]::file-selector-button {
197	+	background: #121113;
198	+	color: #ffffff;
199	+	border: 1px solid #555;
200	+	padding: 0.25rem 0.5rem;
201	+	cursor: pointer;
202	+	font-family: "Commit Mono", monospace;
203	+	font-size: 12px;
204	+	margin-right: 0.5rem;
205	+	border-radius: 0;
206	+	}
207	+
208	+	input[type="search"]::-webkit-search-decoration,
209	+	input[type="search"]::-webkit-search-cancel-button,
210	+	input[type="search"]::-webkit-search-results-button,
211	+	input[type="search"]::-webkit-search-results-decoration {
212	+	-webkit-appearance: none;
213	+	}
214	+
215	+	input[type="checkbox"],
216	+	input[type="radio"] {
217	+	-webkit-appearance: none;
218	+	appearance: none;
219	+	width: 16px;
220	+	height: 16px;
221	+	background: transparent;
222	+	border: 1px solid #ffffff;
223	+	border-radius: 0;
224	+	padding: 0;
225	+	cursor: pointer;
226	+	position: relative;
227	+	flex-shrink: 0;
228	+	touch-action: manipulation;
229	+	}
230	+
231	+	input[type="radio"] {
232	+	border-radius: 50%;
233	+	}
234	+
235	+	input[type="checkbox"]:checked::after {
236	+	content: '✔︎';
237	+	position: absolute;
238	+	top: 50%;
239	+	left: 50%;
240	+	transform: translate(-50%, -50%);
241	+	font-size: 12px;
242	+	color: #ffffff;
243	+	line-height: 1;
244	+	}
245	+
246	+	input[type="radio"]:checked::after {
247	+	content: '';
248	+	position: absolute;
249	+	top: 50%;
250	+	left: 50%;
251	+	width: 8px;
252	+	height: 8px;
253	+	border-radius: 50%;
254	+	background: #ffffff;
255	+	transform: translate(-50%, -50%);
256	+	}
257	+
258	+	.checkbox-field {
259	+	justify-content: flex-end;
260	+	}
261	+
262	+	.checkbox-field label {
263	+	display: flex;
264	+	align-items: center;
265	+	gap: 0.5rem;
266	+	font-size: 14px;
267	+	opacity: 1;
268	+	cursor: pointer;
269	+	}
270	+
271	+	/* Switch */
272	+
273	+	.switch-row {
274	+	display: flex;
275	+	align-items: center;
276	+	gap: 0.5rem;
277	+	}
278	+
279	+	.switch-label {
280	+	font-size: 14px;
281	+	}
282	+
283	+	.switch {
284	+	position: relative;
285	+	display: inline-block;
286	+	width: 36px;
287	+	height: 20px;
288	+	flex-shrink: 0;
289	+	}
290	+
291	+	.switch input {
292	+	opacity: 0;
293	+	width: 0;
294	+	height: 0;
295	+	}
296	+
297	+	.switch-slider {
298	+	position: absolute;
299	+	cursor: pointer;
300	+	top: 0;
301	+	left: 0;
302	+	right: 0;
303	+	bottom: 0;
304	+	background: #333;
305	+	border-radius: 20px;
306	+	transition: background 0.2s;
307	+	}
308	+
309	+	.switch-slider::before {
310	+	content: "";
311	+	position: absolute;
312	+	height: 14px;
313	+	width: 14px;
314	+	left: 3px;
315	+	bottom: 3px;
316	+	background: #888;
317	+	border-radius: 50%;
318	+	transition: transform 0.2s, background 0.2s;
319	+	}
320	+
321	+	.switch input:checked + .switch-slider {
322	+	background: #555;
323	+	}
324	+
325	+	.switch input:checked + .switch-slider::before {
326	+	transform: translateX(16px);
327	+	background: #ffffff;
328	+	}
329	+
330	+	/* ── Buttons ──────────────────────────────────────────────────────── */
331	+
332	+	button,
333	+	.btn {
334	+	background: #121113;
335	+	color: #ffffff;
336	+	padding: 0.2rem 0.75rem;
337	+	border: 1px solid #ffffff;
338	+	cursor: pointer;
339	+	width: fit-content;
340	+	font-size: 14px;
341	+	line-height: 1.4;
342	+	border-radius: 0;
343	+	-webkit-appearance: none;
344	+	appearance: none;
345	+	text-decoration: none;
346	+	display: inline-block;
347	+	touch-action: manipulation;
348	+	}
349	+
350	+	button:hover,
351	+	.btn:hover {
352	+	opacity: 0.7;
353	+	}
354	+
355	+	button.loading {
356	+	cursor: wait;
357	+	}
358	+
359	+	.link-button {
360	+	background: none;
361	+	border: none;
362	+	color: #ffffff;
363	+	cursor: pointer;
364	+	font-size: 12px;
365	+	padding: 0;
366	+	font-family: inherit;
367	+	-webkit-appearance: none;
368	+	appearance: none;
369	+	}
370	+
371	+	.link-button:hover {
372	+	opacity: 0.7;
373	+	}
374	+
375	+	.link-button.danger {
376	+	opacity: 0.5;
377	+	}
378	+
379	+	.link-button.danger:hover {
380	+	opacity: 0.3;
381	+	}
382	+
383	+	.inline-form {
384	+	display: inline;
385	+	margin: 0;
386	+	padding: 0;
387	+	}
388	+
389	+	/* ── Feedback ─────────────────────────────────────────────────────── */
390	+
391	+	.error {
392	+	color: #ffffff;
393	+	border-left: 2px solid #ffffff;
394	+	padding-left: 0.5rem;
395	+	font-size: 13px;
396	+	opacity: 0.8;
397	+	}
398	+
399	+	.success {
400	+	color: #ffffff;
401	+	border-left: 2px solid #555;
402	+	padding-left: 0.5rem;
403	+	font-size: 13px;
404	+	opacity: 0.7;
405	+	}
406	+
407	+	.empty {
408	+	opacity: 0.5;
409	+	font-size: 12px;
410	+	}
411	+
412	+	/* ── Item list (generic stacked list pattern) ────────────────────── */
413	+
414	+	.item-list {
415	+	display: flex;
416	+	flex-direction: column;
417	+	width: 100%;
418	+	}
419	+
420	+	.item {
421	+	display: flex;
422	+	flex-direction: column;
423	+	gap: 0.25rem;
424	+	padding: 0.75rem 0;
425	+	border-bottom: 1px solid #333;
426	+	}
427	+
428	+	.item:hover {
429	+	opacity: 0.7;
430	+	}
431	+
432	+	.item-title {
433	+	font-size: 16px;
434	+	}
435	+
436	+	.item-meta {
437	+	font-size: 12px;
438	+	opacity: 0.5;
439	+	}
440	+
441	+	/* ── Admin list (horizontal row w/ actions) ──────────────────────── */
442	+
443	+	.admin-list {
444	+	display: flex;
445	+	flex-direction: column;
446	+	width: 100%;
447	+	}
448	+
449	+	.admin-list-item {
450	+	display: flex;
451	+	justify-content: space-between;
452	+	align-items: center;
453	+	padding: 8px 0;
454	+	border-bottom: 1px solid #333;
455	+	gap: 1rem;
456	+	}
457	+
458	+	.admin-list-info {
459	+	display: flex;
460	+	flex-direction: column;
461	+	gap: 0.2rem;
462	+	min-width: 0;
463	+	}
464	+
465	+	.admin-list-title {
466	+	font-size: 15px;
467	+	white-space: nowrap;
468	+	overflow: hidden;
469	+	text-overflow: ellipsis;
470	+	}
471	+
472	+	.admin-list-meta {
473	+	display: flex;
474	+	gap: 0.75rem;
475	+	align-items: center;
476	+	}
477	+
478	+	.admin-list-date {
479	+	font-size: 11px;
480	+	opacity: 0.4;
481	+	}
482	+
483	+	.admin-list-actions {
484	+	display: flex;
485	+	gap: 1rem;
486	+	font-size: 12px;
487	+	flex-shrink: 0;
488	+	}
489	+
490	+	.admin-toolbar {
491	+	display: flex;
492	+	justify-content: space-between;
493	+	align-items: center;
494	+	width: 100%;
495	+	}
496	+
497	+	.admin-toolbar h2 {
498	+	font-size: 18px;
499	+	font-weight: 700;
500	+	}
501	+
502	+	@media (max-width: 480px) {
503	+	.admin-list-item {
504	+	flex-direction: column;
505	+	align-items: flex-start;
506	+	gap: 0.5rem;
507	+	}
508	+	}
509	+
510	+	/* ── Tags / badges ───────────────────────────────────────────────── */
511	+
512	+	.tag {
513	+	font-size: 11px;
514	+	opacity: 0.5;
515	+	background: #1e1c1f;
516	+	padding: 1px 6px;
517	+	border: 1px solid #333;
518	+	}
519	+
520	+	.status-badge {
521	+	font-size: 11px;
522	+	padding: 1px 6px;
523	+	border: 1px solid #333;
524	+	}
525	+
526	+	.status-published {
527	+	opacity: 1;
528	+	border-color: #555;
529	+	}
530	+
531	+	.status-draft {
532	+	opacity: 0.4;
533	+	}
534	+
535	+	/* ── Tables ──────────────────────────────────────────────────────── */
536	+
537	+	table {
538	+	width: 100%;
539	+	border-collapse: collapse;
540	+	}
541	+
542	+	th {
543	+	opacity: 0.5;
544	+	font-weight: 400;
545	+	font-size: 12px;
546	+	text-transform: uppercase;
547	+	text-align: left;
548	+	padding: 6px;
549	+	border-bottom: 1px solid #333;
550	+	}
551	+
552	+	td {
553	+	padding: 6px;
554	+	border-bottom: 1px solid #333;
555	+	}
556	+
557	+	/* ── Spinner (braille) ────────────────────────────────────────────── */
558	+
559	+	.spinner {
560	+	margin-left: 0.6rem;
561	+	}
562	+
563	+	.spinner::after {
564	+	content: "⠋";
565	+	display: inline-block;
566	+	animation: braille-spin 0.8s steps(10) infinite;
567	+	}
568	+
569	+	@keyframes braille-spin {
570	+	0% { content: "⠋"; }
571	+	10% { content: "⠙"; }
572	+	20% { content: "⠹"; }
573	+	30% { content: "⠸"; }
574	+	40% { content: "⠼"; }
575	+	50% { content: "⠴"; }
576	+	60% { content: "⠦"; }
577	+	70% { content: "⠧"; }
578	+	80% { content: "⠇"; }
579	+	90% { content: "⠏"; }
580	+	}
581	+
582	+	/* ── Inline code ─────────────────────────────────────────────────── */
583	+
584	+	code {
585	+	background: #1e1c1f;
586	+	padding: 2px 4px;
587	+	font-size: 13px;
588	+	}
589	+
590	+	pre {
591	+	background: #1e1c1f;
592	+	padding: 12px;
593	+	overflow-x: auto;
594	+	border: 1px solid #333;
595	+	-webkit-overflow-scrolling: touch;
596	+	}
597	+
598	+	pre code {
599	+	background: none;
600	+	padding: 0;
601	+	}
602	+
603	+	/* ── Footer ──────────────────────────────────────────────────────── */
604	+
605	+	.footer {
606	+	width: 100%;
607	+	border-top: 1px solid #333;
608	+	padding-top: 1rem;
609	+	margin-top: auto;
610	+	display: flex;
611	+	justify-content: center;
612	+	}
613	+
614	+	/* ── Utility ─────────────────────────────────────────────────────── */
615	+
616	+	.hidden {
617	+	display: none;
618	+	}
619	+
620	+	.scroll-x {
621	+	overflow-x: auto;
622	+	-webkit-overflow-scrolling: touch;
623	+	}

crates/darkmatter-css/assets/index.html (added) +249 −0

1	+	<!DOCTYPE html>
2	+	<html lang="en">
3	+	<head>
4	+	<meta charset="UTF-8">
5	+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	+	<meta name="theme-color" content="#121113">
7	+	<title>Darkmatter — Gallery</title>
8	+	<link rel="stylesheet" href="/assets/darkmatter.css">
9	+	<style>
10	+	.section { width: 100%; border-bottom: 1px solid #333; padding-bottom: 2rem; }
11	+	.section h2 { font-size: 16px; margin-bottom: 0.5rem; }
12	+	.section p.desc { font-size: 12px; opacity: 0.5; margin-bottom: 0.75rem; }
13	+	.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
14	+	.swatch { width: 40px; height: 24px; border: 1px solid #333; }
15	+	.opacity-scale { display: flex; flex-direction: column; gap: 0.25rem; }
16	+	</style>
17	+	</head>
18	+	<body>
19	+	<header class="header">
20	+	<a href="/darkmatter" class="logo">DARKMATTER</a>
21	+	<nav class="links">
22	+	<a href="#reset">reset</a>
23	+	<a href="#typography">typography</a>
24	+	<a href="#buttons">buttons</a>
25	+	<a href="#forms">forms</a>
26	+	<a href="#feedback">feedback</a>
27	+	<a href="#lists">lists</a>
28	+	<a href="#tags">tags</a>
29	+	<a href="#table">table</a>
30	+	<a href="#code">code</a>
31	+	</nav>
32	+	</header>
33	+
34	+	<main>
35	+	<section class="section" id="reset">
36	+	<h2>Palette</h2>
37	+	<p class="desc">Background <code>#121113</code>, foreground <code>#ffffff</code>, grays <code>#1e1c1f</code> / <code>#333</code> / <code>#555</code>. No accent colors.</p>
38	+	<div class="row">
39	+	<div class="swatch" style="background:#121113"></div>
40	+	<div class="swatch" style="background:#1e1c1f"></div>
41	+	<div class="swatch" style="background:#333"></div>
42	+	<div class="swatch" style="background:#555"></div>
43	+	<div class="swatch" style="background:#ffffff"></div>
44	+	</div>
45	+	</section>
46	+
47	+	<section class="section" id="typography">
48	+	<h2>Typography</h2>
49	+	<p class="desc">Commit Mono. Hierarchy by opacity, not gray hex.</p>
50	+	<div class="opacity-scale">
51	+	<div>Primary text — opacity 1.0</div>
52	+	<div style="opacity: 0.7">Secondary text — opacity 0.7 (labels, blockquotes)</div>
53	+	<div style="opacity: 0.5">Tertiary text — opacity 0.5 (metadata, dates, table headers)</div>
54	+	<div style="opacity: 0.3">Muted text — opacity 0.3 (null, placeholder)</div>
55	+	</div>
56	+	<div class="row" style="margin-top: 0.75rem">
57	+	<span style="font-size: 28px; font-weight: 700; text-transform: uppercase">LOGO 28</span>
58	+	<span style="font-size: 18px">h1 18</span>
59	+	<span style="font-size: 16px">h2 / title 16</span>
60	+	<span style="font-size: 14px">body 14</span>
61	+	<span style="font-size: 12px">meta 12</span>
62	+	<span style="font-size: 11px">tag 11</span>
63	+	</div>
64	+	</section>
65	+
66	+	<section class="section" id="buttons">
67	+	<h2>Buttons & links</h2>
68	+	<p class="desc"><code>button</code>, <code>.btn</code>, <code>.link-button</code>, <code>.link-button.danger</code>, <code>.spinner</code>.</p>
69	+	<div class="row">
70	+	<button>Submit</button>
71	+	<a href="#" class="btn">Link as button</a>
72	+	<button class="loading">Saving<span class="spinner"></span></button>
73	+	<button class="link-button">edit</button>
74	+	<button class="link-button danger">delete</button>
75	+	<a href="#">plain link</a>
76	+	</div>
77	+	</section>
78	+
79	+	<section class="section" id="forms">
80	+	<h2>Form controls</h2>
81	+	<p class="desc">Inputs use 16px font-size to prevent iOS focus zoom. All <code>-webkit-appearance: none</code> to kill default iOS chrome.</p>
82	+	<form class="form" onsubmit="event.preventDefault()">
83	+	<div class="form-field">
84	+	<label for="demo-text">Text input</label>
85	+	<input id="demo-text" type="text" placeholder="placeholder">
86	+	</div>
87	+	<div class="form-field">
88	+	<label for="demo-search">Search</label>
89	+	<input id="demo-search" type="search" placeholder="search...">
90	+	</div>
91	+	<div class="form-row">
92	+	<div class="form-field">
93	+	<label for="demo-a">Split field A</label>
94	+	<input id="demo-a" type="text">
95	+	</div>
96	+	<div class="form-field">
97	+	<label for="demo-b">Split field B</label>
98	+	<input id="demo-b" type="text">
99	+	</div>
100	+	</div>
101	+	<div class="form-field">
102	+	<label for="demo-select">Select</label>
103	+	<select id="demo-select">
104	+	<option>one</option>
105	+	<option>two</option>
106	+	</select>
107	+	</div>
108	+	<div class="form-field">
109	+	<label for="demo-textarea">Textarea</label>
110	+	<textarea id="demo-textarea" style="min-height: 120px">multiline input</textarea>
111	+	</div>
112	+	<div class="form-field">
113	+	<label for="demo-file">File upload</label>
114	+	<input id="demo-file" type="file">
115	+	</div>
116	+	<div class="form-field checkbox-field">
117	+	<label>
118	+	<input type="checkbox" checked>
119	+	Checkbox (checked)
120	+	</label>
121	+	<label>
122	+	<input type="checkbox">
123	+	Checkbox (unchecked)
124	+	</label>
125	+	</div>
126	+	<div class="form-field">
127	+	<label>
128	+	<input type="radio" name="demo-radio" checked> Option A
129	+	</label>
130	+	<label>
131	+	<input type="radio" name="demo-radio"> Option B
132	+	</label>
133	+	</div>
134	+	<div class="switch-row">
135	+	<label class="switch">
136	+	<input type="checkbox" checked>
137	+	<span class="switch-slider"></span>
138	+	</label>
139	+	<span class="switch-label">Switch toggle</span>
140	+	</div>
141	+	<div class="form-actions">
142	+	<button type="submit">Save</button>
143	+	<button type="button" class="link-button danger">Cancel</button>
144	+	</div>
145	+	</form>
146	+	</section>
147	+
148	+	<section class="section" id="feedback">
149	+	<h2>Feedback</h2>
150	+	<p class="desc"><code>.error</code>, <code>.success</code>, <code>.empty</code>. No red/green — borders + opacity only.</p>
151	+	<div class="error">Something went wrong.</div>
152	+	<div class="success" style="margin-top: 0.5rem">Saved successfully.</div>
153	+	<div class="empty" style="margin-top: 0.5rem">No items yet.</div>
154	+	</section>
155	+
156	+	<section class="section" id="lists">
157	+	<h2>Item list</h2>
158	+	<p class="desc"><code>.item-list</code> / <code>.item</code> — stacked with <code>#333</code> bottom divider.</p>
159	+	<div class="item-list">
160	+	<a href="#" class="item">
161	+	<div class="item-title">First entry title</div>
162	+	<div class="item-meta">apr 18, 2026</div>
163	+	</a>
164	+	<a href="#" class="item">
165	+	<div class="item-title">Second entry title</div>
166	+	<div class="item-meta">apr 17, 2026</div>
167	+	</a>
168	+	</div>
169	+
170	+	<h2 style="margin-top: 1rem">Admin list</h2>
171	+	<p class="desc"><code>.admin-list</code> — horizontal row with inline actions.</p>
172	+	<div class="admin-list">
173	+	<div class="admin-list-item">
174	+	<div class="admin-list-info">
175	+	<div class="admin-list-title">example-item-one</div>
176	+	<div class="admin-list-meta">
177	+	<span class="status-badge status-published">published</span>
178	+	<span class="admin-list-date">2026-04-18</span>
179	+	</div>
180	+	</div>
181	+	<div class="admin-list-actions">
182	+	<a href="#">edit</a>
183	+	<button class="link-button danger">delete</button>
184	+	</div>
185	+	</div>
186	+	<div class="admin-list-item">
187	+	<div class="admin-list-info">
188	+	<div class="admin-list-title">example-item-two</div>
189	+	<div class="admin-list-meta">
190	+	<span class="status-badge status-draft">draft</span>
191	+	<span class="admin-list-date">2026-04-17</span>
192	+	</div>
193	+	</div>
194	+	<div class="admin-list-actions">
195	+	<a href="#">edit</a>
196	+	<button class="link-button danger">delete</button>
197	+	</div>
198	+	</div>
199	+	</div>
200	+	</section>
201	+
202	+	<section class="section" id="tags">
203	+	<h2>Tags</h2>
204	+	<div class="row">
205	+	<span class="tag">rust</span>
206	+	<span class="tag">web</span>
207	+	<span class="tag">css</span>
208	+	</div>
209	+	</section>
210	+
211	+	<section class="section" id="table">
212	+	<h2>Table</h2>
213	+	<table>
214	+	<thead>
215	+	<tr>
216	+	<th>name</th>
217	+	<th>status</th>
218	+	<th>date</th>
219	+	</tr>
220	+	</thead>
221	+	<tbody>
222	+	<tr>
223	+	<td>first</td>
224	+	<td>ok</td>
225	+	<td style="opacity: 0.5">2026-04-18</td>
226	+	</tr>
227	+	<tr>
228	+	<td>second</td>
229	+	<td>ok</td>
230	+	<td style="opacity: 0.5">2026-04-17</td>
231	+	</tr>
232	+	</tbody>
233	+	</table>
234	+	</section>
235	+
236	+	<section class="section" id="code">
237	+	<h2>Code</h2>
238	+	<p>Inline <code>let x = 42;</code> and block:</p>
239	+	<pre><code>fn main() {
240	+	println!("hello, darkmatter");
241	+	}</code></pre>
242	+	</section>
243	+	</main>
244	+
245	+	<footer class="footer">
246	+	<span style="opacity: 0.5; font-size: 12px">darkmatter-css · andromeda workspace</span>
247	+	</footer>
248	+	</body>
249	+	</html>

crates/darkmatter-css/src/lib.rs (added) +54 −0

1	+	use axum::{
2	+	extract::Path,
3	+	http::{HeaderValue, StatusCode, header},
4	+	response::{IntoResponse, Response},
5	+	routing::get,
6	+	Router,
7	+	};
8	+	use rust_embed::Embed;
9	+
10	+	#[derive(Embed)]
11	+	#[folder = "assets/"]
12	+	pub struct Assets;
13	+
14	+	pub fn router<S>() -> Router<S>
15	+	where
16	+	S: Clone + Send + Sync + 'static,
17	+	{
18	+	Router::new()
19	+	.route("/assets/darkmatter.css", get(css))
20	+	.route("/assets/fonts/{file}", get(font))
21	+	.route("/darkmatter", get(gallery))
22	+	.route("/darkmatter/", get(gallery))
23	+	}
24	+
25	+	async fn css() -> Response {
26	+	serve("darkmatter.css", "text/css; charset=utf-8")
27	+	}
28	+
29	+	async fn gallery() -> Response {
30	+	serve("index.html", "text/html; charset=utf-8")
31	+	}
32	+
33	+	async fn font(Path(file): Path<String>) -> Response {
34	+	let mime = match file.rsplit('.').next().unwrap_or("") {
35	+	"otf" => "font/otf",
36	+	"ttf" => "font/ttf",
37	+	"woff" => "font/woff",
38	+	"woff2" => "font/woff2",
39	+	_ => "application/octet-stream",
40	+	};
41	+	serve(&format!("fonts/{file}"), mime)
42	+	}
43	+
44	+	fn serve(path: &str, mime: &'static str) -> Response {
45	+	match Assets::get(path) {
46	+	Some(f) => (
47	+	StatusCode::OK,
48	+	[(header::CONTENT_TYPE, HeaderValue::from_static(mime))],
49	+	f.data.to_vec(),
50	+	)
51	+	.into_response(),
52	+	None => StatusCode::NOT_FOUND.into_response(),
53	+	}
54	+	}

71	71		]
72	72
73	73		[[package]]
	74	+	name = "andromeda-darkmatter-css"
	75	+	version = "0.1.0"
	76	+	dependencies = [
	77	+	"axum",
	78	+	"rust-embed",
	79	+	]
	80	+
	81	+	[[package]]
74	82		name = "andromeda-db"
75	83		version = "0.1.0"
76	84		dependencies = [

690	698		version = "0.2.0"
691	699		dependencies = [
692	700		"andromeda-auth",
	701	+	"andromeda-darkmatter-css",
693	702		"andromeda-db",
694	703		"askama 0.15.6",
695	704		"askama_web",

1364	1373		version = "0.2.0"
1365	1374		dependencies = [
1366	1375		"andromeda-auth",
	1376	+	"andromeda-darkmatter-css",
1367	1377		"andromeda-db",
1368	1378		"askama 0.13.1",
1369	1379		"axum",

2212	2222		version = "0.2.0"
2213	2223		dependencies = [
2214	2224		"andromeda-auth",
	2225	+	"andromeda-darkmatter-css",
2215	2226		"andromeda-db",
2216	2227		"arboard",
2217	2228		"askama 0.15.6",

2800	2811		name = "og"
2801	2812		version = "0.1.0"
2802	2813		dependencies = [
	2814	+	"andromeda-darkmatter-css",
2803	2815		"askama 0.13.1",
2804	2816		"axum",
2805	2817		"dotenvy",

2918	2930		version = "0.1.3"
2919	2931		dependencies = [
2920	2932		"andromeda-auth",
	2933	+	"andromeda-darkmatter-css",
2921	2934		"andromeda-db",
2922	2935		"anyhow",
2923	2936		"askama 0.12.1",

3136	3149		version = "0.1.4"
3137	3150		dependencies = [
3138	3151		"andromeda-auth",
	3152	+	"andromeda-darkmatter-css",
3139	3153		"andromeda-db",
3140	3154		"askama 0.15.6",
3141	3155		"askama_web",

4137	4151		name = "shrink"
4138	4152		version = "0.1.2"
4139	4153		dependencies = [
	4154	+	"andromeda-darkmatter-css",
4140	4155		"askama 0.15.6",
4141	4156		"axum",
4142	4157		"image",

4205	4220		version = "0.2.0"
4206	4221		dependencies = [
4207	4222		"andromeda-auth",
	4223	+	"andromeda-darkmatter-css",
4208	4224		"andromeda-db",
4209	4225		"arboard",
4210	4226		"askama 0.15.6",

22	22		tracing-subscriber = { workspace = true }
23	23		andromeda-auth = { workspace = true }
24	24		andromeda-db = { workspace = true, features = ["session"] }
	25	+	andromeda-darkmatter-css = { workspace = true }
25	26		askama = "0.15"
26	27		askama_web = { version = "0.15", features = ["axum-0.8"] }
27	28		reqwest = { version = "0.12", features = ["json", "rustls-tls"], default-features = false }

6	6		COPY Cargo.toml Cargo.lock .
7	7		COPY crates/auth/Cargo.toml crates/auth/
8	8		COPY crates/db/Cargo.toml crates/db/
	9	+	COPY crates/darkmatter-css/Cargo.toml crates/darkmatter-css/
9	10		COPY apps/sipp/Cargo.toml apps/sipp/
10	11		COPY apps/feeds/Cargo.toml apps/feeds/
11	12		COPY apps/parcels/Cargo.toml apps/parcels/

18	19		# Create stubs for dependency caching
19	20		RUN mkdir -p crates/auth/src && echo '' > crates/auth/src/lib.rs \
20	21		&& mkdir -p crates/db/src && echo '' > crates/db/src/lib.rs \
	22	+	&& mkdir -p crates/darkmatter-css/src && echo '' > crates/darkmatter-css/src/lib.rs \
	23	+	&& mkdir -p crates/darkmatter-css/assets \
21	24		&& for app in sipp feeds parcels jotts og shrink cellar posts; do \
22	25		mkdir -p apps/$app/src && echo 'fn main() {}' > apps/$app/src/main.rs; \
23	26		done

27	30		# Copy real source
28	31		COPY crates/auth/src crates/auth/src
29	32		COPY crates/db/src crates/db/src
	33	+	COPY crates/darkmatter-css/src crates/darkmatter-css/src
	34	+	COPY crates/darkmatter-css/assets crates/darkmatter-css/assets
30	35		COPY apps/cellar/src apps/cellar/src
31	36		COPY apps/cellar/static apps/cellar/static
32	37		COPY apps/cellar/templates apps/cellar/templates
33	38
34		-	RUN touch apps/cellar/src/.rs crates/auth/src/.rs crates/db/src/*.rs && cargo build --release -p cellar
	39	+	RUN touch apps/cellar/src/.rs crates/auth/src/.rs crates/db/src/.rs crates/darkmatter-css/src/.rs && cargo build --release -p cellar
35	40
36	41		FROM debian:bookworm-slim
37	42		RUN apt-get update && apt-get install -y ca-certificates && rm -rf /var/lib/apt/lists/*

573	573		.route("/admin/analyze-image", post(admin::post_analyze_image))
574	574		// Static assets
575	575		.route("/static/{*path}", get(public::serve_static))
	576	+	.merge(andromeda_darkmatter_css::router::<Arc<AppState>>())
576	577		.layer(DefaultBodyLimit::max(10 * 1024 * 1024))
577	578		.with_state(state);
578	579

1		-	@font-face {
2		-	font-family: "Commit Mono";
3		-	src: url("/static/fonts/CommitMono-400-Regular.otf") format("opentype");
4		-	font-weight: 400;
5		-	font-style: normal;
6		-	}
7		-
8		-	@font-face {
9		-	font-family: "Commit Mono";
10		-	src: url("/static/fonts/CommitMono-700-Regular.otf") format("opentype");
11		-	font-weight: 700;
12		-	font-style: normal;
13		-	}
14		-
15		-	* {
16		-	padding: 0;
17		-	margin: 0;
18		-	box-sizing: border-box;
19		-	font-family: "Commit Mono", monospace, sans-serif;
20		-	scrollbar-width: none;
21		-	-ms-overflow-style: none;
22		-	}
23		-
24		-	html {
25		-	background: #121113;
26		-	color: #ffffff;
27		-	font-size: 14px;
28		-	line-height: 1.6;
29		-	}
30		-
31		-	html::-webkit-scrollbar {
32		-	display: none;
33		-	}
34		-
35		-	body {
36		-	display: flex;
37		-	flex-direction: column;
38		-	justify-content: start;
39		-	align-items: start;
40		-	gap: 1.5rem;
41		-	min-height: 100vh;
42		-	max-width: 700px;
43		-	margin: auto;
44		-	padding: 0 1rem;
45		-	}
46		-
47		-	@media (max-width: 480px) {
48		-	body {
49		-	padding: 1rem;
50		-	gap: 1rem;
51		-	}
52		-	}
53		-
54		-	a {
55		-	color: #ffffff;
56		-	text-decoration: none;
57		-	}
58		-
59		-	a:hover {
60		-	opacity: 0.7;
61		-	}
62		-
63		-	/* Header */
64		-
65		-	.header {
66		-	display: flex;
67		-	flex-direction: column;
68		-	gap: 0.5rem;
69		-	width: 100%;
70		-	margin-top: 2rem;
71		-	border-bottom: 1px solid #333;
72		-	padding-bottom: 1rem;
73		-	}
	1	+	/* cellar — app-specific styles.
	2	+	* Shared reset / tokens / components come from /assets/darkmatter.css.
	3	+	*/
74	4
75		-	.logo {
76		-	font-size: 28px;
77		-	font-weight: 700;
78		-	text-decoration: none;
79		-	text-transform: uppercase;
80		-	}
81		-
82		-	.links {
83		-	display: flex;
84		-	align-items: center;
85		-	gap: 0.75rem;
86		-	font-size: 12px;
87		-	}
88		-
89		-	/* Main content */
90		-
91		-	main {
92		-	width: 100%;
93		-	display: flex;
94		-	flex-direction: column;
95		-	gap: 1rem;
96		-	}
97		-
98		-	/* Forms */
99		-
100		-	.form {
101		-	display: flex;
102		-	flex-direction: column;
103		-	gap: 0.5rem;
104		-	width: 100%;
105		-	}
106		-
107		-	label {
108		-	font-size: 12px;
109		-	opacity: 0.7;
110		-	}
111		-
112		-	input, textarea {
113		-	background: #121113;
114		-	color: #ffffff;
115		-	border: 1px solid white;
116		-	padding: 0.4rem 0.75rem;
117		-	font-size: 16px;
118		-	width: 100%;
119		-	border-radius: 0;
	5	+	textarea {
	6	+	min-height: 120px;
120	7		}
121	8
122	9		input[type="file"] {

125	12		font-size: 12px;
126	13		}
127	14
128		-	textarea {
129		-	min-height: 120px;
130		-	resize: vertical;
131		-	}
132		-
133		-	button {
134		-	background: #121113;
135		-	color: #ffffff;
136		-	padding: 0.4rem 0.75rem;
137		-	border: 1px solid white;
138		-	cursor: pointer;
139		-	width: fit-content;
140		-	font-size: 14px;
141		-	border-radius: 0;
142		-	}
143		-
144		-	button:hover {
145		-	opacity: 0.7;
146		-	}
147		-
148	15		button:disabled {
149	16		opacity: 0.3;
150	17		cursor: not-allowed;
151		-	}
152		-
153		-	/* Error */
154		-
155		-	.error {
156		-	color: #ffffff;
157		-	border-left: 2px solid #ffffff;
158		-	padding-left: 0.5rem;
159		-	font-size: 13px;
160		-	opacity: 0.8;
161		-	}
162		-
163		-	.empty {
164		-	opacity: 0.5;
165		-	font-size: 12px;
166	18		}
167	19
168	20		/* Wine list (public) */

320	172		display: flex;
321	173		gap: 1rem;
322	174		font-size: 12px;
323		-	}
324		-
325		-	.inline-form {
326		-	display: inline;
327		-	}
328		-
329		-	.link-button {
330		-	background: none;
331		-	border: none;
332		-	color: #ffffff;
333		-	cursor: pointer;
334		-	font-size: 12px;
335		-	padding: 0;
336		-	}
337		-
338		-	.link-button:hover {
339		-	opacity: 0.7;
340	175		}
341	176
342	177		/* Score inputs */

13	13		<meta property="og:image" content="/static/og.png">
14	14		<meta property="og:type" content="website">
15	15		<meta name="theme-color" content="#121113" />
	16	+	<link rel="stylesheet" href="/assets/darkmatter.css">
16	17		<link rel="stylesheet" href="/static/styles.css">
17	18		<link rel="alternate" type="application/rss+xml" title="Cellar RSS" href="/feed.xml">
18	19		</head>

5	5		<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	6		<title>Cellar</title>
7	7		<meta name="theme-color" content="#121113" />
	8	+	<link rel="stylesheet" href="/assets/darkmatter.css">
8	9		<link rel="stylesheet" href="/static/styles.css">
9	10		</head>
10	11		<body>

21	21		tracing-subscriber = { workspace = true, features = ["env-filter"] }
22	22		andromeda-auth = { workspace = true }
23	23		andromeda-db = { workspace = true, features = ["axum", "session", "feeds"] }
	24	+	andromeda-darkmatter-css = { workspace = true }
24	25		askama = "0.13"
25	26		reqwest = { version = "0.12", features = ["json"] }
26	27		feed-rs = "2"

559	559		.init();
560	560
561	561		let db_path =
562		-	std::env::var("FEEDS_DB_PATH").unwrap_or_else(\|_\| "/data/feeds.sqlite".to_string());
	562	+	std::env::var("FEEDS_DB_PATH").unwrap_or_else(\|_\| "feeds.sqlite".to_string());
563	563		let conn = Connection::open(&db_path).expect("open sqlite");
564	564		conn.execute_batch(SESSION_SCHEMA).expect("session schema");
565	565		conn.execute_batch(fdb::FEEDS_SCHEMA).expect("feeds schema");

647	647		.route("/static/{*path}", get(static_handler))
648	648		.merge(admin_router)
649	649		.merge(api_router)
	650	+	.merge(andromeda_darkmatter_css::router::<Arc<AppState>>())
650	651		.with_state(state);
651	652
652	653		let host = std::env::var("HOST").unwrap_or_else(\|_\| "0.0.0.0".to_string());

4	4		<meta charset="UTF-8" />
5	5		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6	6		<meta name="theme-color" content="#121113" />
	7	+	<link rel="stylesheet" href="/assets/darkmatter.css" />
7	8		<link rel="stylesheet" href="/static/styles.css" />
8	9		<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
9	10		<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">

21	22		</div>
22	23
23	24		{% if let Some(msg) = success %}
24		-	<p class="success-msg">{{ msg }}</p>
	25	+	<p class="success">{{ msg }}</p>
25	26		{% endif %}
26	27		{% if let Some(err) = error %}
27		-	<p class="error-msg">{{ err }}</p>
	28	+	<p class="error">{{ err }}</p>
28	29		{% endif %}
29	30
30	31		<section class="admin-form">

94	95		<a href="{% if let Some(url) = sub.site_url %}{{ url }}{% else %}{{ sub.feed_url }}{% endif %}" target="_blank" rel="noopener noreferrer">{{ sub.title }}</a>
95	96		</h3>
96	97		{% if let Some(last) = sub.last_fetched_at %}
97		-	<p class="feed-meta"><span class="feed-date">last: {{ last }}</span>{% if let Some(err) = sub.last_error %} <span class="error-msg">· {{ err }}</span>{% endif %}</p>
	98	+	<p class="feed-meta"><span class="feed-date">last: {{ last }}</span>{% if let Some(err) = sub.last_error %} <span class="error">· {{ err }}</span>{% endif %}</p>
98	99		{% endif %}
99	100		<form method="POST" action="/admin/feeds/{{ sub.id }}/category" class="inline">
100	101		<input type="text" name="category_name" placeholder="category" list="categories-list"

140	141		const data = await resp.json();
141	142		if (!resp.ok) {
142	143		status.textContent = data.error \|\| 'No feeds found';
143		-	status.className = 'discover-status error-msg';
	144	+	status.className = 'discover-status error';
144	145		status.style.display = 'block';
145	146		return;
146	147		}
147	148		feedInput.value = data[0];
148	149		status.textContent = data.length + ' feed(s) found';
149		-	status.className = 'discover-status success-msg';
	150	+	status.className = 'discover-status success';
150	151		status.style.display = 'block';
151	152		if (data.length > 1) {
152	153		results.style.display = 'flex';

167	168		}
168	169		} catch (e) {
169	170		status.textContent = 'Request failed';
170		-	status.className = 'discover-status error-msg';
	171	+	status.className = 'discover-status error';
171	172		status.style.display = 'block';
172	173		} finally {
173	174		btn.disabled = false;

428	428		// Static assets
429	429		.route("/static/{*path}", get(serve_static))
430	430		.merge(api_router)
	431	+	.merge(andromeda_darkmatter_css::router::<Arc<AppState>>())
431	432		.with_state(state);
432	433
433	434		let addr = format!("{}:{}", host, port);

17	17		dotenvy = { workspace = true }
18	18		tracing = { workspace = true }
19	19		tracing-subscriber = { workspace = true }
	20	+	andromeda-darkmatter-css = { workspace = true }
20	21		askama = "0.13"
21	22		reqwest = { version = "0.12", features = ["rustls-tls"], default-features = false }
22	23		scraper = "0.22"

140	140		let app = Router::new()
141	141		.route("/", get(get_index))
142	142		.route("/check", post(post_check))
143		-	.route("/static/{*path}", get(static_handler));
	143	+	.route("/static/{*path}", get(static_handler))
	144	+	.merge(andromeda_darkmatter_css::router::<()>());
144	145
145	146		let port = std::env::var("PORT").unwrap_or_else(\|_\| "3000".to_string());
146	147		let addr = format!("0.0.0.0:{port}");

14	14		<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
15	15		<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
16	16		<link rel="manifest" href="/static/site.webmanifest">
	17	+	<link rel="stylesheet" href="/assets/darkmatter.css">
17	18		<link rel="stylesheet" href="/static/styles.css">
18	19		</head>
19	20		<body>

372	372		.route("/packages/{id}/refresh", post(post_refresh_package))
373	373		.route("/packages/{id}/delete", post(post_delete_package))
374	374		.nest_service("/static", ServeDir::new("static"))
	375	+	.merge(andromeda_darkmatter_css::router::<Arc<AppState>>())
375	376		.with_state(state);
376	377
377	378		let listener = tokio::net::TcpListener::bind(&bind_addr)

2	2		{% block title %}PARCELS — add package{% endblock %}
3	3		{% block content %}
4	4		<div class="header">
5		-	<h1><a href="/" style="text-decoration:none;">PARCELS</a></h1>
	5	+	<a href="/" class="logo">PARCELS</a>
	6	+	<nav class="links">
	7	+	<a href="/">← back</a>
	8	+	</nav>
6	9		</div>
7	10		{% if let Some(err) = error %}
8		-	<div class="error">{{ err }}</div>
	11	+	<p class="error">{{ err }}</p>
9	12		{% endif %}
10		-	<form method="POST" action="/packages" style="max-width: 400px;">
11		-	<div class="form-group">
	13	+	<form class="form" method="POST" action="/packages">
	14	+	<div class="form-field">
12	15		<label for="tracking_number">tracking number</label>
13	16		<input type="text" id="tracking_number" name="tracking_number" required autofocus
14	17		placeholder="e.g. 9400111899223397992148">
15	18		</div>
16		-	<div class="form-group">
	19	+	<div class="form-field">
17	20		<label for="label">label</label>
18	21		<input type="text" id="label" name="label" required placeholder="e.g. Amazon order">
19	22		</div>
20		-	<button type="submit">add package</button>
	23	+	<div class="form-actions">
	24	+	<button type="submit">add package</button>
	25	+	</div>
21	26		</form>
22	27		{% endblock %}

2	2		{% block title %}PARCELS — {% if let Some(label) = package.label %}{{ label }}{% else %}{{ package.tracking_number }}{% endif %}{% endblock %}
3	3		{% block content %}
4	4		<div class="header">
5		-	<h1><a href="/" style="text-decoration:none;">PARCELS</a></h1>
6		-	<nav>
	5	+	<a href="/" class="logo">PARCELS</a>
	6	+	<nav class="links">
7	7		<a href="/">← back</a>
8	8		</nav>
9	9		</div>
10	10		{% if let Some(err) = error %}
11		-	<div class="error">{{ err }}</div>
	11	+	<p class="error">{{ err }}</p>
12	12		{% endif %}
13	13
14		-	<div style="margin-bottom: 2rem;">
15		-	<div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
	14	+	<div>
	15	+	<div class="detail-header">
16	16		{% if let Some(label) = package.label %}
17		-	<div style="font-size: 16px; font-weight: 700;">{{ label }}</div>
	17	+	<div class="detail-title">{{ label }}</div>
18	18		{% endif %}
19		-	<form method="POST" action="/packages/{{ package.id }}/delete"
	19	+	<form class="inline-form" method="POST" action="/packages/{{ package.id }}/delete"
20	20		onsubmit="return confirm('Delete this package?')">
21		-	<button type="submit" style="font-size: 12px; opacity: 0.6; border-color: #555; margin-top: 0.5rem;">delete</button>
	21	+	<button type="submit" class="link-button danger">delete</button>
22	22		</form>
23	23		</div>
24		-	<div style="opacity: 0.6; margin-bottom: 1rem;">{{ package.tracking_number }}</div>
	24	+	<div class="detail-tracking">{{ package.tracking_number }}</div>
25	25
26		-	<table style="width: auto; margin-bottom: 1.5rem;">
	26	+	<table class="detail-table">
27	27		<tr>
28		-	<th style="padding-right: 2rem;">status</th>
	28	+	<th>status</th>
29	29		<td>{% if let Some(s) = package.status %}{{ s }}{% else %}<span class="null">—</span>{% endif %}</td>
30	30		</tr>
31	31		<tr>

41	41		<td>{% if let Some(d) = package.expected_delivery %}{{ d }}{% else %}<span class="null">—</span>{% endif %}</td>
42	42		</tr>
43	43		</table>
44		-
45	44		</div>
46	45
47	46		{% if !events.is_empty() %}
48	47		<div>
49		-	<div style="opacity: 0.5; font-size: 12px; text-transform: uppercase; margin-bottom: 1rem; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">
50		-	event history
51		-	</div>
	48	+	<div class="event-section-header">event history</div>
52	49		{% for event in events %}
53		-	<div style="padding: 0.75rem 0; border-bottom: 1px solid #1e1c1f;">
54		-	<div style="opacity: 0.5; font-size: 12px; margin-bottom: 0.2rem;">
	50	+	<div class="event-item">
	51	+	<div class="event-timestamp">
55	52		{% if let Some(ts) = event.event_timestamp %}{{ ts }}{% else %}<span class="null">—</span>{% endif %}
56	53		</div>
57		-	<div style="font-weight: 700;">
	54	+	<div class="event-type">
58	55		{% if let Some(et) = event.event_type %}{{ et }}{% else %}<span class="null">—</span>{% endif %}
59	56		</div>
60	57		{% if event.event_city.is_some() \|\| event.event_state.is_some() %}
61		-	<div style="opacity: 0.6; font-size: 13px;">
	58	+	<div class="event-location">
62	59		{% if let Some(city) = event.event_city %}{{ city }}{% endif %}{% if event.event_city.is_some() && event.event_state.is_some() %}, {% endif %}{% if let Some(state) = event.event_state %}{{ state }}{% endif %}
63	60		</div>
64	61		{% endif %}

66	63		{% endfor %}
67	64		</div>
68	65		{% else %}
69		-	<p style="opacity: 0.4;">no events yet. click refresh to load tracking history.</p>
	66	+	<p class="empty">no events yet. click refresh to load tracking history.</p>
70	67		{% endif %}
71	68		{% endblock %}

2	2		{% block title %}PARCELS{% endblock %}
3	3		{% block content %}
4	4		<div class="header">
5		-	<h1>PARCELS</h1>
6		-	<div class="links">
	5	+	<a href="/" class="logo">PARCELS</a>
	6	+	<nav class="links">
7	7		<a href="/packages/add">add package</a>
8		-	</div>
	8	+	<a href="/logout">logout</a>
	9	+	</nav>
9	10		</div>
10	11		{% if let Some(err) = error %}
11		-	<div class="error">{{ err }}</div>
	12	+	<p class="error">{{ err }}</p>
12	13		{% endif %}
13	14		{% if packages.is_empty() %}
14		-	<p style="opacity: 0.4;">no packages. <a href="/packages/add">add one</a></p>
	15	+	<p class="empty">no packages. <a href="/packages/add">add one</a></p>
15	16		{% else %}
16	17		<div class="parcel-list">
17	18		{% for pkg in packages %}

1	1		{% extends "base.html" %}
2	2		{% block title %}PARCELS — login{% endblock %}
3	3		{% block content %}
4		-	<div style="max-width: 320px; margin: 4rem auto;">
5		-	<h1 style="font-size: 24px; margin-bottom: 2rem; font-weight: 700;">PARCELS</h1>
	4	+	<div class="login-wrap">
	5	+	<h1>PARCELS</h1>
6	6		{% if let Some(err) = error %}
7		-	<div class="error">{{ err }}</div>
	7	+	<p class="error">{{ err }}</p>
8	8		{% endif %}
9		-	<form method="POST" action="/login">
10		-	<div class="form-group">
	9	+	<form class="form" method="POST" action="/login">
	10	+	<div class="form-field">
11	11		<label for="password">password</label>
12	12		<input type="password" id="password" name="password" autofocus required>
13	13		</div>
14		-	<button type="submit" style="width: 100%; margin-top: 0.5rem;">sign in</button>
	14	+	<button type="submit">sign in</button>
15	15		</form>
16	16		</div>
17	17		{% endblock %}

580	580		.route("/files/{filename}", get(public::serve_uploaded_file))
581	581		// Static assets
582	582		.route("/static/{*path}", get(public::serve_static))
	583	+	// Shared Darkmatter CSS assets + /darkmatter gallery
	584	+	.merge(andromeda_darkmatter_css::router::<Arc<AppState>>())
583	585		// Fallback
584	586		.fallback(get(public::fallback_handler))
585	587		.with_state(state)

6	6		<title>{% block title %}Admin{% endblock %}</title>
7	7		<link rel="icon" href="/static/favicons/favicon.ico">
8	8		<meta name="theme-color" content="#121113" />
	9	+	<link rel="stylesheet" href="/assets/darkmatter.css">
9	10		<link rel="stylesheet" href="/static/styles.css">
10	11		</head>
11	12		<body>

16	16		{% endif %}
17	17		<meta name="theme-color" content="#121113" />
18	18		{% block meta %}{% endblock %}
	19	+	<link rel="stylesheet" href="/assets/darkmatter.css">
19	20		<link rel="stylesheet" href="/static/styles.css">
20	21		<link rel="stylesheet" href="/custom-styles.css">
21	22		</head>

6	6		<title>Login</title>
7	7		<link rel="icon" href="/static/favicons/favicon.ico">
8	8		<meta name="theme-color" content="#121113" />
	9	+	<link rel="stylesheet" href="/assets/darkmatter.css">
9	10		<link rel="stylesheet" href="/static/styles.css">
10	11		</head>
11	12		<body>

14	14		tower-http = { workspace = true, features = ["fs"] }
15	15		tracing = { workspace = true }
16	16		tracing-subscriber = { workspace = true }
	17	+	andromeda-darkmatter-css = { workspace = true }
17	18		askama = "0.15"
18	19		image = "0.25"
19	20		img-parts = "0.3"

20	20		.route("/", get(get_index))
21	21		.route("/compress", post(post_compress))
22	22		.layer(DefaultBodyLimit::max(20 * 1024 * 1024))
23		-	.nest_service("/static", ServeDir::new("static"));
	23	+	.nest_service("/static", ServeDir::new("static"))
	24	+	.merge(andromeda_darkmatter_css::router::<()>());
24	25
25	26		let addr = format!("{}:{}", host, port);
26	27		tracing::info!("Listening on {}", addr);

30	30		rusqlite = { workspace = true }
31	31		andromeda-db = { workspace = true, features = ["session"] }
32	32		andromeda-auth = { workspace = true }
	33	+	andromeda-darkmatter-css = { workspace = true }
33	34		askama = "0.15.4"
34	35		askama_web = { version = "0.15.1", features = ["axum-0.8"] }
35	36		ratatui = "0.30"

508	508		.route("/snippets", post(create_snippet))
509	509		.merge(api_routes)
510	510		.route("/static/{*path}", get(serve_static))
	511	+	.merge(andromeda_darkmatter_css::router::<AppState>())
511	512		.with_state(state);
512	513
513	514		let addr = format!("{}:{}", host, port);