The meaning of life is just to be alive. It is so plain and so obvious and so simple. And yet, everybody rushes around in a great panic as if it were necessary to achieve something beyond themselves.
This is the second best piece of art I’ve ever made. And a reminder to myself that if you always carry a sharpie with you, the muse or cosmos or God or whatever will open new doors of expression.
This guide walks through how to create a visual blog design on Pagecord using only CSS and the built-in settings. The result is a blog where posts appear as color-coded square sticky notes, with colors tied to your post tags.
Here is a link to an image that shows the design in action (just in case I change the design before you come across this post - very likely, lol).
You'll need to copy, paste and edit css code. If you're already familiar with css, this should make sense to you. If you are brand new to css, you may want to learn some css basics first.
If you're ready, you'll need:
Decide on 4–6 tags you'll use consistently across your posts, and assign a color to each. Keep the tag names short and lowercase. Example:
Tag |
Color |
|---|---|
writing |
Orange |
notes |
Yellow |
photos |
White |
links |
Green |
quotes |
Purple |
These tag names need to match exactly what you enter in Pagecord when tagging posts.
This is what mine looks like:
In Pagecord's nav settings, add your page links (About, Now, Contact, etc.). These links will be styled as purple stickie notes on the blog.
Here's mine as an example:
In the Pagecord Settings > About > Bio create hyperlinks in the bio field. One per tag. Type the tag name, select it, and link it to:
https://yourblog.pagecord.com/posts?tag=your-tag-name
Do this for each of your tags. These will become the small color-coded tag stickies below the nav in the header.
Example of my setup
In Settings > Appearance > Layout, set to Cards.
Then paste the following into Pagecord's custom CSS field. Replace the tag names and colors with your own:
/* ======================================= */
/* Header layout */
/* ======================================= */
.blog header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.titlebar {
display: flex;
flex-wrap: nowrap;
gap: 0.75rem;
flex: 1;
min-width: 0;
justify-content: center;
}
.avatar-container {
display: flex;
flex-wrap: nowrap;
gap: 0.75rem;
flex: 1;
min-width: 0;
}
.avatar { display: none; }
/* Blog title sticky */
.blog-title {
flex: 1;
min-width: 0;
aspect-ratio: 1 / 1;
max-width: 150px;
max-height: 150px;
border-radius: 2px;
box-shadow: 0 3px 10px rgba(0,0,0,0.13);
padding: 14px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background: #f5c842;
transform: rotate(-1deg);
font-size: 1.4rem;
font-weight: 700;
color: #1a1a1a;
order: 1;
}
.blog-title a, .blog-title a:visited { color: #1a1a1a; text-decoration: none; }
/* Nav stickies */
nav {
flex-basis: 100%;
order: 4;
background: transparent;
box-shadow: none;
aspect-ratio: unset;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.4rem;
padding: 0;
transform: none;
margin-bottom: 0.5rem;
justify-content: center;
}
nav a {
width: 80px;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 2px;
font-size: 0.9rem;
font-weight: 700;
color: #1a1a1a;
text-decoration: none;
background: #b39ddb;
box-shadow: 0 3px 10px rgba(0,0,0,0.13);
}
nav a:nth-child(1) { transform: rotate(-1deg); }
nav a:nth-child(2) { transform: rotate(0.6deg); }
nav a:nth-child(3) { transform: rotate(-0.8deg); }
nav a:nth-child(4) { transform: rotate(0.4deg); }
nav a:nth-child(5) { transform: rotate(-0.5deg); }
nav a:hover { text-decoration: underline; }
/* Tag stickies (from bio field) */
.bio {
flex-basis: 100%;
order: 5;
aspect-ratio: unset;
background: transparent;
box-shadow: none;
transform: none;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.4rem;
justify-content: center;
overflow: visible;
}
.bio p { display: contents; }
.bio p br { display: none; }
.bio a, .bio p a {
width: 75px;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 2px;
font-size: 0.65rem;
font-weight: 700;
color: #1a1a1a;
text-decoration: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
/* Tag sticky colors — match href to your tag names */
.bio a[href*="writing"], .bio p a[href*="writing"] { background: #f4a435; transform: rotate(-1.2deg); }
.bio a[href*="notes"], .bio p a[href*="notes"] { background: #f5c842; transform: rotate(0.8deg); }
.bio a[href*="photos"], .bio p a[href*="photos"] { background: #ffffff; border: 1px solid #e0e0e0; transform: rotate(1.1deg); }
.bio a[href*="links"], .bio p a[href*="links"] { background: #8ecf5a; transform: rotate(-0.6deg); }
.bio a[href*="quotes"], .bio p a[href*="quotes"] { background: #b39ddb; transform: rotate(-0.9deg); }
/* ======================================= */
/* Post stream layout */
/* ======================================= */
.blog-container { max-width: 500px; margin-left: auto; margin-right: auto; }
.post-stream-item { margin-bottom: 1.75rem; }
/* ======================================= */
/* Cards — square post-it style */
/* ======================================= */
.post-card-content {
aspect-ratio: 1 / 1;
width: 75%;
margin-left: auto;
margin-right: auto;
border: none;
border-radius: 2px;
padding: 24px 26px 20px;
box-shadow: 0 3px 10px rgba(0,0,0,0.13);
display: flex;
flex-direction: column;
overflow: hidden;
background: #f5c842;
}
.post-card:hover .post-card-content {
box-shadow: 0 5px 14px rgba(0,0,0,0.16);
transform: none;
}
/* Card colors by tag — replace tag names and colors with your own */
[data-tags~="writing"] .post-card-content { background: #f4a435; }
[data-tags~="notes"] .post-card-content { background: #f5c842; }
[data-tags~="photos"] .post-card-content { background: #ffffff; border: 1px solid #e0e0e0; }
[data-tags~="links"] .post-card-content { background: #8ecf5a; }
[data-tags~="quotes"] .post-card-content { background: #b39ddb; }
/* ======================================= */
/* Rotation — 20 posts before repeating */
/* ======================================= */
.post-card:nth-child(1) { transform: rotate(-1.5deg); }
.post-card:nth-child(2) { transform: rotate(1.2deg); }
.post-card:nth-child(3) { transform: rotate(-2deg); }
.post-card:nth-child(4) { transform: rotate(0.8deg); }
.post-card:nth-child(5) { transform: rotate(-1deg); }
.post-card:nth-child(6) { transform: rotate(1.8deg); }
.post-card:nth-child(7) { transform: rotate(-0.6deg); }
.post-card:nth-child(8) { transform: rotate(1.3deg); }
.post-card:nth-child(9) { transform: rotate(-1.8deg); }
.post-card:nth-child(10) { transform: rotate(0.5deg); }
.post-card:nth-child(11) { transform: rotate(-1.2deg); }
.post-card:nth-child(12) { transform: rotate(1.6deg); }
.post-card:nth-child(13) { transform: rotate(-0.8deg); }
.post-card:nth-child(14) { transform: rotate(2deg); }
.post-card:nth-child(15) { transform: rotate(-1.4deg); }
.post-card:nth-child(16) { transform: rotate(0.9deg); }
.post-card:nth-child(17) { transform: rotate(-1.7deg); }
.post-card:nth-child(18) { transform: rotate(1.1deg); }
.post-card:nth-child(19) { transform: rotate(-2deg); }
.post-card:nth-child(20) { transform: rotate(0.6deg); }
/* ======================================= */
/* Card typography */
/* ======================================= */
.post-card-title {
font-size: 2rem;
font-weight: 700;
color: #1a1a1a;
line-height: 1.2;
margin: auto 0;
}
.post-card-title ~ .post-card-summary { display: none; }
.post-card-summary {
font-size: 1.25rem;
font-weight: 400;
color: #1a1a1a;
line-height: 1.3;
overflow: hidden;
margin: auto 0;
}
.post-card-meta {
margin-top: auto;
flex-shrink: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.post-card-date { font-size: 0.75rem; color: #2a2a2a; opacity: 0.65; font-style: italic; }
.post-card-badge { display: none; }
/* ======================================= */
/* Post title colors on individual posts */
/* ======================================= */
.post-title { color: #f5c842; }
[data-tags~="writing"] .post-title { color: #f4a435; }
[data-tags~="notes"] .post-title { color: #f5c842; }
[data-tags~="photos"] .post-title { color: #3c3f39; }
[data-tags~="links"] .post-title { color: #8ecf5a; }
[data-tags~="quotes"] .post-title { color: #b39ddb; }
In Pagecord, tag each post with the appropriate tag name. The CSS will automatically apply the correct card color and post title color based on the tag.
When sending a post to your pagecord by email, adding a tag(s) is easy.
href attribute, so the tag name in your URL must match exactly what you use in the CSS selector.From several years ago and right before I deleted my twitter account.
I couldn’t find one place to find all the awesome improv things around my area (called the seacoast), so I made it. Local improv teams can post their upcoming shows, classes, workshops, jams aka open sessions, auditions, or festivals. Folks in the improv community can have one place to find all the great improv happenings.
We have a large and kind community and I hope this is helpful for everyone.
Here’s how it works to submit:
Check it out!
Here's the thread on LinkedIn where my sketchnote was mentioned.
Started up the morning walk and yoga practice again. Feels good (physical, mentally, and spiritually) to be moving more.
I was wandering along the beach this morning, as the tide was coming in. To avoid the waves, I dodged, skipped over a rock pile, and scooted playfully. I don’t mind getting my sneakers muddy or wet. For a couple seconds, I played a fun game with the waves. I smiled and continued up the beach like a normal adult.
I then eyed a person nearing me from the other way. I didn’t notice them at first as they were behind the rock pile. They chuckled at my play. Instead of being embarrassed I just smiled. They did too. We traveled our separate ways without any words being shared. Turning away, I caught a playful spring in their step.
What a simple joy to be a kid again. It’s fun.
Took a moment to update my Now page.
A few weeks ago my position was eliminated at Liberty Mutual. Honestly, I'd been building toward something new for a while. The elimination just removed the last reason to wait.
So here's what I'm doing. And I'm going to do it with the garage door open.
I've spent the last couple of years quietly developing a facilitation practice called Playing with Complexity. It lives at the intersection of improv, complexity science, and experience design. The short version: I help creative teams navigate uncertainty through embodied, playful experiences that actually change how people work together.
To do that well, I need to go deeper on some things I've been circling for a while.
Here's the plan.
This Monday, March 16 I'm attending a Fast Futures training from the Institute for the Future. Ninety minutes on signals and drivers of change. This is the foundational skill of futures thinking I've been meaning to develop properly. I'll be sketchnoting it.
Starting now through early April I'm working through the Cynefin training series from Dave Snowden. Cynefin is one of the most credible frameworks for making sense of complexity in organizations. I've been adjacent to it for years. Time to go in properly. It's video-based, which isn't my favorite format, but it includes a book and I'll be sketchnoting as I go.
April 9 I start a five-week cohort at IDEO U's Human Centered Systems Thinking. Combining the analytical tools of systems thinking with human-centered design to make sense of complex challenges. Four hours a week, cohort-based, which is how I learn best.
Running alongside all of this: a backlog of YouTube conversations with complexity science practitioners I've been meaning to watch. I'm treating those as a Tiny Experiment. I’ll sketchnote three, see what emerges, decide what to do with the rest.
I have an accountability partner. My friend Chris and I are meeting every two weeks to talk about what we're learning and what's emerging. He's been a thinking partner for years. Having him in the loop makes it real.
What I'll be doing here is leaving the door open. I’ll be posting rough doodles / sketchnotes. Half-formed thoughts and things that confused me. Things that connected unexpectedly. Short posts, mostly (with a drawing sometimes). Occasionally something longer when an idea emerges.
I'm not waiting until I have something polished to say. That's the whole point.
If you want to follow along, this is the place. If you're working in similar spaces (complexity, futures thinking, facilitation, improv) I'd love to know you're out there.
The garage door is open.
