142 lines
4.3 KiB
CSS
142 lines
4.3 KiB
CSS
/* ── Commonplace ──────────────────────────────────────────────────────────── */
|
|
|
|
/* ── Intro ────────────────────────────────────────────────────────────────── */
|
|
|
|
.cp-intro {
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* ── View toggle ──────────────────────────────────────────────────────────── */
|
|
|
|
.cp-view-toggle {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin: 1.5rem 0 2.5rem;
|
|
}
|
|
|
|
.cp-toggle-btn {
|
|
font-family: var(--font-ui);
|
|
font-size: 0.73rem;
|
|
font-variant-caps: all-small-caps;
|
|
letter-spacing: 0.06em;
|
|
padding: 0.2rem 0.7rem;
|
|
border: 1px solid var(--border);
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: color var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
.cp-toggle-btn:hover {
|
|
color: var(--text);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.cp-toggle-btn.is-active {
|
|
color: var(--text);
|
|
border-color: var(--text);
|
|
}
|
|
|
|
/* ── Theme sections ───────────────────────────────────────────────────────── */
|
|
|
|
.cp-theme-heading {
|
|
font-family: var(--font-ui);
|
|
font-size: 0.73rem;
|
|
font-variant-caps: all-small-caps;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
margin: 2.5rem 0 1.5rem;
|
|
padding-bottom: 0.4rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.cp-theme-section:first-child .cp-theme-heading {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* ── Entry ────────────────────────────────────────────────────────────────── */
|
|
|
|
.cp-entry {
|
|
margin: 0 0 2rem;
|
|
padding-bottom: 2rem;
|
|
border-bottom: 1px solid var(--border-muted);
|
|
}
|
|
|
|
.cp-entry:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* ── Quote block — overrides default #markdownBody blockquote ─────────────── */
|
|
|
|
#markdownBody .cp-quote {
|
|
background-image: none;
|
|
padding-left: 0;
|
|
color: var(--text);
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
#markdownBody .cp-quote p {
|
|
margin: 0;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
/* ── Attribution ──────────────────────────────────────────────────────────── */
|
|
|
|
.cp-attribution {
|
|
font-family: var(--font-ui);
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.cp-attribution a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--border);
|
|
transition: color var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
.cp-attribution a:hover {
|
|
color: var(--text);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
/* ── Commentary ───────────────────────────────────────────────────────────── */
|
|
|
|
.cp-commentary {
|
|
font-family: var(--font-ui);
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
margin: 0.7rem 0 0;
|
|
}
|
|
|
|
/* ── Tags ─────────────────────────────────────────────────────────────────── */
|
|
|
|
.cp-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
margin-top: 0.7rem;
|
|
}
|
|
|
|
.cp-tag {
|
|
font-family: var(--font-ui);
|
|
font-size: 0.67rem;
|
|
font-variant-caps: all-small-caps;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-faint);
|
|
padding: 0.1rem 0.4rem;
|
|
border: 1px solid var(--border-muted);
|
|
}
|
|
|
|
/* ── Empty state ──────────────────────────────────────────────────────────── */
|
|
|
|
.cp-empty {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|