ad/molodetz/static/css/content.css

/* retoor <retoor@molodetz.nl> */
.hero { padding: var(--space-xl) 0 var(--space-lg); border-bottom: var(--border); margin-bottom: var(--space-xl); }

.hero h1 {
  font-size: var(--text-hero);
  font-weight: 500;
  letter-spacing: var(--tracking-hero);
  line-height: var(--leading-tight);
  margin: var(--space-sm) 0 var(--space-md);
}

.hero .lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 30em; margin: 0; }
.hero .lead em { color: var(--ink); font-style: italic; }

.intro { max-width: var(--measure); font-family: var(--font-serif); color: var(--ink-soft); font-size: var(--text-base); line-height: var(--leading-body); }
.intro p { margin: 0 0 var(--space-md); }
.intro > p:first-child { font-size: var(--text-xl); line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; margin-bottom: var(--space-lg); }
.intro > p:last-child { margin-bottom: 0; }
.intro-edit { font-family: var(--font-sans); font-size: var(--text-xs); margin: var(--space-md) 0 0; }
.intro-edit a { color: var(--muted); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  margin: var(--space-xl) 0 var(--space-sm);
}

.section-head a { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--muted); text-decoration: none; letter-spacing: 0.08em; }

.post-card { border-top: var(--border); padding: var(--space-lg) 0; display: grid; gap: var(--space-xs); min-width: 0; }
.post-card:last-child { border-bottom: var(--border); }
.post-card h3, .post-card h2 { font-size: var(--text-xl); font-weight: 500; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.post-card h3 a, .post-card h2 a { text-decoration: none; }
.post-card p { color: var(--ink-soft); margin: 0; }

.post-meta { display: flex; gap: var(--space-md); align-items: baseline; flex-wrap: wrap; }

.tag-placeholder {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: var(--border-strong);
  padding: 0 var(--space-sm);
}

.tag-draft { color: var(--warning); border-color: rgba(var(--accent-rgb), 0.5); }

.article-header { margin-bottom: var(--space-xl); }
.article-header h1 { font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: var(--space-sm) 0; }

.byline { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--muted); }
.byline a { color: var(--ink-soft); text-decoration: none; }

.prose { font-size: var(--text-lg); line-height: 1.65; overflow-wrap: anywhere; min-width: 0; }
.prose p { margin: 0 0 var(--space-md); }
.prose blockquote { margin: var(--space-lg) 0; padding: var(--space-sm) var(--space-lg); border-left: 2px solid var(--accent); color: var(--ink-soft); font-style: italic; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose h2, .prose h3 { font-weight: 500; margin: var(--space-xl) 0 var(--space-sm); }
.prose img { margin: var(--space-lg) 0; border: var(--border); cursor: zoom-in; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-base); }
.prose th, .prose td { border-bottom: var(--border); padding: var(--space-sm); text-align: left; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--code-bg); padding: 0 var(--space-xs); }
.prose pre { background: var(--code-bg); border: var(--border); padding: var(--space-md); overflow-x: auto; position: relative; font-size: var(--text-sm); }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: var(--border); margin: var(--space-xl) 0; }
.prose a.mention { color: var(--accent); text-decoration: none; }

.copy-button {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  background: var(--bg-raised);
  color: var(--muted);
  border: var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: 0 var(--space-sm);
  cursor: pointer;
}

.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: var(--code-keyword); }
.hljs-string, .hljs-attr, .hljs-template-variable { color: var(--code-string); }
.hljs-comment, .hljs-quote { color: var(--code-comment); font-style: italic; }
.hljs-number, .hljs-literal { color: var(--code-number); }
.hljs-title, .hljs-section, .hljs-name { color: var(--code-title); }

.featured { margin: var(--space-xl) 0; border-top: var(--border); padding-top: var(--space-lg); }
.featured figure { margin: 0; }
.featured figcaption { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-sm); letter-spacing: 0.06em; }

.closing { margin-top: var(--space-2xl); border-top: var(--border); padding-top: var(--space-lg); display: grid; gap: var(--space-md); }
.closing p { font-size: var(--text-lg); color: var(--ink-soft); margin: 0; max-width: 30em; }

.person-row { display: flex; align-items: center; gap: var(--space-md); border-top: var(--border); padding: var(--space-md) 0; min-width: 0; }
.person-row:last-child { border-bottom: var(--border); }
.person-row .who { display: grid; min-width: 0; flex: 1; }
.person-row .who b { font-weight: 500; font-size: var(--text-lg); }
.person-row .who span { color: var(--muted); font-size: var(--text-sm); }
.person-row .count { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--muted); }

.avatar { border: var(--border-strong); background: var(--bg-raised); flex-shrink: 0; }

.presence-host { position: relative; display: inline-block; }
.presence-dot {
  position: absolute;
  right: calc(var(--space-xs) * -1);
  bottom: calc(var(--space-xs) * -1);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--faint);
  border: 2px solid var(--bg);
}
.presence-dot.online { background: var(--success); }

.empty { color: var(--muted); font-style: italic; padding: var(--space-lg) 0; border-top: var(--border); }

.load-more { display: flex; justify-content: center; margin-top: var(--space-lg); }

.notice { border: var(--border-strong); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; background: var(--bg-raised); }
.notice.success { border-color: rgba(var(--accent-rgb), 0.6); }
.notice.error { border-color: var(--danger); }
.notice ul { margin: 0; padding-left: var(--space-lg); }

.error-page { padding: var(--space-2xl) 0; }
.error-page .code { font-size: var(--text-hero); letter-spacing: var(--tracking-hero); line-height: 1; color: var(--faint); }

@media (max-width: 480px) {
  .article-header h1 { font-size: var(--text-xl); }
  .prose { font-size: var(--text-base); }
  .intro > p:first-child { font-size: var(--text-lg); }
}