Pink Friday
Are you also tired of the Black Friday shopping mania? Let's make it fun in a free way instead of stressful in a "don't really need it, but my gosh it's cheap" way.
If you're using the wonderful Guestbooks by Meadow, the theme takes care of that too.
To give you a taste of how lovely the quotes look:
The best deal of the year is the one you didn't need.
Close the tab, open your editor, write something instead.
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...
How to use
Copy the theme styles below, head over to your Bear theme settings, paste them in, and let the party begin. 🥳
/*
* Pink Friday — a joyful antidote to Black Friday madness
* Version 1.1.1 | 2026-02-23
* 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;
}
code,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
code {
font-size: 0.95em;
padding: 0.15em 0.35em;
border-radius: 5px;
background: color-mix(in srgb, var(--bg) 88%, var(--accent) 12%);
border: 1px solid color-mix(in srgb, var(--line) 70%, var(--accent) 30%);
}
pre {
margin-block: 1.4em;
padding: 1rem 1.1rem;
border-radius: 10px;
background: color-mix(in srgb, var(--bg) 94%, var(--txt) 6%);
border: 1px solid var(--line);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: pre;
overflow-wrap: normal;
word-break: normal;
}
pre code {
border: 0;
background: none;
padding: 0;
font-size: 0.92em;
}
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;
}
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 {
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;
}
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);
}
Want more? Check out the full Bear Blog library.