A plug-and-play chop for all your creation festival needs
Want more interesting things for the festival? Go here!
The People's Chop
I made a little HTML chop mark a while back. A personal stamp. A mark of authorship. A bureaucratic sigil you could slam down in the corner of a post like a minor deity approving a permit.
It worked. Until I shed my skin the last time... (oops)
Each letter had its own span. Its own rotation. Its own fussy little nudges and micro-adjustments like I was typesetting a ransom note for a very stylish villain. Which is fun when you are me. Less fun when you are someone who just wants to drop in their initials and move on with your life.
And that felt wrong. If a thing is meant to be shared, it shouldnβt require ritual knowledge.
The Problem
The original chop was a fixed 25Γ25 box. It assumed:
- Exactly three letters.
- Exactly the letters I used.
- Exactly the spacing I dialed in through minor obsessive geometry.
Which is charming. And tyrannical. And you know how we feel about tyranny around here. If you were ABM, great. If you were WZ?
Sorry. The box wins.
And I donβt like systems that privilege the median case.
The Code
The container is inline-flex, uses width: fit-content, and the padding defines the visual weight. The whole chop rotates via a CSS variable:
transform: rotate(var(--chop-rotate));
Want it crooked? Change the variable. Want it loud? Override the colors. Want it smaller? Adjust a single font-size variable.
The box grows to match the initials. Two letters. Four letters. A chaotic five if youβre feeling revolutionary.
The chop no longer dictates identity. Identity dictates the chop.
All together now
<span class="chop" style="--chop-rotate:-7deg;">ABM</span>
.chop{
/* user-tweakables */
--chop-rotate: -5deg;
--chop-bg: var(--accent-color);
--chop-fg: var(--background-color);
--chop-border: var(--background-color);
--chop-font-size: 1.65rem; /* overall scale */
--chop-pad-y: .35em;
--chop-pad-x: .55em;
--chop-border-w: 6px;
--chop-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content; /* grows with initials */
aspect-ratio: 1 / 1; /* forces square */
/* uncomment this if you use wide initials and want to limit the overall size of the chop
max-width: 6rem;
*/
padding: var(--chop-pad-y) var(--chop-pad-x);
border: var(--chop-border-w) double var(--chop-border);
border-radius: var(--chop-radius);
background: var(--chop-bg);
color: var(--chop-fg);
font-family: 'Vibes', cursive;
font-size: var(--chop-font-size);
line-height: 1;
letter-spacing: -0.12em;
transform: rotate(var(--chop-rotate));
box-shadow: 2px 2px 0 rgba(0,0,0,.25);
user-select: none;
text-transform: uppercase;
white-space: nowrap;
}
Setup for Bear
- Log into your dashboard
- Click on Themes link
- Paste the CSS at the bottom of your theme code
- Save
- Add the HTML with your initials in any post you like.
Bonus points for making the HTML itself a text shortcut on your preferred platform...
The Quiet Joy of Making It Easier
Thereβs a particular pleasure in removing unnecessary cleverness. The old version was clever. The new version is useful. And useful things spread.
If you want to stamp your work with a little visual violence β a tilted bureaucratic blessing, a block of color that says βI was hereβ β now you can. No ritual required.Just initials.
Rotate to taste.
ABM