A code-editor look: slate panels, traffic-light dots, indexed links and JSON-style details.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Slate */
body.zbr-page { font-size: 15px; }
.zbr-card { backdrop-filter: none; border-radius: 8px; border: 1px solid #30394a; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
/* window dots */
.zbr-card::before {
content: ''; display: block; align-self: flex-start; width: 56px; height: 12px; margin-bottom: 16px;
background:
radial-gradient(circle 5px at 6px 6px, #ff5f56 98%, transparent) 0 0 / 56px 12px no-repeat,
radial-gradient(circle 5px at 26px 6px, #ffbd2e 98%, transparent) 0 0 / 56px 12px no-repeat,
radial-gradient(circle 5px at 46px 6px, #27c93f 98%, transparent) 0 0 / 56px 12px no-repeat;
}
.zbr-box-title { font-size: .85rem; font-weight: 500; color: #8b949e; }
.zbr-box-title::before { content: '## '; color: #6e7681; }
.zbr-avatar { border: 1px solid #30394a; border-radius: 8px; }
.zbr-name { font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1.2; overflow-wrap: anywhere; }
.zbr-name::before { content: '@'; color: var(--accent); }
.zbr-bio { opacity: .75; font-size: .9rem; }
.zbr-links, .zbr-posts { counter-reset: i -1; }
.zbr-link { counter-increment: i; background: none; border: 0; border-radius: 0; padding: 7px 0; font-weight: 400; }
.zbr-link::before { content: '[' counter(i) '] '; color: #6e7681; white-space: pre; }
.zbr-link:hover { background: none; color: var(--accent); transform: none; text-decoration: underline; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: #2c3544; }
.zbr-table th { color: #7ee787; opacity: 1; font-weight: 400; }
.zbr-table th::before { content: '"'; }
.zbr-table th::after { content: '":'; }
.zbr-table td { color: #a5d6ff; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 8px; }
.zbr-noavatar { background: #2c3a52; color: var(--accent); }
.zbr-online { color: #7ee787; font-weight: 500; }
.zbr-btn { background: #238636; color: #fff; border-radius: 6px; font-weight: 500; }
.zbr-views { color: #6e7681; opacity: 1; }
