Midnight Ink

Blue-black ink on grainy night paper, set in a calm italic serif.

1 uses · 0 likes

Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.

See the CSS

/* Midnight Ink */
html, body { overflow-x: clip; }
body.zbr-page {
  font-size: 18px;
  background:
    radial-gradient(ellipse 60% 40% at 85% 0, #1b2a52 0, transparent 70%),
    radial-gradient(ellipse 50% 40% at 0 100%, #131f3d 0, transparent 70%),
    #0a0f1c fixed;
}
/* paper grain over everything */
body.zbr-page::before {
  content: ''; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.zbr-card { backdrop-filter: none; border-radius: 4px; box-shadow: none; padding: 28px 24px; }
.zbr-box-title { font-size: 1.3rem; font-weight: 400; font-style: italic; color: var(--accent); }
.zbr-avatar { border: 0; border-radius: 50%; box-shadow: 0 0 0 6px rgba(143, 180, 255, .12); filter: grayscale(.3) contrast(1.05); }
.zbr-name { font-size: 2.4rem; font-weight: 400; font-style: italic; letter-spacing: -.01em; line-height: 1.05; overflow-wrap: anywhere; }
.zbr-text { line-height: 1.75; }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 9px 0; font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(143, 180, 255, .4); }
.zbr-link:hover { background: none; color: var(--accent); transform: none; text-decoration-color: var(--accent); }
.zbr-links, .zbr-posts { gap: 0; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(143, 180, 255, .12); }
.zbr-links .zbr-link, .zbr-posts .zbr-link { border-top: 0; }
.zbr-table th { font-style: italic; font-weight: 400; opacity: .7; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 50%; filter: grayscale(.3); }
.zbr-noavatar { background: #1e2c52; color: var(--accent); }
.zbr-online { color: #86efac; font-weight: 400; font-style: italic; }
.zbr-btn { background: var(--accent); color: #0a0f1c; font-weight: 500; }
.zbr-views { font-style: italic; opacity: .5; }