2026-03-05 10:36:28
I use a lot of public domain art, but recently I've been thinking about cyberpunk, so art from the 1700's doesn't feel quite appropriate.
Modern images aren't quite right either, skylines and streetwear are great, but we need some cyberpunk edge. I want something that has a techy touch and looks not quite right. Something glitchy!
So I thought about glitch art, something I haven't done since college!
Glitch art is basically about doing stuff with files that you aren't meant to, to create interesting visual effects. There's lots of ways to do it, but I've been messing around with Databending.
Databending is done by loading an image into a software it isn't meant to go in, and then editing it in that software. In my case, I loaded images into audacity, added audio effects, and then exported them as images, here's what one looked like before and after.
2026-03-04 21:24:00
I read this great quote shared by Prasatt:
Be more generous than necessary. No one on their deathbed has ever regretted giving too much away. There is no point to being the richest person in the cemetery. Kevin Kelly
I love it. It’s so true, just like the saying, “always be a little kinder than necessary.”
Costs nothing, means everything. A precious gift for both the giver and the receiver. Something no money can buy.
I also think generosity is an important aspect of personal blogging. Not that everything needs to be free. If you feel like adding a “Buy me a coffee” button, or want to try other ways to make a few bucks, go for it. Give it a try.
But first, you really need to be honest with yourself about the intent.
If the answer even slightly leans toward the latter, don’t do it. You will get disappointed.
“I offer all this for free and people don’t even think it’s worth a cup of coffee. Why even bother continuing?”
You'll end up quitting blogging for the wrong reasons. Or maybe you started blogging for the wrong ones.
I have a full-time job. I would love to work 75 percent and spend more time blogging, but my salary won’t allow it. I could try asking my readers to support me, I even get the question sometimes, but don't dare do it.
I’m afraid it would lead to me getting “clever” about blogging. I’m afraid it would turn passion into pressure.
That's my two cents (which is 100% more than I earn from blogging).
2026-03-04 12:41:00
og post: https://spice.bearblog.dev/on-being-talentless/
Keep in mind I am just a random stranger from the Bearoverse who subscribes to her blog, and by all accounts I am someone whose opinion can easily be disregarded. But her words landed hard with me this evening.
Reading this felt like looking at something lifted straight out of a very old LiveJournal post of mine from twenty years ago. Because of that, I felt compelled to respond. I could be completely wrong about all of this, of course.
I strongly suspect this response would exceed the character count of most guestbook platforms, so I am posting it here in the hope that Tuesday happens to see it.
Feeling average can hurt, especially if you grew up surrounded by people who seem naturally exceptional. I know that feeling well.
My father is a very talented woodworker. My sister is an absolute angel with stained glass. My mom paints with this delicate precision that still amazes me. Meanwhile I have been doing photography for years and still second-guess simple operations all the time. Things someone “at my experience level” probably should not hesitate over anymore.
For a long time that made me feel like maybe I was just the mediocre one in the lineup.
What time eventually teaches you, especially once you spend enough years in the professional world, is that a huge percentage of people are simply winging it. They have been winging it long enough that it starts to look like confidence or talent from the outside.
There is also a strange hierarchy that forms around skills and professions where things are made to look more exclusive, more mystical, more “elite” than they really are. A lot of it quietly signals to others to stay out of the room. But once you have been around long enough, you start noticing how much of that structure is just smoke and mirrors.
One small thing I noticed while reading Tuesday's post is that it is thoughtful, structured, and honest in a way that a lot of writing on the internet simply is not. That may not feel like a talent from the inside, but from the outside it certainly reads like one.
The irony is that the people who worry about being average are usually the ones paying the closest attention to their own shortcomings. That self-awareness can feel painful, but it is often the same thing that eventually leads someone to develop real depth in whatever they do.
So feeling average is not necessarily evidence that you are. Sometimes it is simply evidence that you are paying attention. ■
🎧 Natalie Walker - Mars via Lush on SomaFM
2026-03-04 09:18:00
After a nearly 20 year run, I have deleted the last of my social media accounts. I dabbled in MySpace a bit early in my early teens, but really started in earnest with Facebook my senior year in high school when I received my college email address (back then FB required a .edu to create an account). At first, it was fun to friend new people I met at college parties, post funny statuses, and "poke" the cute girls (ask your parents, kids).
I was a bit late to the Instagram party and joined around 2013. That too was fun at the start. I worked in the service industry, so I used the app as a way to find the cool new bars and restaurants, or post updates about what I was doing at my coffee shop. I got a real sense of community out of those interactions over shared interests, and the early creators were fun to watch grow. Online personas weren't a business yet, it was just people having fun posting about cool stuff in their lives.
Over the next few years I watched from a distance as other platforms would pop up and fizzle out (RIP, Vine), or blow up into the propaganda juggernauts we know them as today (Twitter, Reddit). I never took my posting seriously, or had delusions of making money off it, but I enjoyed seeing what other people had to share.
During all this time, accounts turned into personal brands for some and engagement became the commodity. Posts became formulaic in an attempt to ride the algorithm. It got shitty. Plenty of post-mortems have been written about the death of social media and I'm not here to add to the heap. This post is merely my own autobiographical eulogy for my own social media days.
At the end of 2024 I dumped Instagram and Facebook, after not really using either for a few years. I had a Twitter, but never posted or read anything on it and deleted it ages ago. I made the jump to the Fediverse through Mastodon and Pixelfed, but microblogging just isn't my jam, and posting my photos on an app just doesn't butter my biscuit anymore. I don't want to read or write sub-500 character takes on the state of whatever, and glancing at someone's photos for a fraction of a second as they fly by with the help of my finger by isn't fulfilling. Now, I realize these are "me" problems and not problems with the platforms themselves, but I think that gets to the heart of why I'm dumping social media.
What I want from the internet has changed.
I realize that social media is not the entire internet, but it does make up a large part of how I interact with the internet. On microblog platforms, nearly every post is an argument for or against something. I find it mentally exhausting, yet I willingly invite those opinions into my life through the glowing portal I carry in my pocket. On photo-sharing apps, it's difficult for me to build an appreciation for the art I see when it's the size of a playing card in my hand. I take all of the amazing creativity I see for granted because it's right there at my beck and call. Neither of these scenarios, I feel, are adding value to my life experiences and, ultimately, that value is what I want from the internet.
I also can't deny the fact that I have changed quite a bit as a person. Through nearly a decade of sobriety and almost four years of therapy, I'm finding internal validation rather than seeking it from other people. I've done a lot of work on myself and like the person I've become. Social media just doesn't add to or enhance those positive feelings for me anymore like it used to, which is OK. I existed and thrived before I had social media accounts, and I will exist and thrive now that I don't have them anymore. I look forward to exploring new (to me) corners of the internet, learning new skills, and engaging with people through places like Bear.
And, if you still have social media and are enjoying it, good on you! We need more things that bring us joy in these uncertain times.
:)
2026-03-04 01:08:00
Trigger warning: Everything you’ve seen in the news + mental health and anxiety
School shootings are not common in the country where I live. In fact, we can count them on one hand and still have fingers left over. When they do happen, they’re a true anomaly because guns here are not easy to access. Still, back in 2017, there was a shooting at a school in the north, where a teenager, around 14 years old, opened fire on his teacher and several classmates.
The tragedy unfolded the way these events usually do. After causing the damage, the young boy took his own life. His reasons were never known, and the media blamed depression as usual. It later came out that he had stolen the gun from his father, who, being a wealthy man, had the means to legally own and carry a firearm.
The attack was captured by a security camera inside the classroom where it happened. Someone, for some reason, leaked the video to the internet. Within hours, the country’s biggest media outlets were publishing it on their websites, alongside crime scene photos showing the condition of the victims.
At that time, I was addicted to the news and didn’t even know it. I scrolled Twitter all day, at all times, on my desktop and on my phone. I wanted to be aware of everything, and when a story piqued my curiosity, I would dive deeper into it. The day the tragedy I mentioned at the beginning of this post happened was the day I decided I didn’t want to know what was going on in the world anymore.
The video showed up on my timeline and gave me a trauma that, honestly, still triggers me when I remember it. I chose to watch it, but those images reached me against my will. The impact that news had on me was so strong that a few months later I deleted my Twitter account, and I haven’t had one since.
And I know, we’ve all seen a traumatic video online at some point in our lives. It’s almost like a rite of passage, especially if you used the internet in the Y2K era when everything was even less regulated. But maybe at that moment my mental health simply said, “This is as far as I can go, bro”.
This comes up because over the past couple of years the possibility of a third world war has been breathing down our necks, and every single day a new large-scale tragedy takes over the headlines: pedophiles, invasions of other countries, hate crimes, and the list goes on. Not to mention that, on top of that, I also have to cope with the local tragedies in my own country.
Several years ago, I decided to ignore what’s happening in the world, and I strongly recommend it to anyone who struggles with anxiety or has a high level of empathy.
I know this is an unpopular and very privileged position, because I understand and respect that staying informed—especially in times like these—is necessary in order to act prudently in case of an emergency, particularly in countries at war where there’s a constant threat. However, nothing that appears in the news is within my control, and the endless flow of information I could be consuming would ultimately just be fuel for frustration.
This is something I even discussed in therapy for a while. My therapist explained that these anxious thoughts related to tragedies or news could make my body believe that I am—or was—in those dangerous situations, further dysregulating my nervous system and potentially leading me (in a more extreme case) into a depressive episode.
Understanding this only made stepping away from the news make even more sense. When I read about a violent story or learned of a tragedy, my brain would automatically start thinking about the suffering of the people involved, to the point where I imagined things beyond what the news itself described.
It’s very similar to a storytelling principle common in horror: it’s scarier to show less and leave more to the imagination than to show the crime itself. Not knowing exactly what happened or what was done to the character on screen is often more terrifying than witnessing their fate.
My brain took it upon itself to fill in the blanks—but instead of interpreting fiction, it did so with the horrors of reality. In other words: a true torture for my nervous system.
I don’t like being lukewarm. In fact, I consider myself naturally rebellious and I have a strong sense of justice. But for me, the time came to accept that if I continued consuming the news, my mental health would keep spiraling downward to the point where I wouldn’t be able to function in society.
And I’m not proud of it, because I believe that for things to improve, we have to call out everything that’s wrong. Turning a blind eye to atrocities to protect our own sensitivity IS NOT THE SOLUTION.1 Much of the problem is how the media operates and how those stories are presented.
Still, stepping away from all of that was what I had to do. If it’s what you also need to do, don’t feel bad about it. Step away from the news.
I believe that when something truly important happens, I’ll find out one way or another. But no one needs to constantly feed on small fragments of tragic information, most of the time based on what “could happen”, designed to generate anxiety and keep people glued to news portals so those assholes can cash in on clicks.
I’ve always had deep respect for those who fight every day for the ideals and rights of people in vulnerable situations. Keep calling out injustice, keep showing the world how wrong it is, break everything if you must, and keep fighting for a world where global headlines grow less tragic with time. Thank you for doing something that I just can't mentally do.↩
2026-03-03 21:47:00
I mentioned earlier that my next theme would be “quite the opposite when it comes to looks” compared to Bearful. I wasn’t exaggerating.
Say hello to Pixel Bear!
The theme is a celebration of Sylvia’s awesome pixel bears, which she created for the ongoing Bearblog Creation Festival. It comes with a pixelated, retro-inspired style and a bunch of geeky little details.
The Grid. A digital frontier. I tried to picture clusters of information as they moved through the computer. Kevin Flynn
Pixel Bear is based on the Bearful theme, so most add-ons should work fine, even though I haven’t tested them all.
I’ve also included a new upvote button, updated looks for the guestbook and status log, plus side note (.pixel-note) and image frame (.pixel-frame) styles.
I’ve just touched down in Sweden after two months in Thailand, so there might be a few jet lag quirks.
👆 Even if that's true, it was mostly an excuse to show you how the side note looks.
Last, but definitely not least, an optional style to show a pixel bear, or any image you like, in the footer. This is what started it all, the very reason this theme exists. Thank you, Sylvia!
If you want to try the Pixel Bear theme on your blog, simply copy the styles below, head over to your Bear theme settings, paste them in, and you’re done.
Happy pixelated blogging!
/*
* Pixel Bear — a pixelated Bear theme
* Version 0.3.0 | 2026-03-03
* Robert Birming | robertbirming.com
*/
:root {
color-scheme: light dark;
--width: 72ch;
--font-main: ui-monospace, monospace;
--font-secondary: ui-monospace, monospace;
--font-scale: 1em;
--background-color: #f0e8d8;
--heading-color: #3b2e20;
--text-color: #4a3c2e;
--link-color: #2e6e4e;
--visited-color: #8a7e6e;
--code-background-color: #e4dac6;
--code-color: #4a3c2e;
--blockquote-color: #5e4e3e;
--border-color: #4a3c2e;
--muted-color: #8a7e6e;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #222129;
--heading-color: #d4c8b0;
--text-color: #b8ae9a;
--link-color: #6ecf8e;
--visited-color: #9a9a7a;
--code-background-color: #1a1924;
--code-color: #b8ae9a;
--blockquote-color: #9a8e7a;
--border-color: #b8ae9a;
--muted-color: #847b6e;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
max-width: var(--width);
margin-inline: auto;
padding: 20px;
font-family: var(--font-secondary);
font-size: var(--font-scale);
line-height: 1.6;
overflow-wrap: break-word;
color: var(--text-color);
background-color: var(--background-color);
background-image:
linear-gradient(
to right,
color-mix(in srgb, var(--border-color) 6%, transparent) 1px,
transparent 1px
),
linear-gradient(
to bottom,
color-mix(in srgb, var(--border-color) 6%, transparent) 1px,
transparent 1px
);
background-size: 12px 12px;
}
p {
margin-block: 1.2em;
}
hr,
img,
figure,
blockquote,
table,
.highlight, .code,
.statuslog,
.pixel-note,
.gallery,
.preview {
margin-block: 1.8em;
}
h1, h2, h3, h4, h5, h6 {
margin-block: 1.6em 0.5em;
font-family: var(--font-main);
line-height: 1.4;
color: var(--heading-color);
}
h1 { font-size: 1.6em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }
a {
color: var(--link-color);
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-style: dotted;
text-underline-offset: 0.2em;
}
a:hover {
text-decoration-style: solid;
}
a:focus-visible {
outline: 2px solid var(--link-color);
outline-offset: 2px;
}
main a:visited {
color: var(--visited-color);
}
hr {
border: 0;
text-align: center;
line-height: 1;
}
hr::after {
content: "□ □ □ □ □";
letter-spacing: 0.25em;
color: var(--muted-color);
font-size: 0.7em;
}
img {
max-width: 100%;
height: auto;
display: block;
image-rendering: pixelated;
}
figure {
margin-inline: 0;
}
figure img,
figure p {
margin-block: 0;
}
figcaption {
margin-block-start: 0.8em;
font-size: 0.85em;
text-align: center;
color: var(--muted-color);
}
.inline {
width: auto !important;
}
blockquote {
margin-inline: 0;
border: 2px solid var(--border-color);
border-inline-start: 6px solid var(--border-color);
padding: 0.75em 1.25em;
color: var(--blockquote-color);
font-style: italic;
position: relative;
}
blockquote::before {
content: "QUOTE";
position: absolute;
top: -0.75em;
left: 0.8em;
padding: 0 0.4em;
font-size: 0.7em;
font-style: normal;
letter-spacing: 0.08em;
background: var(--background-color);
color: var(--muted-color);
}
blockquote cite {
display: table;
margin-block-start: 1.6em;
margin-inline-start: auto;
padding: 0.2em 0.6em;
font-size: 0.75em;
font-style: normal;
background-color: var(--border-color);
color: var(--background-color);
text-transform: uppercase;
letter-spacing: 0.08em;
box-shadow: 2px 2px 0 0 var(--border-color);
}
blockquote cite::before {
content: "ref_id: ";
text-transform: none;
color: color-mix(in srgb, var(--background-color) 85%, transparent);
}
code {
font-family: monospace;
padding-inline: 0.3em;
background-color: var(--code-background-color);
color: var(--code-color);
}
pre {
margin: 0;
}
pre code {
padding: 0;
background: none;
}
.highlight, .code {
padding: 0.75em 1em;
overflow-x: auto;
background-color: var(--code-background-color);
color: var(--code-color);
border: 2px solid var(--border-color);
}
table {
width: 100%;
border-collapse: collapse;
border: 2px solid var(--border-color);
}
th, td {
padding: 0.5em 0.75em;
text-align: start;
border: 1px solid var(--border-color);
}
th {
font-weight: bold;
background-color: var(--border-color);
color: var(--background-color);
}
time {
font-style: normal;
color: var(--muted-color);
}
button {
margin: 0;
cursor: pointer;
}
input, textarea, button {
font: inherit;
letter-spacing: inherit;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--link-color);
outline-offset: 2px;
}
header {
margin-block: 0 2em;
padding-block-end: 1.5em;
border-bottom: 2px dashed var(--border-color);
text-align: center;
}
header a.title {
display: inline-block;
text-decoration: none;
}
header a.title:hover {
background-color: transparent;
text-decoration: none;
}
header a.title h1 {
display: inline-block;
margin-block: 0 0.75em;
font-size: 1.5em;
line-height: 1.2;
background-color: var(--code-background-color);
color: var(--text-color);
border: 2px solid var(--border-color);
padding: 0.35em 0.6em;
box-shadow: 4px 4px 0 0 var(--border-color);
}
header a.title:hover h1 {
transform: translate(-1px, -1px);
box-shadow: 5px 5px 0 0 var(--border-color);
}
nav {
display: flex;
justify-content: center;
gap: 0.25em;
flex-wrap: wrap;
}
nav a {
text-decoration: none;
padding: 0.15em 0.4em;
font-size: 0.95em;
text-transform: uppercase;
letter-spacing: 0.04em;
}
nav a:hover {
background-color: var(--link-color);
color: var(--background-color);
text-decoration: none;
}
nav a::before {
content: "► ";
color: color-mix(in srgb, var(--muted-color) 75%, transparent);
font-size: 0.75em;
vertical-align: 0.15em;
}
nav a:hover::before,
nav a:focus-visible::before {
color: var(--background-color);
}
/* Blog list */
ul.blog-posts {
margin-block-end: 1.6em;
list-style: none;
padding: 0;
}
ul.blog-posts li {
display: flex;
align-items: center;
gap: 0.75em;
padding: 0.55rem 0.9rem 0.55rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--text-color) 12%, var(--background-color));
}
ul.blog-posts li:last-child {
border-bottom: 0;
}
ul.blog-posts li a {
order: 1;
flex: 1;
min-width: 0;
font-weight: bold;
text-decoration: none;
}
ul.blog-posts li a::before {
content: "▸ ";
color: color-mix(in srgb, var(--muted-color) 25%, transparent);
font-size: 0.85em;
vertical-align: 0.1em;
}
ul.blog-posts li:hover a::before,
ul.blog-posts li a:focus-visible::before {
color: var(--link-color);
}
ul.blog-posts li a:hover {
text-decoration: none;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
ul.blog-posts li span {
order: 2;
flex: 0 0 auto;
margin-inline-start: auto;
white-space: nowrap;
padding: 0.1em 0.5em;
font-size: 0.8em;
border: 1px solid color-mix(in srgb, var(--border-color) 20%, transparent);
background: color-mix(in srgb, var(--background-color) 75%, transparent);
color: var(--muted-color);
}
ul.blog-posts li:hover span {
border-color: var(--link-color);
color: var(--link-color);
}
/* Blog posts */
header nav p,
.post main > h1 + p {
margin-block-start: 0.25em;
}
.post main > h1 {
margin-block-end: 0;
}
body main > h1:first-child {
margin-block-start: 0;
}
/* Upvote button */
.upvote-count {
font-size: 0.75em;
}
footer {
margin-block-start: 4em;
padding: 1.8em 1em;
border: 2px solid var(--border-color);
position: relative;
text-align: center;
font-size: 0.85em;
word-spacing: -0.05em;
background-color: color-mix(in srgb, var(--code-background-color) 40%, transparent);
}
footer::before {
content: "SYSTEM.END";
position: absolute;
top: -0.8em;
left: 50%;
transform: translateX(-50%);
padding: 0 0.6em;
font-size: 0.7em;
letter-spacing: 0.1em;
background: var(--background-color);
color: var(--muted-color);
border: 2px solid var(--border-color);
}
footer p {
margin-block: 0.5em;
color: var(--text-color);
}
footer a {
color: var(--link-color);
margin-inline: 0.1em;
text-transform: lowercase;
font-weight: bold;
text-decoration: none;
}
footer a::before {
content: "[";
color: var(--muted-color);
}
footer a::after {
content: "]";
color: var(--muted-color);
}
footer a:hover {
background-color: var(--link-color);
color: var(--background-color);
text-decoration: none;
}
::selection {
background-color: var(--link-color);
color: var(--background-color);
}
mark {
background-color: var(--code-background-color);
color: var(--text-color);
padding-inline: 0.3em;
}
@media only screen and (max-width: 767px) {
ul.blog-posts li {
flex-wrap: wrap;
gap: 0.4em;
}
ul.blog-posts li span {
flex: 0 0 100%;
margin-inline-start: 0;
font-size: 0.75em;
}
}
/* Print styles */
@media print {
body {
max-width: 100%;
padding: 0;
background: none;
color: #000;
}
a {
color: #000;
text-decoration: underline;
}
hr::after {
color: #000;
}
.highlight, .code {
border: 1px solid #ccc;
}
header,
footer,
#upvote-form,
.upvote-button,
.tags {
display: none;
}
}
/*
* Want add-ons and style options?
* Visit my growing Bear library:
* https://robertbirming.com/bear-library/
*/
/* Footer image (uncomment and change URL to show a pixel bear or any image in the footer)
footer > span:last-child::before {
content: "";
display: block;
width: 96px;
height: 96px;
margin: 1.8em auto;
background: url("https://your-image-url.gif") no-repeat center / contain;
image-rendering: pixelated;
}
*/
/* Upvote: Pixel toast */
#upvote-form > small {
display: block;
margin-block-start: 1.8rem;
font-size: 1em;
}
#upvote-form .upvote-button {
display: inline-block;
padding: 0.25em 0.6em;
border: 2px solid var(--border-color);
background: var(--code-background-color);
color: var(--text-color);
font: inherit;
font-size: 0.85em;
letter-spacing: 0.05em;
cursor: pointer;
box-shadow: 2px 2px 0 0 var(--border-color);
}
#upvote-form .upvote-button svg,
#upvote-form .upvote-button .upvote-count {
display: none;
}
#upvote-form .upvote-button::before {
content: "▲ TOAST";
}
#upvote-form .upvote-button:focus-visible {
outline: 2px solid var(--link-color);
outline-offset: 2px;
}
@media (hover: hover) {
#upvote-form .upvote-button:not([disabled]):hover {
background-color: var(--link-color);
color: var(--background-color);
border-color: var(--link-color);
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 0 var(--border-color);
}
}
#upvote-form .upvote-button.upvoted,
#upvote-form .upvote-button[disabled] {
opacity: 0.6;
cursor: default;
box-shadow: none;
color: var(--text-color) !important;
}
#upvote-form .upvote-button.upvoted::before,
#upvote-form .upvote-button[disabled]::before {
content: "▲ TOASTED";
}
/* Status log */
.statuslog {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.3em 1em;
max-width: 34rem;
margin-inline: auto;
padding: 1em 1.1em;
color: var(--text-color);
background: var(--code-background-color);
border: 2px solid var(--border-color);
position: relative;
}
.statuslog::before {
content: "STATUS";
position: absolute;
top: -0.75em;
left: 0.8em;
padding: 0 0.4em;
font-size: 0.7em;
letter-spacing: 0.08em;
background: var(--background-color);
color: var(--muted-color);
}
.statuslog-emoji {
font-size: 2.9rem;
line-height: 1;
align-self: start;
}
.statuslog-content {
font-size: 1em;
overflow-wrap: break-word;
}
.statuslog-content > :first-child {
margin-block-start: 0;
}
.statuslog-content > :last-child {
margin-block-end: 0;
}
footer .statuslog {
text-align: start;
}
/* Image frame (add class="pixel-frame" to a <figure> or wrapping <div>) */
.pixel-frame {
border: 2px solid var(--border-color);
padding: 0.75em;
position: relative;
background: var(--code-background-color);
}
.pixel-frame::before {
content: "IMG";
position: absolute;
top: -0.75em;
left: 0.8em;
padding: 0 0.4em;
font-size: 0.7em;
letter-spacing: 0.08em;
background: var(--background-color);
color: var(--muted-color);
}
.pixel-frame img {
margin: 0;
}
.pixel-frame figcaption {
margin-block: 0.6em 0;
}
/* Guestbook (guestbooks.meadow.cafe) */
#guestbooks___guestbook-form-container form {
display: flex;
flex-direction: column;
gap: 0.8em;
margin-block: 1.6em;
}
#guestbooks___guestbook-form-container :is(input, textarea, button) {
font: inherit;
letter-spacing: inherit;
appearance: none;
}
#guestbooks___guestbook-form-container :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
width: 100%;
padding: 0.65em 0.85em;
color: var(--text-color);
background: var(--background-color);
border: 2px solid var(--border-color);
transition: border-color 0.15s ease, background-color 0.15s ease;
}
#guestbooks___guestbook-form-container :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus-visible {
outline: 2px solid var(--link-color);
outline-offset: 2px;
}
#guestbooks___guestbook-form-container textarea {
min-height: 7.5em;
resize: vertical;
}
#guestbooks___guestbook-form-container :is(button, input[type="submit"]) {
align-self: flex-start;
padding: 0.55em 0.9em;
color: var(--text-color);
background: var(--code-background-color);
border: 2px solid var(--border-color);
cursor: pointer;
box-shadow: 2px 2px 0 0 var(--border-color);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
#guestbooks___guestbook-form-container :is(button, input[type="submit"]):focus-visible {
outline: 2px solid var(--link-color);
outline-offset: 2px;
}
@media (hover: hover) {
#guestbooks___guestbook-form-container :is(button, input[type="submit"]):hover {
background-color: var(--link-color);
color: var(--background-color);
border-color: var(--link-color);
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 0 var(--border-color);
}
}
#guestbooks___guestbook-messages-header {
display: flex;
align-items: center;
gap: 0.4em;
margin-block: 2em 1em;
}
#guestbooks___guestbook-messages-header::before {
content: "💬";
translate: 0 1px;
}
#guestbooks___guestbook-messages-container > div {
margin-block: 1.2em;
padding: 1em 1.2em;
font-size: 0.95em;
border: 2px solid var(--border-color);
}
#guestbooks___guestbook-messages-container p {
margin: 0.35em 0 0;
padding: 0;
}
#guestbooks___guestbook-messages-container blockquote {
margin: 0.35em 0 0;
padding: 0;
border: 0;
background: none;
font-style: normal;
}
#guestbooks___guestbook-messages-container blockquote::before {
content: none;
}
#guestbooks___guestbook-messages-container time {
font-size: 0.85em;
opacity: 0.8;
white-space: nowrap;
}
#guestbooks___guestbook-messages-container .guestbook-message-reply {
position: relative;
margin-block: 0.9em 0.2em;
margin-inline-start: 1.6em;
padding: 0.9em 1.1em;
background: var(--code-background-color);
border: 2px solid var(--border-color);
}
#guestbooks___guestbook-messages-container .guestbook-message-reply::before {
content: "";
position: absolute;
top: -1em;
left: -0.9em;
width: 0.7em;
height: 1.6em;
border-left: 2px solid var(--border-color);
border-bottom: 2px solid var(--border-color);
}
/* Side note (wrap content in <div class="pixel-note">) */
.pixel-note {
padding: 1em 1.25em;
border: 2px solid var(--border-color);
border-inline-start: 6px solid var(--border-color);
background: var(--code-background-color);
position: relative;
font-size: 0.9em;
}
.pixel-note::before {
content: "NOTE";
position: absolute;
top: -0.75em;
left: 0.8em;
padding: 0 0.4em;
font-size: 0.7em;
letter-spacing: 0.08em;
background: var(--background-color);
color: var(--muted-color);
}
.pixel-note > :first-child {
margin-block-start: 0;
}
.pixel-note > :last-child {
margin-block-end: 0;
}