@usezanin/blog 0.1.0 → 0.3.0

package/styles.css

@@ -1,33 +1,41 @@
 /**
  * @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.
+ * Design language matches the Zanin admin: clean neutral surfaces, hairline
+ * borders, subtle shadows, one accent color. Every value routes through a
+ * --zanin-* CSS variable; override them via the site theme in the Zanin
+ * dashboard, the SDK `theme` config, or plain CSS.
  */
 .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-accent: #005bd3;
+  --zanin-canvas: #ffffff;
+  --zanin-surface: #fafafa;
+  --zanin-ink: #1a1a1a;
+  --zanin-ink-muted: #616161;
+  --zanin-ink-faint: #8a8a8a;
+  --zanin-hairline: #e3e3e3;
+  --zanin-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --zanin-font-heading: var(--zanin-font-body);
   --zanin-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  --zanin-base-size: 16.5px;
+  --zanin-heading-weight: 650;
   --zanin-measure: 720px;
-  --zanin-radius-card: 22px;
+  --zanin-radius: 12px;
+  /* Vertical rhythm multiplier (theme spacing: compact 0.8 / relaxed 1.3) */
+  --zanin-space: 1;
+
+  /* Derived */
+  --zanin-accent-strong: color-mix(in srgb, var(--zanin-accent) 82%, var(--zanin-ink));
+  --zanin-shadow: 0 1px 2px color-mix(in srgb, var(--zanin-ink) 7%, transparent);
 
   margin: 0 auto;
   max-width: var(--zanin-measure);
-  padding: 48px 24px 96px;
+  padding: calc(48px * var(--zanin-space)) 24px calc(96px * var(--zanin-space));
+  background: var(--zanin-canvas);
   color: var(--zanin-ink);
-  font-family: var(--zanin-font-sans);
-  font-size: 16px;
-  line-height: 1.6;
+  font-family: var(--zanin-font-body);
+  font-size: var(--zanin-base-size);
+  line-height: 1.65;
 }
 
 .zanin-blog a {
@@ -35,119 +43,164 @@
   text-decoration: none;
 }
 .zanin-blog a:hover {
-  color: var(--zanin-accent-pressed);
+  color: var(--zanin-accent-strong);
+  text-decoration: underline;
 }
 
 .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;
+  border: 1px solid var(--zanin-hairline);
+  border-radius: calc(var(--zanin-radius) / 1.5);
+  background: var(--zanin-surface);
+  color: var(--zanin-ink-muted);
+  font-size: 0.72em;
+  font-weight: 550;
+  letter-spacing: 0.01em;
+  padding: 2px 9px;
 }
 
 /* ---- Index ---------------------------------------------------------- */
 
 .zanin-index-header {
-  margin-bottom: 48px;
+  margin-bottom: calc(40px * var(--zanin-space));
 }
 .zanin-index-header h1 {
-  font-family: var(--zanin-font-serif);
-  font-size: 44px;
-  font-weight: 500;
-  letter-spacing: -0.015em;
-  line-height: 1.1;
+  font-family: var(--zanin-font-heading);
+  font-size: 2.5em;
+  font-weight: var(--zanin-heading-weight);
+  letter-spacing: -0.02em;
+  line-height: 1.12;
   margin: 0 0 8px;
   text-wrap: balance;
 }
 .zanin-index-header p {
   color: var(--zanin-ink-muted);
-  font-size: 18px;
+  font-size: 1.06em;
   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;
+  text-decoration: none;
 }
 .zanin-index-item h2 {
-  font-family: var(--zanin-font-serif);
-  font-size: 26px;
-  font-weight: 500;
-  letter-spacing: -0.01em;
-  line-height: 1.25;
+  font-family: var(--zanin-font-heading);
+  font-size: 1.45em;
+  font-weight: var(--zanin-heading-weight);
+  letter-spacing: -0.012em;
+  line-height: 1.28;
   margin: 0 0 6px;
   text-wrap: balance;
 }
+.zanin-index-item > a:hover h2 {
+  color: var(--zanin-accent);
+}
+.zanin-index-item > a:hover {
+  text-decoration: none;
+  color: inherit;
+}
 .zanin-index-item p {
   color: var(--zanin-ink-muted);
+  font-size: 0.94em;
   margin: 0;
-  max-width: 62ch;
+  max-width: 66ch;
 }
 .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;
+  flex-wrap: wrap;
+  font-size: 0.78em;
+  font-weight: 500;
+  gap: 8px;
   margin-bottom: 10px;
