Notebook Doodle

Lined school paper with wobbly pen outlines, highlighter titles and little scribbles.

0 uses · 0 likes

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

See the CSS

/* Notebook Doodle */
body.zbr-page {
  font-size: 19px;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(80, 130, 220, .3) 31px 32px), #fdfcf5;
}
@media (min-width: 1200px) {
  body.zbr-page {
    background:
      linear-gradient(90deg, transparent 6%, rgba(220, 60, 60, .45) 6% calc(6% + 2px), transparent calc(6% + 2px)),
      repeating-linear-gradient(180deg, transparent 0 31px, rgba(80, 130, 220, .3) 31px 32px), #fdfcf5;
  }
}
.zbr-col { gap: 22px; }
.zbr-card {
  backdrop-filter: none; border: 2.5px solid #2b3a67; border-radius: 18px 5px 16px 7px / 7px 16px 5px 18px;
  box-shadow: 4px 4px 0 rgba(43, 58, 103, .22);
}
.zbr-col > .zbr-card:nth-child(even) { border-radius: 6px 17px 7px 15px / 16px 6px 18px 5px; }
.zbr-box-profile::before, .cols-1 .zbr-card::before {
  content: '☆ ✎ ♡'; display: block; margin-bottom: 4px; font-size: 1.1rem; letter-spacing: .4em; color: var(--accent); transform: rotate(-4deg); text-align: center;
}
.zbr-box-title {
  display: inline-block; font-size: 1.5rem; font-weight: 400; line-height: 1.1; padding: 0 6px;
  background: linear-gradient(transparent 55%, #ffe066 55%); transform: rotate(-1.5deg);
}
.zbr-avatar { border: 3px solid #2b3a67; border-radius: 52% 48% 55% 45% / 48% 54% 46% 52%; }
.zbr-name { font-size: 2.3rem; font-weight: 400; line-height: 1; text-decoration: underline wavy var(--accent); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 6px 0; font-weight: 400; font-size: 1.15rem; }
.zbr-link::before { content: '→ '; color: var(--accent); }
.zbr-link:hover { background: none; transform: translateX(4px); color: var(--accent); }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(43, 58, 103, .3); border-top-style: dashed; }
.zbr-table th { opacity: 1; color: var(--accent); }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border: 2px solid #2b3a67; border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%; }
.zbr-noavatar { background: #4c6ef5; }
.zbr-online { color: #15803d; }
.zbr-btn { background: #ffe066; color: #2b3a67; border: 2px solid #2b3a67; border-radius: 12px 4px 10px 5px; box-shadow: 3px 3px 0 #2b3a67; font-weight: 400; font-size: 1rem; }
.zbr-views { opacity: 1; background: #fdfcf5; width: fit-content; margin-inline: auto; padding: 0 8px; }