Mixtape

Cassette J-cards on a wooden desk: ruled paper, marker titles and numbered track lists.

0 uses · 0 likes

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

See the CSS

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=block');
/* Mixtape */
body.zbr-page {
  counter-reset: side track;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 23px),
    #2b1d14;
}
.zbr-card {
  backdrop-filter: none; border-radius: 6px;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(42, 33, 24, .09) 27px 28px);
  box-shadow: 0 2px 0 #cdbf9f, 0 14px 26px rgba(0, 0, 0, .45);
}
/* cassette window */
.zbr-box-profile::before, .cols-1 .zbr-card::before {
  content: '◉ ═══ ◉'; display: block; text-align: center; font-size: 1.3rem; letter-spacing: .15em; margin-bottom: 12px; color: #2a2118;
}
.zbr-box-title { font-family: 'Permanent Marker', cursive; font-size: 1.35rem; font-weight: 400; color: var(--accent); counter-increment: side; line-height: 1.1; }
.zbr-box-title::before { content: 'A' counter(side) ' · '; opacity: .6; }
.zbr-avatar { border: 0; border-radius: 4px; filter: sepia(.35) contrast(1.05); }
.zbr-name { font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: 2rem; line-height: 1.05; overflow-wrap: anywhere; }
.zbr-bio { opacity: .9; font-size: .95rem; }
.zbr-links { counter-reset: track; }
.zbr-link { counter-increment: track; background: none; border: 0; border-radius: 0; padding: 8px 0; font-weight: 700; }
.zbr-link::before { content: counter(track, decimal-leading-zero) '  '; font-weight: 400; opacity: .55; 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: rgba(42, 33, 24, .3); border-top-style: dashed; }
.zbr-table th { opacity: .75; text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 4px; filter: sepia(.35); }
.zbr-noavatar { background: #8a3b12; }
.zbr-online { color: #166534; }
.zbr-btn { background: var(--accent); color: #fff; border-radius: 3px; font-family: 'Permanent Marker', cursive; font-weight: 400; }
.zbr-views { color: #f3e9d2; opacity: .85; }