/reader

If you’re using the wonderful Guestbooks by Meadow, the theme will take care of that too. Check my guestbook to see how it looks. If you’re in the mood, and who isn’t after some Pink Friday vibes, feel free to write me something.

To give you a taste of how lovely the quotes look, here are a few fitting lines from the beautiful song Society by Eddie Vedder:

Oh, it's a mystery to me
We have a greed, with which we have agreed
And you think you have to want more than you need
Until you have it all you won't be free

Disclaimer: While there’s no technical limitation stopping you from using this theme to celebrate Black Friday instead of dodging it, it’s considered bad karma. This may result in your posts getting fewer upvotes. Just saying...

🦄 Copy theme Theme copied!

/*
 * Pink Friday — a joyful antidote to Black Friday madness
 * Version 1.0.0 | 2025-11-28
 * Author: Robert Birming
 * URL: https://robertbirming.com
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;

  --bg:        #fff7fb;
  --txt:       #261321;
  --muted:     #8f6a7a;
  --line:      #f0d3e3;
  --accent:    #e45ba8;
  --accent-h:  color-mix(in srgb, var(--accent) 80%, var(--txt) 20%);
  --radius:    6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:       #1b1220;
    --txt:      #ffe9f8;
    --muted:    #c89bb4;
    --line:     #3c253f;
    --accent:   #ff7ec5;
    --accent-h: color-mix(in srgb, var(--accent) 80%, #ffffff 20%);
  }

  footer::before {
    background-image: linear-gradient(
      90deg,
      #ff9ad1,
      #ffcaee,
      #ff9ad1,
      #f9a9ff
    );
  }
}

::selection {
  background: color-mix(in srgb, var(--accent) 35%, var(--bg));
  color: var(--txt);
}

body {
  max-width: 640px;
  margin: 36px auto;
  padding: 0 20px;
  font-family: system-ui, sans-serif;
  font-size: 1.075rem;
  line-height: 1.66;
  letter-spacing: 0.01em;
  color: var(--txt);
  background: var(--bg);
  overflow-wrap: break-word;
}

main > p:first-of-type {
  margin-top: 0.2em;
}

p {
  margin-block: 1.2em;
}

h1,
h2,
h3 {
  margin-block: 1.4em 0.6em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--txt);
}

h1 {
  margin-block: 0 0.4em;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.25rem; }

ul,
ol {
  margin-block: 1.2em;
  padding-left: 1.4em;
}

li + li {
  margin-top: 0.25em;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color 0.15s ease,
    text-decoration-thickness 0.15s ease;
}

a:hover {
  color: var(--accent-h);
  text-decoration-thickness: 2px;
}

blockquote {
  margin-block: 2em;
  margin-inline: 0;
  padding: 0.85em 1rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--bg) 85%, var(--accent) 15%);
  color: var(--muted);
  font-style: italic;
  border-radius: 10px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--txt) 10%, transparent);
}

blockquote p {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-block: 1.4em;
  border-radius: 8px;
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin-block: 2rem;
}

/* Header */
header {
  margin-bottom: 2.4rem;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1.2rem;
}

header a.title {
  text-decoration: none;
  color: var(--txt);
  position: relative;
  display: inline-block;
}

header a.title h1 {
  margin: 0;
  padding: 0;
  font-size: 1.7rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  display: inline-block;
  filter:
    drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 45%, transparent))
    drop-shadow(0 0 4px color-mix(in srgb, var(--accent-h) 35%, transparent));
  transition: filter 0.25s ease, transform 0.25s ease;
}

header a.title:hover h1 {
  filter:
    drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent))
    drop-shadow(0 0 8px color-mix(in srgb, var(--accent-h) 55%, transparent));
  transform: scale(1.012);
}

header a.title h1::after {
  content: " *:･ﾟ✧";
  padding-left: 4px;
  background: linear-gradient(
    to right,
    var(--txt),
    var(--accent),
    color-mix(in srgb, var(--accent) 65%, var(--txt) 35%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
  vertical-align: baseline;
  opacity: 0.9;
}

/* Nav links */
header nav p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

header nav a {
  text-decoration: none;
  color: var(--accent);
  padding: 0.25rem 0.8rem 0.18rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 94%, var(--accent) 6%);
  border: 1px solid transparent;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--txt) 10%, transparent);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

@media (prefers-color-scheme: dark) {
  header nav a {
    background: color-mix(in srgb, var(--bg) 90%, var(--accent) 10%);
  }
}

header nav a:hover {
  color: var(--bg);
  background: color-mix(in srgb, var(--accent) 80%, var(--bg) 20%);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--txt) 16%, transparent);
  transform: translate(1px, 2px) rotate(2.5deg);
}

