I created a custom callout that looks like a handwritten note on manila colored lined paper. I personally use the “Salted Caramel” font installed locally as it’s got a really nice handwritten look, but if you don’t have that font, I included an import for Google’s “Ms Madi” font, which is nice as well…you’ll just need to uncomment the import line at the top of this snippet.
/* === Optional import if sharing (leave commented) === */
/*
@import url('https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap');
*/
/* === Reset base callout === */
.callout[data-callout="handwritten"] {
padding: 0 !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* === Paper-like checklist container inside handwritten callout === */
.callout[data-callout="handwritten"] ul.contains-task-list {
background-color: #fdf6e3;
background-image:
repeating-linear-gradient(
to bottom,
#fdf6e3,
#fdf6e3 23px,
#e0d6b9 24px
),
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAANCAYAAABt8n6pAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH5AMKDDIk2MSnJwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAVSURBVAjXY2RgYPjPAAEmABm5ALVep3DaAAAAAElFTkSuQmCC");
background-size: 100% 24px, cover;
border: none;
box-shadow:
inset 2px 0 0 #d4c4a1,
inset -2px 0 0 #d4c4a1,
inset 0 2px 0 #d4c4a1,
inset 1px 1px 0 #c9b894,
inset -1px 1px 0 #c9b894;
border-bottom: none;
border-radius: 14px 14px 0 0;
padding: 1.5em 2em;
margin: 0.5em 0 1.5em 0;
font-family: "Salted Caramel", cursive !important;
font-size: 1.4em;
line-height: 1.65;
max-width: 720px;
position: relative;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
/* ✅ Torn edge only on the inner checklist paper block */
.callout[data-callout="handwritten"] ul.contains-task-list::after {
content: "";
position: absolute;
bottom: -2px; /* increase offset so it's clearly below */
left: 0;
width: 100%;
height: 15px;
background: #fdf6e3;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 25'%3E%3Cpath d='M0,12 L2,22 L5,3 L8,20 L12,1 L15,24 L19,5 L22,18 L26,2 L30,23 L34,4 L38,19 L42,1 L46,22 L50,6 L54,20 L58,2 L62,24 L66,7 L70,17 L74,3 L78,21 L82,5 L86,19 L90,1 L94,23 L98,8 L100,15 L100,25 L0,25 Z' fill='white'/%3E%3C/svg%3E");
mask-size: 100% 100%;
mask-repeat: no-repeat;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
z-index: 2;
pointer-events: none;
}
/* Ensure the checklist paper container is relatively positioned */
.callout[data-callout="handwritten"] ul.contains-task-list {
position: relative;
z-index: 1;
}
/* === Checkbox spacing and style */
.callout[data-callout="handwritten"] input[type="checkbox"] {
transform: scale(1.2);
margin-right: 0.6em;
accent-color: #a47847;
}
/* === Tweak callout title */
.callout[data-callout="handwritten"] .callout-title {
font-size: 1.1em;
font-family: system-ui, sans-serif;
background-color: transparent;
color: #444;
padding-left: 0.3em;
padding-bottom: 0.2em;
margin-bottom: 0.2em;
}