-  text-transform: uppercase;
+}
+.zanin-index-more {
+  color: var(--zanin-accent);
+  display: inline-block;
+  font-size: 0.85em;
+  font-weight: 550;
+  margin-top: 12px;
 }
 .zanin-index-empty {
   color: var(--zanin-ink-faint);
 }
 
+/* List layout (default): divided rows */
+.zanin-index--list .zanin-index-list {
+  display: flex;
+  flex-direction: column;
+}
+.zanin-index--list .zanin-index-item {
+  border-top: 1px solid var(--zanin-hairline);
+}
+.zanin-index--list .zanin-index-item:last-child {
+  border-bottom: 1px solid var(--zanin-hairline);
+}
+.zanin-index--list .zanin-index-item > a {
+  padding: calc(26px * var(--zanin-space)) 2px;
+}
+
+/* Grid layout: cards */
+.zanin-index--grid {
+  max-width: calc(var(--zanin-measure) * 1.5);
+}
+.zanin-index--grid .zanin-index-list {
+  display: grid;
+  gap: calc(20px * var(--zanin-space));
+  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
+}
+.zanin-index--grid .zanin-index-item {
+  background: var(--zanin-surface);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  box-shadow: var(--zanin-shadow);
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+}
+.zanin-index--grid .zanin-index-item:hover {
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--zanin-ink) 10%, transparent);
+  transform: translateY(-1px);
+}
+.zanin-index--grid .zanin-index-item > a {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: calc(22px * var(--zanin-space));
+}
+.zanin-index--grid .zanin-index-more {
+  margin-top: auto;
+  padding-top: 14px;
+}
+
 /* ---- Post header ----------------------------------------------------- */
 
 .zanin-post-header {
-  margin-bottom: 44px;
+  margin-bottom: calc(40px * var(--zanin-space));
 }
 .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;
+  font-size: 0.8em;
+  font-weight: 500;
+  gap: 8px;
+  margin-bottom: 14px;
 }
 .zanin-post-header h1 {
-  font-family: var(--zanin-font-serif);
-  font-size: 44px;
-  font-weight: 500;
-  letter-spacing: -0.015em;
+  font-family: var(--zanin-font-heading);
+  font-size: 2.5em;
+  font-weight: var(--zanin-heading-weight);
+  letter-spacing: -0.02em;
   line-height: 1.12;
-  margin: 0 0 14px;
+  margin: 0 0 12px;
   text-wrap: balance;
 }
 .zanin-post-lede {
   color: var(--zanin-ink-muted);
-  font-size: 19px;
+  font-size: 1.12em;
   line-height: 1.55;
   margin: 0;
   text-wrap: pretty;
@@ -156,92 +209,90 @@
 /* ---- Prose ----------------------------------------------------------- */
 
 .zanin-prose {
-  font-size: 17px;
-  line-height: 1.65;
+  line-height: 1.68;
 }
 .zanin-prose > * + * {
-  margin-top: 1.15em;
+  margin-top: calc(1.1em * var(--zanin-space));
 }
 .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;
+  font-family: var(--zanin-font-heading);
+  font-size: 1.6em;
+  font-weight: var(--zanin-heading-weight);
+  letter-spacing: -0.015em;
   line-height: 1.25;
-  margin-top: 2em;
-  text-wrap: balance;
+  margin-top: calc(1.9em * var(--zanin-space));
 }
 .zanin-prose h3 {
-  font-size: 20px;
-  font-weight: 650;
+  font-family: var(--zanin-font-heading);
+  font-size: 1.2em;
+  font-weight: var(--zanin-heading-weight);
   line-height: 1.3;
-  margin-top: 1.8em;
+  margin-top: calc(1.7em * var(--zanin-space));
 }
 .zanin-prose ul,
 .zanin-prose ol {
   padding-left: 1.4em;
 }
 .zanin-prose li + li {
-  margin-top: 0.4em;
+  margin-top: calc(0.4em * var(--zanin-space));
 }
 .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;