header nav a:active {
  transform: translate(0, 0) rotate(0deg);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--txt) 20%, transparent);
}

/* Footer */
footer {
  position: relative;
  margin-top: 1rem;
  padding: 30px 0 26px;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

footer::before {
  content: "✧";
  display: block;
  margin: 0 auto 1.8rem;
  text-align: center;
  color: var(--accent);
  font-size: 1.25rem;
  letter-spacing: 0.35em;
  opacity: 0.95;
  width: 70%;
  background:
    linear-gradient(to right, transparent, var(--line) 70%),
    linear-gradient(to left, transparent, var(--line) 70%);
  background-size: 48% 1.5px, 48% 1.5px;
  background-position: left center, right center;
  background-repeat: no-repeat;
}

footer a {
  color: var(--accent);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Blog */
time {
  font-style: normal;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

p > time,
p > i > time {
  display: inline-block;
  margin-top: 0.2rem;
}

ul.blog-posts {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
}

ul.blog-posts li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 0.4em;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

ul.blog-posts li:first-child {
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

ul.blog-posts li span {
  flex: 0 0 140px;
  color: var(--muted);
  font-size: 0.9rem;
}

ul.blog-posts li a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  transition:
    color 0.15s ease,
    text-decoration-thickness 0.15s ease;
}

ul.blog-posts li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  color: var(--accent-h);
}

@media (max-width: 540px) {
  ul.blog-posts li {
    flex-direction: column;
    align-items: flex-start;
    padding-block: 0.7em;
    gap: 0.25em;
  }

  ul.blog-posts li span {
    order: 1;
    flex: none;
    font-size: 0.85rem;
  }

  ul.blog-posts li a {
    order: 0;
  }
}

/* Upvote button */
:is(.post, .page) .upvote-button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 96%, var(--accent) 4%);
  color: var(--txt);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

:is(.post, .page) .upvote-button svg {
  display: none !important;
}

:is(.post, .page) .upvote-button::before {
  content: "♡";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent);
  transform: translateY(1px);
  transition:
    color 0.15s ease,
    transform 0.12s ease;
}

:is(.post, .page) .upvote-button .upvote-count {
  display: inline-block !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.85;
  white-space: nowrap;
  transform: translateY(1px);
}

:is(.post, .page) .upvote-button:hover {
  background: color-mix(in srgb, var(--bg) 90%, var(--accent) 10%);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  transform: translateY(-1px);
}

:is(.post, .page) .upvote-button:hover::before {
  transform: translateY(0);
}

:is(.post, .page) .upvote-button:is(.upvoted, [aria-pressed="true"], [disabled])::before {
  content: "♥";
  color: var(--accent-h);
}

:is(.post, .page) .upvote-button[disabled] {
  cursor: default;
  opacity: 0.85;
}

:is(.post, .page) .upvote-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Guestbook */
#guestbooks___guestbook-form-container form {
  display: grid;
  gap: 0.6rem;
  margin: 1.6rem 0;
}

#guestbooks___guestbook-form-container :is(input, textarea, button) {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--txt);
}

#guestbooks___guestbook-form-container :is(input, textarea) {
  width: 100%;
  line-height: 1.5;
}

#guestbooks___guestbook-form-container :is(input, textarea):focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

#guestbooks___guestbook-form-container :is(button, input[type="submit"]) {
  cursor: pointer;
  font-weight: 600;
  align-self: flex-start;
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
}

#guestbooks___guestbook-form-container :is(button, input[type="submit"]):hover {
  background: var(--accent-h);
  transform: translateY(-1px);
}

#guestbooks___guestbook-messages-container > div {
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--bg));
  background: color-mix(in srgb, var(--bg) 93%, var(--accent) 7%);
}

#guestbooks___guestbook-messages-container blockquote {
  margin: 0 0 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-style: normal;
  color: var(--txt);
}

#guestbooks___guestbook-messages-container p {
  margin: 0 0 0.4rem;
}

#guestbooks___guestbook-made-with {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}

So you understandably start going through the thought process of figuring out which one is the “best” one. You start examining the shape, the texture, the animal that produced it. You start finding reasons to pick one over another. You start rationalising, trying to justify your decision to the other people who, like you, also need to pick which one to eat.

It’s a process. A shitty one, I might say. But in going through this ordeal, you start losing track of the only thing that really matters: this situation fucking sucks, and there’s no good answer. The only reasonable thing to do is to pick the plate with the least steamy, smelly, nasty pile of shit and then figure out a way not to find yourself in that situation ever again.

Sometimes eating shit is unavoidable. The only thing you can do is make it as painless as possible.

Thank you for keeping RSS alive. You're awesome.

Email me :: Sign my guestbook :: Support for 1$/month :: See my generous supporters :: Subscribe to People and Blogs