@usezanin/blog 0.1.0

package/styles.css

@@ -0,0 +1,484 @@
+/**
+ * @usezanin/blog — themable reading styles.
+ *
+ * Every color and face routes through a CSS variable so host sites can
+ * re-brand by overriding the --zanin-* tokens; the defaults follow the Zanin
+ * design system: warm light canvas, ink (never pure black), one brand accent,
+ * serif for the content's voice, sans for chrome, pill-shaped tags.
+ */
+.zanin-blog {
+  --zanin-accent: #2563eb;
+  --zanin-accent-pressed: #1d4ed8;
+  --zanin-canvas: #fafaf9;
+  --zanin-surface: #ffffff;
+  --zanin-ink: #1c1917;
+  --zanin-ink-muted: #57534e;
+  --zanin-ink-faint: #a8a29e;
+  --zanin-hairline: #e7e5e4;
+  --zanin-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --zanin-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  --zanin-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  --zanin-measure: 720px;
+  --zanin-radius-card: 22px;
+
+  margin: 0 auto;
+  max-width: var(--zanin-measure);
+  padding: 48px 24px 96px;
+  color: var(--zanin-ink);
+  font-family: var(--zanin-font-sans);
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.zanin-blog a {
+  color: var(--zanin-accent);
+  text-decoration: none;
+}
+.zanin-blog a:hover {
+  color: var(--zanin-accent-pressed);
+}
+
+.zanin-tag {
+  display: inline-block;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--zanin-accent) 10%, transparent);
+  color: var(--zanin-accent);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 2px 12px;
+}
+
+/* ---- Index ---------------------------------------------------------- */
+
+.zanin-index-header {
+  margin-bottom: 48px;
+}
+.zanin-index-header h1 {
+  font-family: var(--zanin-font-serif);
+  font-size: 44px;
+  font-weight: 500;
+  letter-spacing: -0.015em;
+  line-height: 1.1;
+  margin: 0 0 8px;
+  text-wrap: balance;
+}
+.zanin-index-header p {
+  color: var(--zanin-ink-muted);
+  font-size: 18px;
+  margin: 0;
+  max-width: 52ch;
+}
+
+.zanin-index-list {
+  display: flex;
+  flex-direction: column;
+}
+.zanin-index-item {
+  border-top: 1px solid var(--zanin-hairline);
+}
+.zanin-index-item:last-child {
+  border-bottom: 1px solid var(--zanin-hairline);
+}
+.zanin-index-item > a {
+  color: inherit;
+  display: block;
+  padding: 28px 4px;
+  transition: opacity 0.15s ease;
+}
+.zanin-index-item > a:hover {
+  color: inherit;
+  opacity: 0.72;
+}
+.zanin-index-item h2 {
+  font-family: var(--zanin-font-serif);
+  font-size: 26px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  margin: 0 0 6px;
+  text-wrap: balance;
+}
+.zanin-index-item p {
+  color: var(--zanin-ink-muted);
+  margin: 0;
+  max-width: 62ch;
+}
+.zanin-index-meta {
+  align-items: center;
+  color: var(--zanin-ink-faint);
+  display: flex;
+  font-size: 12px;
+  font-weight: 600;
+  gap: 10px;
+  letter-spacing: 0.09em;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+}
+.zanin-index-empty {
+  color: var(--zanin-ink-faint);
+}
+
+/* ---- Post header ----------------------------------------------------- */
+
+.zanin-post-header {
+  margin-bottom: 44px;
+}
+.zanin-post-meta {
+  align-items: center;
+  color: var(--zanin-ink-faint);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  font-weight: 600;
+  gap: 10px;
+  letter-spacing: 0.09em;
+  margin-bottom: 16px;
+  text-transform: uppercase;
+}
+.zanin-post-header h1 {
+  font-family: var(--zanin-font-serif);
+  font-size: 44px;
+  font-weight: 500;
+  letter-spacing: -0.015em;
+  line-height: 1.12;
+  margin: 0 0 14px;
+  text-wrap: balance;
+}
+.zanin-post-lede {
+  color: var(--zanin-ink-muted);
+  font-size: 19px;
+  line-height: 1.55;
+  margin: 0;
+  text-wrap: pretty;
+}
+
+/* ---- Prose ----------------------------------------------------------- */
+
+.zanin-prose {
+  font-size: 17px;
+  line-height: 1.65;
+}
+.zanin-prose > * + * {
+  margin-top: 1.15em;
+}
+.zanin-prose p {
+  margin: 0;
+  text-wrap: pretty;
+}
+.zanin-prose h2 {
+  font-family: var(--zanin-font-serif);
+  font-size: 28px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  margin-top: 2em;
+  text-wrap: balance;
+}
+.zanin-prose h3 {
+  font-size: 20px;
+  font-weight: 650;
+  line-height: 1.3;
+  margin-top: 1.8em;
+}
+.zanin-prose ul,
+.zanin-prose ol {
+  padding-left: 1.4em;
+}
+.zanin-prose li + li {
+  margin-top: 0.4em;
+}
+.zanin-prose blockquote {
+  border-left: 3px solid var(--zanin-accent);
+  color: var(--zanin-ink-muted);
+  font-family: var(--zanin-font-serif);
+  font-size: 20px;
+  font-style: italic;
+  margin: 1.6em 0;
+  padding: 0.2em 0 0.2em 1.2em;
+}
+.zanin-prose code {
+  background: color-mix(in srgb, var(--zanin-ink) 6%, transparent);
+  border-radius: 6px;
+  font-family: var(--zanin-font-mono);
+  font-size: 0.88em;
+  padding: 0.15em 0.4em;
+}
+.zanin-prose img {
+  border-radius: var(--zanin-radius-card);
+  height: auto;
+  max-width: 100%;
+}
+.zanin-prose hr {
+  border: none;
+  border-top: 1px solid var(--zanin-hairline);
+  margin: 2.5em 0;
+}
+.zanin-prose table {
+  border-collapse: collapse;
+  font-size: 15px;
+  width: 100%;
+}
+.zanin-prose th,
+.zanin-prose td {
+  border-bottom: 1px solid var(--zanin-hairline);
+  padding: 10px 12px;
+  text-align: left;
+}
+.zanin-prose th {
+  color: var(--zanin-ink-faint);
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+/* ---- Built-in components --------------------------------------------- */
+
+.zanin-callout {
+  background: var(--zanin-surface);
+  border-radius: var(--zanin-radius-card);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--zanin-accent) 10%, transparent);
+  display: flex;
+  gap: 14px;
+  padding: 18px 22px;
+}
+.zanin-callout-icon {
+  align-items: center;
+  background: color-mix(in srgb, var(--zanin-accent) 12%, transparent);
+  border-radius: 999px;
+  color: var(--zanin-accent);
+  display: flex;
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 700;
+  height: 26px;
+  justify-content: center;
+  margin-top: 2px;
+  width: 26px;
+}
+.zanin-callout-warning .zanin-callout-icon {
+  background: rgba(217, 119, 6, 0.14);
+  color: #b45309;
+}
+.zanin-callout-success .zanin-callout-icon {
+  background: rgba(22, 163, 74, 0.13);
+  color: #15803d;
+}
+.zanin-callout-body {
+  font-size: 15.5px;
+}
+.zanin-callout-body > * + * {
+  margin-top: 0.5em;
+}
+.zanin-callout-body p {
+  margin: 0;
+}
+.zanin-callout-title {
+  font-weight: 650;
+}
+
+.zanin-figure {
+  margin: 0;
+}
+.zanin-figure img {
+  border-radius: var(--zanin-radius-card);
+  height: auto;
+  max-width: 100%;
+  width: 100%;
+}
+.zanin-figure figcaption {
+  color: var(--zanin-ink-faint);
+  font-size: 13.5px;
+  margin-top: 10px;
+  text-align: center;
+}
+
+.zanin-chart {
+  background: var(--zanin-surface);
+  border-radius: var(--zanin-radius-card);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--zanin-accent) 8%, transparent);
+  padding: 22px;
+}
+.zanin-chart-title {
+  color: var(--zanin-ink-faint);
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0.09em;
+  margin: 0 0 14px;
+  text-transform: uppercase;
+}
+.zanin-chart .recharts-text {
+  fill: var(--zanin-ink-faint);
+}
+
+.zanin-cta {
+  align-items: center;
+  background: color-mix(in srgb, var(--zanin-accent) 7%, var(--zanin-surface));
+  border-radius: var(--zanin-radius-card);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  justify-content: space-between;
+  padding: 26px 30px;
+}
+.zanin-cta-title {
+  font-family: var(--zanin-font-serif);
+  font-size: 22px;
+  font-weight: 500;
+  margin: 0;
+}
+.zanin-cta-description {
+  color: var(--zanin-ink-muted);
+  font-size: 15px;
+  margin: 4px 0 0;
+}
+.zanin-cta-button {
+  background: var(--zanin-accent);
+  border-radius: 999px;
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--zanin-accent) 35%, transparent);
+  color: #fff !important;
+  display: inline-block;
+  font-size: 15px;
+  font-weight: 650;
+  padding: 12px 26px;
+  transition: transform 0.12s ease, background 0.15s ease;
+  white-space: nowrap;
+}
+.zanin-cta-button:hover {
+  background: var(--zanin-accent-pressed);
+}
+.zanin-cta-button:active {
+  transform: scale(0.97);
+}
+
+.zanin-embed-youtube {
+  aspect-ratio: 16 / 9;
+  border-radius: var(--zanin-radius-card);
+  overflow: hidden;
+}
+.zanin-embed-youtube iframe {
+  border: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.zanin-tweet {
+  background: var(--zanin-surface);
+  border-radius: var(--zanin-radius-card);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--zanin-accent) 8%, transparent);
+  margin: 0;
+  padding: 22px 26px;
+}
+.zanin-tweet-text {
+  font-family: var(--zanin-font-serif);
+  font-size: 19px;
+  font-style: italic;
+  line-height: 1.5;
+}
+.zanin-tweet footer {
+  align-items: center;
+  color: var(--zanin-ink-faint);
+  display: flex;
+  font-size: 13.5px;
+  gap: 8px;
+  margin-top: 14px;
+}
+.zanin-tweet-author {
+  color: var(--zanin-ink);
+  font-weight: 650;
+}
+
+.zanin-codeblock {
+  background: #1c1917;
+  border-radius: var(--zanin-radius-card);
+  color: #e7e5e4;
+  overflow: hidden;
+  position: relative;
+}
+.zanin-codeblock-lang {
+  color: #a8a29e;
+  font-family: var(--zanin-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.09em;
+  position: absolute;
+  right: 16px;
+  text-transform: uppercase;
+  top: 12px;
+}
+.zanin-codeblock pre {
+  font-family: var(--zanin-font-mono);
+  font-size: 13.5px;
+  line-height: 1.6;
+  margin: 0;
+  overflow-x: auto;
+  padding: 20px 24px;
+}
+.zanin-codeblock code {
+  background: none;
+  padding: 0;
+}
+
+.zanin-comparison {
+  overflow-x: auto;
+}
+.zanin-comparison .zanin-highlight {
+  background: color-mix(in srgb, var(--zanin-accent) 7%, transparent);
+}
+.zanin-check {
+  color: #15803d;
+  font-weight: 700;
+}
+.zanin-cross {
+  color: var(--zanin-ink-faint);
+}
+
+.zanin-faq details {
+  border-top: 1px solid var(--zanin-hairline);
+  padding: 16px 4px;
+}
+.zanin-faq details:last-child {
+  border-bottom: 1px solid var(--zanin-hairline);
+}
+.zanin-faq summary {
+  cursor: pointer;
+  font-weight: 650;
+  list-style: none;
+}
+.zanin-faq summary::-webkit-details-marker {
+  display: none;
+}
+.zanin-faq summary::after {
+  color: var(--zanin-ink-faint);
+  content: "+";
+  float: right;
+  font-size: 18px;
+}
+.zanin-faq details[open] summary::after {
+  content: "–";
+}
+.zanin-faq details p {
+  color: var(--zanin-ink-muted);
+  margin: 10px 0 0;
+}
+
+/* ---- Responsiveness & motion preferences ------------------------------ */
+
+@media (max-width: 640px) {
+  .zanin-blog {
+    padding: 32px 18px 64px;
+  }
+  .zanin-index-header h1,
+  .zanin-post-header h1 {
+    font-size: 34px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .zanin-blog *,
+  .zanin-blog *::before,
+  .zanin-blog *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}