getfilepress 0.0.0 → 0.1.0

package/packages/core/src/lib/styles/theme.css

@@ -0,0 +1,762 @@
+/*
+ * filepress core theme — "Essay" (default).
+ *
+ * Quiet, text-first, editorial — in the spirit of Stratechery and Ben Evans.
+ * One reading serif (Newsreader), one UI sans for meta/labels (Inter), a single
+ * restrained accent used at three intensities (strong / rule / wash), hairline
+ * rules, and generous whitespace.
+ *
+ * Sites may override via theme.css at the site root (loaded after
+ * this file). Prefer CSS custom properties and the documented class names —
+ * see docs/THEME.md.
+ */
+
+:root {
+	--font-serif: 'Newsreader Variable', 'Iowan Old Style', Charter, Georgia, 'Times New Roman', serif;
+	--font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+	--font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+
+	/* Warm parchment light theme (avoid sterile blue-grey). */
+	--bg: #faf8f3;
+	--surface: #ffffff;
+	--ink: #1a1917;
+	--ink-soft: #4d4a44;
+	--ink-faint: #837f77;
+	--rule: #e7e2d8;
+	--rule-strong: #d6cfc1;
+
+	/* Single accent, three intensities. */
+	--accent: #7a2331;
+	--accent-strong: #611a26;
+	--accent-wash: color-mix(in srgb, var(--accent) 6%, transparent);
+
+	--measure: 40rem;
+	--measure-wide: 46rem;
+	--gap: clamp(1.25rem, 4vw, 2.5rem);
+	--radius: 6px;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #141310;
+		--surface: #1c1b16;
+		--ink: #edeae3;
+		--ink-soft: #b6b1a7;
+		--ink-faint: #7f7b72;
+		--rule: #2c2a23;
+		--rule-strong: #3b382f;
+		--accent: #dc909b;
+		--accent-strong: #e8a7b0;
+		--accent-wash: color-mix(in srgb, var(--accent) 9%, transparent);
+	}
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+html {
+	-webkit-text-size-adjust: 100%;
+}
+
+body {
+	margin: 0;
+	background: var(--bg);
+	color: var(--ink);
+	font-family: var(--font-serif);
+	font-optical-sizing: auto;
+	font-size: 1.2rem;
+	line-height: 1.72;
+	font-feature-settings: 'kern', 'liga', 'onum';
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+}
+
+.wrap {
+	max-width: var(--measure-wide);
+	margin: 0 auto;
+	padding: 0 var(--gap);
+}
+
+/* --- Utilities --- */
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* --- Header / footer chrome --- */
+.site-header {
+	border-bottom: 1px solid var(--rule);
+	margin-bottom: clamp(1.75rem, 4.5vw, 2.75rem);
+}
+
+.site-header .wrap {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1.5rem;
+	/* Keep horizontal gap so masthead lines up with main.wrap content. */
+	padding: 1.6rem var(--gap);
+	flex-wrap: wrap;
+}
+
+.site-id {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+}
+
+.site-title {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.85rem;
+	font-family: var(--font-serif);
+	font-size: 1.5rem;
+	font-weight: 600;
+	letter-spacing: -0.015em;
+	color: var(--ink);
+	text-decoration: none;
+	min-width: 0;
+}
+
+.site-logo {
+	display: block;
+	flex-shrink: 0;
+	height: 4.25rem;
+	width: auto;
+}
+
+/* Wordmark + tagline stack beside the logo (or alone when there is no mark). */
+.site-brand-copy {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	gap: 0.2rem;
+	min-width: 0;
+}
+
+.site-wordmark {
+	line-height: 1.1;
+}
+
+/* The tagline is the site's thesis, carried on the masthead site-wide. */
+.site-tagline {
+	margin: 0;
+	max-width: var(--measure);
+	color: var(--ink-soft);
+	font-style: italic;
+	font-size: 0.98rem;
+	line-height: 1.45;
+}
+
+.site-nav {
+	display: flex;
+	gap: 1.6rem;
+	font-family: var(--font-sans);
+	font-size: 0.74rem;
+	font-weight: 500;
+	text-transform: uppercase;
+	letter-spacing: 0.14em;
+}
+
+.site-nav a {
+	color: var(--ink-soft);
+	text-decoration: none;
+}
+
+.site-nav a:hover {
+	color: var(--accent);
+}
+
+.site-footer {
+	border-top: 1px solid var(--rule);
+	margin-top: clamp(2.5rem, 6vw, 4rem);
+	padding: 1.75rem 0 3rem;
+}
+
+.site-footer .wrap {
+	display: flex;
+	justify-content: space-between;
+	gap: 1rem;
+	flex-wrap: wrap;
+	font-family: var(--font-sans);
+	font-size: 0.78rem;
+	color: var(--ink-faint);
+}
+
+.site-footer .footer-links {
+	display: flex;
+	gap: 1.1rem;
+}
+
+.site-footer a {
+	color: var(--ink-faint);
+	text-decoration: none;
+}
+
+.site-footer a:hover {
+	color: var(--accent);
+}
+
+/* --- Links --- */
+a {
+	color: var(--accent);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+	text-decoration-thickness: 1px;
+	text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
+}
+
+a:hover {
+	color: var(--accent-strong);
+	text-decoration-color: currentColor;
+}
+
+/* --- Meta labels (dates, tags, bylines) --- */
+.meta {
+	font-family: var(--font-sans);
+	font-size: 0.78rem;
+	letter-spacing: 0.04em;
+	color: var(--ink-faint);
+}
+
+.meta a {
+	color: var(--ink-soft);
+}
+
+.eyebrow {
+	font-family: var(--font-sans);
+	font-size: 0.72rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.16em;
+	color: var(--accent);
+}
+
+.tag-list {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+.tag-list a,
+.tag-list .tag {
+	font-family: var(--font-sans);
+	font-size: 0.72rem;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+	text-decoration: none;
+	color: var(--ink-soft);
+	border: 1px solid var(--rule-strong);
+	border-radius: 999px;
+	padding: 0.14rem 0.62rem;
+}
+
+.tag-list a:hover {
+	color: var(--accent);
+	border-color: var(--accent);
+	background: var(--accent-wash);
+}
+
+/* --- Index hero (optional one-line lede under the masthead) --- */
+.hero {
+	margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
+	padding-bottom: clamp(1rem, 2.5vw, 1.4rem);
+	border-bottom: 1px solid var(--rule);
+}
+
+.hero-lede {
+	margin: 0;
+	max-width: var(--measure);
+	color: var(--ink-soft);
+	font-style: italic;
+	font-size: 1.28rem;
+	line-height: 1.5;
+}
+
+/* --- Featured post --- */
+.featured {
+	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
+	padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
+	border-bottom: 1px solid var(--rule);
+}
+
+.featured > .eyebrow {
+	margin: 0 0 0.55rem;
+}
+
+.featured .post-card {
+	padding: 0;
+	border-bottom: none;
+}
+
+.featured .post-title {
+	font-size: clamp(1.9rem, 4.5vw, 2.5rem);
+	line-height: 1.15;
+}
+
+.featured .excerpt {
+	font-size: 1.18rem;
+}
+
+/* --- Post listing (cards) --- */
+.post-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.post-card {
+	padding: clamp(1.1rem, 3vw, 1.5rem) 0;
+	border-bottom: 1px solid var(--rule);
+}
+
+.post-list > .post-card:first-child {
+	padding-top: 0;
+}
+
+.post-title {
+	font-size: 1.55rem;
+	line-height: 1.2;
+	margin: 0.35rem 0 0.4rem;
+	letter-spacing: -0.015em;
+	font-weight: 600;
+}
+
+.post-title a {
+	color: var(--ink);
+	text-decoration: none;
+}
+
+.post-title a:hover {
+	color: var(--accent);
+}
+
+.byline {
+	font-style: normal;
+}
+
+.excerpt {
+	margin: 0.5rem 0 0;
+	color: var(--ink-soft);
+}
+
+.read-more {
+	display: inline-block;
+	margin-top: 0.7rem;
+	font-family: var(--font-sans);
+	font-size: 0.82rem;
+	font-weight: 500;
+	letter-spacing: 0.02em;
+	text-decoration: none;
+}
+
+.read-more:hover {
+	text-decoration: underline;
+}
+
+.card-tags {
+	margin-top: 0.75rem;
+}
+
+/* --- Pagination --- */
+.pager {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 1rem;
+	margin-top: clamp(2rem, 5vw, 3rem);
+	font-family: var(--font-sans);
+	font-size: 0.85rem;
+}
+
+.pager a {
+	text-decoration: none;
+	font-weight: 500;
+}
+
+.pager .page-count {
+	color: var(--ink-faint);
+}
+
+/* --- Article --- */
+.post-header,
+.page-header {
+	margin-bottom: clamp(2rem, 5vw, 3rem);
+}
+
+.post-header h1,
+.page-header h1 {
+	font-size: clamp(2rem, 5vw, 3rem);
+	line-height: 1.1;
+	letter-spacing: -0.022em;
+	margin: 0.4rem 0 0.85rem;
+	font-weight: 600;
+}
+
+.post-header .meta {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.draft-banner {
+	font-family: var(--font-sans);
+	font-size: 0.8rem;
+	letter-spacing: 0.02em;
+	border: 1px dashed var(--accent);
+	color: var(--accent);
+	background: var(--accent-wash);
+	border-radius: var(--radius);
+	padding: 0.55rem 0.9rem;
+	margin-bottom: 1.5rem;
+}
+
+.draft-label {
+	font-family: var(--font-sans);
+	font-size: 0.68rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.12em;
+	color: var(--accent);
+	border: 1px dashed var(--accent);
+	border-radius: 999px;
+	padding: 0.1rem 0.5rem;
+	margin-right: 0.35rem;
+}
+
+/* --- Prose (rendered Markdown) --- */
+.prose {
+	max-width: var(--measure);
+}
+
+.prose > * + * {
+	margin-top: 1.45em;
+}
+
+.prose h2,
+.prose h3,
+.prose h4 {
+	line-height: 1.25;
+	letter-spacing: -0.012em;
+	margin-top: 2.2em;
+	font-weight: 600;
+}
+
+.prose h2 {
+	font-size: 1.65rem;
+}
+.prose h3 {
+	font-size: 1.32rem;
+}
+
+.prose a.heading-anchor {
+	color: inherit;
+	text-decoration: none;
+}
+
+.prose a.heading-anchor:hover {
+	color: var(--accent);
+}
+
+/* First-paragraph lead-in for a touch of editorial polish. */
+.prose > p:first-of-type {
+	font-size: 1.28rem;
+	line-height: 1.6;
+	color: var(--ink);
+}
+
+.prose img {
+	max-width: 100%;
+	height: auto;
+	border-radius: var(--radius);
+}
+
+.prose figure {
+	margin: 2rem 0;
+	text-align: center;
+}
+
+.prose figure img {
+	display: block;
+	margin: 0 auto;
+}
+
+.prose figcaption {
+	margin-top: 0.6rem;
+	font-family: var(--font-sans);
+	font-size: 0.8rem;
+	line-height: 1.5;
+	color: var(--ink-faint);
+}
+
+.prose blockquote {
+	margin-left: 0;
+	margin-right: 0;
+	padding-left: 1.3rem;
+	border-left: 3px solid var(--accent);
+	color: var(--ink-soft);
+	font-style: italic;
+}
+
+.prose code {
+	font-family: var(--font-mono);
+	font-size: 0.86em;
+	background: color-mix(in srgb, var(--ink) 7%, transparent);
+	padding: 0.12em 0.35em;
+	border-radius: 3px;
+}
+
+.prose pre {
+	background: var(--surface);
+	border: 1px solid var(--rule);
+	border-radius: var(--radius);
+	padding: 1rem 1.15rem;
+	overflow-x: auto;
+	font-size: 0.9rem;
+	line-height: 1.55;
+}
+
+.prose pre code {
+	background: none;
+	padding: 0;
+	font-size: inherit;
+}
+
+.prose table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.95rem;
+}
+
+.prose th,
+.prose td {
+	border: 1px solid var(--rule);
+	padding: 0.5rem 0.75rem;
+	text-align: left;
+}
+
+hr {
+	border: none;
+	border-top: 1px solid var(--rule);
+	margin: clamp(2rem, 5vw, 3rem) 0;
+}
+
+/* --- Prev / next --- */
+.post-nav {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 1.5rem;
+	margin-top: clamp(2.5rem, 6vw, 4rem);
+	padding-top: 1.75rem;
+	border-top: 1px solid var(--rule);
+	max-width: var(--measure);
+}
+
+.post-nav a {
+	text-decoration: none;
+	color: var(--ink);
+}
+
+.post-nav a:hover .post-nav-title {
+	color: var(--accent);
+}
+
+.post-nav .newer {
+	text-align: right;
+}
+
+.post-nav-label {
+	display: block;
+	font-family: var(--font-sans);
+	font-size: 0.72rem;
+	text-transform: uppercase;
+	letter-spacing: 0.12em;
+	color: var(--ink-faint);
+	margin-bottom: 0.3rem;
+}
+
+.post-nav-title {
+	font-weight: 600;
+	line-height: 1.25;
+}
+
+/* --- Newsletter CTA --- */
+.newsletter {
+	margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
+	max-width: var(--measure);
+	padding: clamp(1.5rem, 4vw, 2.1rem);
+	border: 1px solid var(--rule-strong);
+	border-radius: var(--radius);
+	background: var(--accent-wash);
+	text-align: center;
+}
+
+.newsletter h2 {
+	margin: 0 0 0.4rem;
+	font-size: 1.35rem;
+}
+
+.newsletter p {
+	margin: 0 0 1.1rem;
+	color: var(--ink-soft);
+	font-size: 1.02rem;
+}
+
+.button {
+	display: inline-block;
+	font-family: var(--font-sans);
+	font-size: 0.85rem;
+	font-weight: 600;
+	letter-spacing: 0.02em;
+	text-decoration: none;
+	color: var(--surface);
+	background: var(--accent);
+	border: 1px solid var(--accent);
+	border-radius: var(--radius);
+	padding: 0.6rem 1.4rem;
+}
+
+.button:hover {
+	background: var(--accent-strong);
+	border-color: var(--accent-strong);
+	color: var(--surface);
+}
+
+@media (prefers-color-scheme: dark) {
+	.button {
+		color: #1a1917;
+	}
+	.button:hover {
+		color: #1a1917;
+	}
+}
+
+/* --- Topics / Explore --- */
+.topic-group {
+	padding: clamp(1.5rem, 4vw, 2rem) 0;
+	border-bottom: 1px solid var(--rule);
+}
+
+.topic-group:first-of-type {
+	padding-top: 0;
+}
+
+.topic-group h2 {
+	font-size: 1.4rem;
+	margin: 0 0 0.9rem;
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 1rem;
+}
+
+.topic-group h2 a {
+	color: var(--ink);
+	text-decoration: none;
+}
+
+.topic-group h2 a:hover {
+	color: var(--accent);
+}
+
+.topic-group .count {
+	font-family: var(--font-sans);
+	font-size: 0.78rem;
+	font-weight: 400;
+	color: var(--ink-faint);
+}
+
+.topic-posts {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.55rem;
+}
+
+.topic-posts a {
+	color: var(--ink);
+	text-decoration: none;
+}
+
+.topic-posts a:hover {
+	color: var(--accent);
+}
+
+.topic-posts .date {
+	font-family: var(--font-sans);
+	font-size: 0.76rem;
+	color: var(--ink-faint);
+	margin-right: 0.6rem;
+}
+
+.empty-state {
+	color: var(--ink-soft);
+	font-style: italic;
+	padding: 3rem 0;
+}
+
+/* --- Minimal syntax highlighting (highlight.js token classes) --- */
+.hljs-comment,
+.hljs-quote {
+	color: var(--ink-faint);
+	font-style: italic;
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-built_in,
+.hljs-literal {
+	color: var(--accent);
+}
+.hljs-string,
+.hljs-attr,
+.hljs-template-tag {
+	color: #4c7a34;
+}
+.hljs-number,
+.hljs-title,
+.hljs-type {
+	color: #2f6b8f;
+}
+.hljs-name,
+.hljs-tag {
+	color: var(--accent-strong);
+}
+@media (prefers-color-scheme: dark) {
+	.hljs-string,
+	.hljs-attr,
+	.hljs-template-tag {
+		color: #a3c98a;
+	}
+	.hljs-number,
+	.hljs-title,
+	.hljs-type {
+		color: #8fc1e0;
+	}
+}
+
+@media (max-width: 34rem) {
+	.post-nav {
+		grid-template-columns: 1fr;
+	}
+	.post-nav .newer {
+		text-align: left;
+	}
+}