Every block is a 90s window, with title bars, bevels and a taskbar.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Retro Desktop */
body.zbr-page { padding-bottom: 56px; }
.zbr-card {
backdrop-filter: none;
border-radius: 0;
padding: 4px 4px 12px;
box-shadow: inset -2px -2px #000, inset 2px 2px #fff, inset -4px -4px #808080, inset 4px 4px #dfdfdf, 6px 6px 0 rgba(0, 0, 0, .3);
}
.zbr-box-body { padding: 8px 10px 0; }
/* the block title is the window's title bar */
.zbr-box-title, .zbr-box-profile::before, .cols-1 .zbr-card::before {
display: flex; align-items: center; justify-content: space-between;
margin: 0; padding: 3px 4px 3px 8px; font-size: .9rem; font-weight: 700;
background: linear-gradient(90deg, #000080, #1084d0); color: #fff;
}
.zbr-box-title::after, .zbr-box-profile::before { content: '_ □ ✕'; letter-spacing: 5px; font-size: .75rem; }
.zbr-box-profile::before { content: 'profile.exe'; }
.cols-1 .zbr-card::before { content: 'profile.exe'; align-self: stretch; }
.zbr-avatar { border-radius: 0; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.zbr-name { font-size: 1.5rem; }
/* white "text field" areas */
.zbr-bio, .zbr-text, .zbr-table, .zbr-wall-form {
opacity: 1; width: 100%; padding: 8px; text-align: left;
background: #fff; border: 0;
box-shadow: inset 2px 2px #808080, inset -1px -1px #dfdfdf;
}
.zbr-table th, .zbr-table td { border: 0; padding: 2px 4px; }
.zbr-table th { opacity: 1; color: #000080; }
.zbr-links { gap: 6px; }
.zbr-link {
background: #c0c0c0; color: #000; border: 0; border-radius: 0; font-weight: 400; text-align: center; padding: 8px;
box-shadow: inset -2px -2px #000, inset 2px 2px #fff, inset -3px -3px #808080;
}
.zbr-link:hover { background: #c0c0c0; color: #000; transform: none; outline: 1px dotted #000; outline-offset: -6px; }
.zbr-link:active { box-shadow: inset 2px 2px #000, inset -2px -2px #fff; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 0; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.zbr-noavatar { background: #000080; }
.zbr-comment { border-top: 1px solid #808080; box-shadow: inset 0 1px #fff; }
.zbr-online { color: #006400; }
.zbr-btn, .zbr-btn-ghost {
background: #c0c0c0; color: #000; border-radius: 0; font-weight: 400; padding: 6px 14px; text-decoration: none; opacity: 1;
box-shadow: inset -2px -2px #000, inset 2px 2px #fff, inset -3px -3px #808080;
}
.zbr-btn:active { box-shadow: inset 2px 2px #000, inset -2px -2px #fff; }
.zbr-views {
opacity: 1; text-align: left; padding: 2px 6px; font-size: .8rem; background: #c0c0c0;
box-shadow: inset 1px 1px #808080, inset -1px -1px #fff;
}
/* taskbar */
html::after {
content: '▤ Start'; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: 34px; padding: 0 10px;
display: flex; align-items: center;
background: #c0c0c0; box-shadow: inset 0 2px #fff;
font: 700 .9rem 'Pixelify Sans', sans-serif; color: #000;
}