+  font-size: 1.05em;
+  margin: calc(1.5em * var(--zanin-space)) 0;
+  padding: 0.15em 0 0.15em 1.2em;
 }
 .zanin-prose code {
-  background: color-mix(in srgb, var(--zanin-ink) 6%, transparent);
+  background: var(--zanin-surface);
+  border: 1px solid var(--zanin-hairline);
   border-radius: 6px;
   font-family: var(--zanin-font-mono);
-  font-size: 0.88em;
-  padding: 0.15em 0.4em;
+  font-size: 0.86em;
+  padding: 0.1em 0.35em;
 }
 .zanin-prose img {
-  border-radius: var(--zanin-radius-card);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
   height: auto;
   max-width: 100%;
 }
 .zanin-prose hr {
   border: none;
   border-top: 1px solid var(--zanin-hairline);
-  margin: 2.5em 0;
+  margin: calc(2.4em * var(--zanin-space)) 0;
 }
 .zanin-prose table {
   border-collapse: collapse;
-  font-size: 15px;
+  font-size: 0.9em;
   width: 100%;
 }
 .zanin-prose th,
 .zanin-prose td {
   border-bottom: 1px solid var(--zanin-hairline);
-  padding: 10px 12px;
+  padding: 9px 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;
+  color: var(--zanin-ink-muted);
+  font-size: 0.82em;
+  font-weight: 600;
 }
 
 /* ---- 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);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  box-shadow: var(--zanin-shadow);
   display: flex;
-  gap: 14px;
-  padding: 18px 22px;
+  gap: 12px;
+  padding: calc(16px * var(--zanin-space)) 18px;
 }
 .zanin-callout-icon {
   align-items: center;
@@ -250,23 +301,23 @@
   color: var(--zanin-accent);
   display: flex;
   flex-shrink: 0;
-  font-size: 13px;
+  font-size: 0.78em;
   font-weight: 700;
-  height: 26px;
+  height: 24px;
   justify-content: center;
   margin-top: 2px;
-  width: 26px;
+  width: 24px;
 }
 .zanin-callout-warning .zanin-callout-icon {
-  background: rgba(217, 119, 6, 0.14);
-  color: #b45309;
+  background: #ffef9d;
+  color: #4f4700;
 }
 .zanin-callout-success .zanin-callout-icon {
-  background: rgba(22, 163, 74, 0.13);
-  color: #15803d;
+  background: #cdfee1;
+  color: #0c5132;
 }
 .zanin-callout-body {
-  font-size: 15.5px;
+  font-size: 0.94em;
 }
 .zanin-callout-body > * + * {
   margin-top: 0.5em;
@@ -282,31 +333,31 @@
   margin: 0;
 }
 .zanin-figure img {
-  border-radius: var(--zanin-radius-card);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
   height: auto;
   max-width: 100%;
   width: 100%;
 }
 .zanin-figure figcaption {
   color: var(--zanin-ink-faint);
-  font-size: 13.5px;
+  font-size: 0.82em;
   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;
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  box-shadow: var(--zanin-shadow);
+  padding: calc(18px * var(--zanin-space));
 }
 .zanin-chart-title {
-  color: var(--zanin-ink-faint);
-  font-size: 12px;
-  font-weight: 650;
-  letter-spacing: 0.09em;
+  color: var(--zanin-ink-muted);
+  font-size: 0.82em;
+  font-weight: 600;
   margin: 0 0 14px;
-  text-transform: uppercase;
 }
 .zanin-chart .recharts-text {
   fill: var(--zanin-ink-faint);
@@ -314,47 +365,50 @@
 
 .zanin-cta {
   align-items: center;
-  background: color-mix(in srgb, var(--zanin-accent) 7%, var(--zanin-surface));
-  border-radius: var(--zanin-radius-card);
+  background: var(--zanin-surface);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  box-shadow: var(--zanin-shadow);
   display: flex;
   flex-wrap: wrap;
-  gap: 18px;
+  gap: 16px;
   justify-content: space-between;
-  padding: 26px 30px;
+  padding: calc(22px * var(--zanin-space)) 24px;
 }
 .zanin-cta-title {
-  font-family: var(--zanin-font-serif);
-  font-size: 22px;
-  font-weight: 500;
+  font-family: var(--zanin-font-heading);
+  font-size: 1.15em;
+  font-weight: var(--zanin-heading-weight);
   margin: 0;
 }
 .zanin-cta-description {
   color: var(--zanin-ink-muted);
-  font-size: 15px;
+  font-size: 0.9em;
   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);
+  border-radius: calc(var(--zanin-radius) / 1.5);
   color: #fff !important;
   display: inline-block;
-  font-size: 15px;
-  font-weight: 650;
-  padding: 12px 26px;
-  transition: transform 0.12s ease, background 0.15s ease;
+  font-size: 0.9em;
+  font-weight: 600;
+  padding: 10px 20px;
+  text-decoration: none !important;
+  transition: background 0.15s ease, transform 0.1s ease;
   white-space: nowrap;
 }
 .zanin-cta-button:hover {
-  background: var(--zanin-accent-pressed);
+  background: var(--zanin-accent-strong);
 }
 .zanin-cta-button:active {
-  transform: scale(0.97);
+  transform: scale(0.98);
 }
 
 .zanin-embed-youtube {
   aspect-ratio: 16 / 9;
-  border-radius: var(--zanin-radius-card);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
   overflow: hidden;
 }
 .zanin-embed-youtube iframe {
@@ -365,84 +419,101 @@
 
 .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);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  box-shadow: var(--zanin-shadow);
   margin: 0;
-  padding: 22px 26px;
+  padding: calc(18px * var(--zanin-space)) 22px;
 }
 .zanin-tweet-text {
-  font-family: var(--zanin-font-serif);
-  font-size: 19px;
-  font-style: italic;
-  line-height: 1.5;
+  font-size: 1.02em;
+  line-height: 1.55;
 }
 .zanin-tweet footer {
   align-items: center;
   color: var(--zanin-ink-faint);
   display: flex;
-  font-size: 13.5px;
+  font-size: 0.82em;
   gap: 8px;
-  margin-top: 14px;
+  margin-top: 12px;
 }
 .zanin-tweet-author {
   color: var(--zanin-ink);
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .zanin-codeblock {
-  background: #1c1917;
-  border-radius: var(--zanin-radius-card);
-  color: #e7e5e4;
+  background: #1a1a1a;
+  border-radius: var(--zanin-radius);
+  color: #e3e3e3;
   overflow: hidden;
   position: relative;
 }
 .zanin-codeblock-lang {
-  color: #a8a29e;
+  color: #8a8a8a;
   font-family: var(--zanin-font-mono);
-  font-size: 11px;
-  letter-spacing: 0.09em;
+  font-size: 0.68em;
+  letter-spacing: 0.08em;
   position: absolute;
-  right: 16px;
+  right: 14px;
   text-transform: uppercase;
-  top: 12px;
+  top: 11px;
 }
 .zanin-codeblock pre {
   font-family: var(--zanin-font-mono);
-  font-size: 13.5px;
+  font-size: 0.82em;
   line-height: 1.6;
   margin: 0;
   overflow-x: auto;
-  padding: 20px 24px;
+  padding: calc(18px * var(--zanin-space)) 20px;
 }
 .zanin-codeblock code {
   background: none;
+  border: none;
   padding: 0;
 }
 
 .zanin-comparison {
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
   overflow-x: auto;
 }
+.zanin-comparison table {
+  margin: 0;
+}
+.zanin-comparison th,
+.zanin-comparison td {
+  padding: 10px 14px;
+}
+.zanin-comparison tr:last-child td {
+  border-bottom: none;
+}
 .zanin-comparison .zanin-highlight {
-  background: color-mix(in srgb, var(--zanin-accent) 7%, transparent);
+  background: color-mix(in srgb, var(--zanin-accent) 6%, transparent);
 }
 .zanin-check {
-  color: #15803d;
+  color: #0c5132;
   font-weight: 700;
 }
 .zanin-cross {
   color: var(--zanin-ink-faint);
 }
 
+.zanin-faq {
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  overflow: hidden;
+}
 .zanin-faq details {
-  border-top: 1px solid var(--zanin-hairline);
-  padding: 16px 4px;
+  border-bottom: 1px solid var(--zanin-hairline);
+  padding: calc(14px * var(--zanin-space)) 18px;
 }
 .zanin-faq details:last-child {
-  border-bottom: 1px solid var(--zanin-hairline);
+  border-bottom: none;
 }
 .zanin-faq summary {
   cursor: pointer;
-  font-weight: 650;
+  font-weight: 600;
   list-style: none;
 }
 .zanin-faq summary::-webkit-details-marker {
@@ -452,13 +523,15 @@
   color: var(--zanin-ink-faint);
   content: "+";
   float: right;
-  font-size: 18px;
+  font-size: 1.1em;
+  line-height: 1;
 }
 .zanin-faq details[open] summary::after {
   content: "–";
 }
 .zanin-faq details p {
   color: var(--zanin-ink-muted);
+  font-size: 0.94em;
   margin: 10px 0 0;
 }
 
@@ -466,11 +539,11 @@
 
 @media (max-width: 640px) {
   .zanin-blog {
-    padding: 32px 18px 64px;
+    padding: calc(32px * var(--zanin-space)) 18px calc(64px * var(--zanin-space));
   }
   .zanin-index-header h1,
   .zanin-post-header h1 {
-    font-size: 34px;
+    font-size: 1.9em;
   }
 }