Initial implementation of microblog

Markdown-based personal microblog with REST API.
XSS protection via sanitize-html on server-side markdown rendering.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 150 insertions, 0 deletions

diff --git a/app/app.css b/app/app.css
new file mode 100644
index 0000000..d289252
--- /dev/null
+++ b/app/app.css
@@ -0,0 +1,150 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html {
+  font-family: ui-serif, Georgia, 'Times New Roman', Times, serif;
+  background: #0c0e14;
+  color: #c9cdd6;
+  line-height: 1.6;
+}
+
+textarea {
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+  font-size: .875rem;
+  background: #161924;
+  color: #c9cdd6;
+  border: 1px solid #2a2f3e;
+  border-radius: 4px;
+  padding: .75rem 1rem;
+  resize: vertical;
+  width: 100%;
+  line-height: 1.6;
+}
+textarea:focus { outline: 1px solid #5c6bc0; border-color: #5c6bc0; }
+textarea::placeholder { color: #3d4560; }
+
+button[type="submit"] {
+  background: #1e2640;
+  border: 1px solid #3d4f7c;
+  color: #8899cc;
+  border-radius: 4px;
+  padding: .375rem 1.125rem;
+  font-size: .8125rem;
+  font-family: ui-monospace, monospace;
+  cursor: pointer;
+  letter-spacing: .02em;
+}
+button[type="submit"]:hover { background: #253058; color: #aabce0; border-color: #5068a0; }
+button[type="submit"]:disabled { opacity: .4; cursor: not-allowed; }
+
+/* ── Layout ── */
+
+.wrap { max-width: 660px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
+
+/* ── Header ── */
+
+.site-header { margin-bottom: 2.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #1a1d29; }
+.site-header h1 {
+  font-size: .875rem;
+  font-weight: 400;
+  color: #4b5267;
+  letter-spacing: .12em;
+  text-transform: lowercase;
+  font-family: ui-monospace, monospace;
+}
+
+/* ── Compose form ── */
+
+.compose { margin-bottom: 2.75rem; }
+.compose textarea { margin-bottom: .5rem; min-height: 96px; }
+.compose-row { display: flex; justify-content: space-between; align-items: center; }
+.hint { font-size: .6875rem; color: #32384d; font-family: ui-monospace, monospace; letter-spacing: .04em; }
+.error-msg { font-size: .8125rem; color: #e06c75; margin-top: .375rem; margin-bottom: .375rem; }
+
+/* ── Feed ── */
+
+.feed { display: flex; flex-direction: column; }
+
+.post { padding: 1.375rem 0; border-top: 1px solid #15182200; }
+.feed > .post:first-child { border-top: 1px solid #1a1d29; }
+.post + .post { border-top: 1px solid #1a1d29; }
+.post:last-child { border-bottom: 1px solid #1a1d29; }
+
+.post-meta {
+  display: block;
+  font-size: .6875rem;
+  color: #3d4560;
+  font-family: ui-monospace, monospace;
+  margin-bottom: .625rem;
+  letter-spacing: .04em;
+}
+
+/* ── Prose (rendered markdown) ── */
+
+.prose { font-size: .9375rem; }
+.prose p { margin-bottom: .75rem; color: #c9cdd6; line-height: 1.8; }
+.prose p:last-child { margin-bottom: 0; }
+
+.prose h1 { font-size: 1.25rem; color: #e8eaf0; margin: 1.25rem 0 .5rem; font-weight: 600; }
+.prose h2 { font-size: 1.0625rem; color: #e8eaf0; margin: 1.125rem 0 .375rem; font-weight: 600; }
+.prose h3 { font-size: .9375rem; color: #dde1ed; margin: 1rem 0 .25rem; font-weight: 600; }
+.prose h1:first-child,
+.prose h2:first-child,
+.prose h3:first-child { margin-top: 0; }
+
+.prose strong { color: #dde1ed; font-weight: 600; }
+.prose em { font-style: italic; }
+.prose del { color: #6b7280; }
+
+.prose a { color: #7aa2f7; }
+.prose a:hover { color: #9db8ff; text-decoration: underline; }
+
+.prose code {
+  font-family: ui-monospace, monospace;
+  font-size: .8125rem;
+  background: #1a1d29;
+  color: #a9b1d6;
+  padding: .1em .35em;
+  border-radius: 3px;
+}
+
+.prose pre {
+  background: #161924;
+  border: 1px solid #2a2f3e;
+  border-radius: 4px;
+  padding: .875rem 1rem;
+  overflow-x: auto;
+  margin-bottom: .75rem;
+}
+.prose pre code { background: none; padding: 0; color: #a9b1d6; font-size: .8125rem; }
+
+.prose ul { padding-left: 1.5rem; margin-bottom: .75rem; list-style: disc; }
+.prose ol { padding-left: 1.5rem; margin-bottom: .75rem; list-style: decimal; }
+.prose li { margin-bottom: .25rem; line-height: 1.75; }
+
+.prose blockquote {
+  border-left: 2px solid #2a2f3e;
+  padding-left: .875rem;
+  color: #7a8099;
+  margin-bottom: .75rem;
+  font-style: italic;
+}
+
+.prose hr { border: none; border-top: 1px solid #1a1d29; margin: 1.25rem 0; }
+
+.prose table { width: 100%; border-collapse: collapse; font-size: .875rem; margin-bottom: .75rem; }
+.prose th,
+.prose td { padding: .375rem .75rem; border: 1px solid #2a2f3e; text-align: left; }
+.prose th { background: #161924; color: #c9cdd6; }
+
+.prose img { max-width: 100%; border-radius: 4px; }
+
+/* ── Empty state ── */
+
+.empty {
+  color: #32384d;
+  font-size: .875rem;
+  padding: 2.5rem 0;
+  text-align: center;
+  font-style: italic;
+  font-family: ui-monospace, monospace;
+}