I made a Halloween-inspired theme for Bear last year. This time, I thought I’d just give it a small polish. Well, that didn’t quite happen... 😅

I ended up going all in again, just for the fun of it. So this year you’ll get a spooky cursor, glowing bits, an annoyingly restless bat, and a whole lot more.

No tracking, just hauntingly simple blogging. Hauntman Morbidious

Feel free to use it however you like. Just copy the styles below, head to your theme settings, and paste them in.

Happy haunting! 👻

/* ========================= 🎃 Bear Halloween Theme 2025 Robert Birming • robertbirming.com Warning: includes one restless bat. ========================= */ @import url("https://fonts.bunny.net/css2?family=Henny+Penny&family=Nosifer&display=swap"); /* ========================= 🧪 Base tokens ========================= */ :root { --width: 720px; /* type */ --font-main: "Nosifer", sans-serif; --font-accent: "Henny Penny", system-ui, sans-serif; --font-body: Verdana, sans-serif; --font-scale: 1em; /* light */ --background-color: #fff9f5; --heading-color: #1a1a1a; --text-color: #2c2c2c; --link-color: #c25400; --visited-color: #c25400; --code-background-color: #fff2e5; --code-color: #222; --divider: rgba(0, 0, 0, 0.2); /* candy */ --pumpkin: #ff7a18; --vampire: #8b6fcb; /* glow */ --glow-color: #ff7a18; --glow-color-soft: #ffa24a; } @media (prefers-color-scheme: dark) { :root { /* darkness */ --background-color: #0d181c; --heading-color: #f6f6f6; --text-color: #ddd; --link-color: #ffa24a; --visited-color: #ffa24a; --code-background-color: #111; --code-color: #ddd; --divider: rgba(255, 255, 255, 0.25); --glow-color: #ffa24a; --glow-color-soft: #ffcf87; } } /* ========================= 🏚️ Layout ========================= */ body { font-family: var(--font-body); font-size: var(--font-scale); margin: auto; padding: 48px 24px 24px; max-width: var(--width); line-height: 1.6; color: var(--text-color); background: radial-gradient(900px 600px at 10% -10%, rgba(255, 122, 24, 0.08), transparent), var(--background-color); transition: background 0.4s ease; } /* ========================= 🕸️ Headings ========================= */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-main); color: var(--heading-color); margin-top: 1.4em; margin-bottom: 0.6em; letter-spacing: 0.5px; line-height: 1.2; text-align: left; } h1 { font-size: 1.5em; } h2 { font-size: 1.3em; } h3 { font-size: 1.1em; } h1::before { content: "🕸️ "; } h2::before { content: "🦇 "; } h3::before { content: "🕯️ "; } @media (prefers-reduced-motion: no-preference) { h1 { animation: flicker 6s infinite steps(60, end); } @keyframes flicker { 0%, 100% { opacity: 1; } 5% { opacity: 0.85; } 7% { opacity: 0.6; } 8% { opacity: 1; } } } /* ========================= ✍️ Text & links ========================= */ p, li, blockquote, figcaption, code, pre, td, th { font-family: var(--font-body); } a { font-family: var(--font-accent); color: var(--link-color); text-decoration: none; background: none; text-shadow: none; transition: text-shadow .25s ease, transform .15s ease; will-change: text-shadow, transform; } a:visited { color: var(--visited-color); } a:hover, a:focus-visible { text-shadow: 0 0 6px var(--glow-color), 0 0 14px var(--glow-color-soft), 0 0 22px var(--glow-color-soft); transform: translateY(-1px); } strong, b { color: var(--heading-color); } em { color: var(--link-color); } /* ========================= 🧭 Title & navigation ========================= */ .title a { display: inline; width: auto; text-decoration: none; padding: 0; } .title h1 { display: inline; font-family: var(--font-main); font-size: 1.3em; text-align: left; margin: 0; letter-spacing: 0.5px; } .title h1::after { content: "👻"; margin-left: 5px; } nav { margin-top: 10px; } nav a { font-family: var(--font-accent); margin-right: 8px; border-radius: 6px; padding: 2px 4px; outline: none; background: none; border: none; box-shadow: none; transition: text-shadow .25s ease, transform .15s ease; } nav a:hover, nav a:focus-visible { text-shadow: 0 0 6px var(--glow-color), 0 0 14px var(--glow-color-soft), 0 0 22px var(--glow-color-soft); transform: translateY(-1px); } nav a:hover, nav a:focus { border: none !important; outline: none !important; box-shadow: none !important; } /* ========================= 🪞 Images (haunted flicker) ========================= */ figure { display: block; inline-size: 100%; margin: 1.8rem 0; } figure > img, figure > a > img, img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 0 0 1px var(--divider); transition: transform 0.3s ease, box-shadow 0.4s ease, filter 0.4s ease; } img:not(:hover) { filter: brightness(1); } @keyframes haunted-flicker { 0%, 100% { filter: brightness(1); } 10% { filter: brightness(0.85); } 12% { filter: brightness(1.1); } 14% { filter: brightness(0.7); } 20% { filter: brightness(1); } } img:hover { transform: translateY(-2px) rotate(-0.5deg); animation: haunted-flicker 1.2s steps(6, end); box-shadow: 0 0 6px var(--glow-color), 0 0 14px var(--glow-color-soft), 0 6px 20px rgba(255, 122, 24, 0.25); filter: brightness(1.05); } @media (prefers-reduced-motion: reduce) { img:hover { animation: none !important; } } figure figcaption { font-family: 'Courier New', monospace; font-size: 0.95rem; color: color-mix(in oklab, var(--text-color) 85%, crimson 20%); text-align: center; margin-top: 0.5em; text-shadow: 0 0 4px rgba(255, 0, 0, 0.2); opacity: 0.9; transition: opacity 0.3s ease, text-shadow 0.4s ease; } figure:hover figcaption { opacity: 1; text-shadow: 0 0 8px rgba(255, 0, 0, 0.4); } /* ========================= 🪵 Dividers ========================= */ hr { border: 0; height: 14px; margin: 2rem 0; background: linear-gradient(to right, transparent, var(--divider), transparent) center/100% 1px no-repeat, radial-gradient(6px 6px at left center, var(--divider) 1px, transparent 1px), radial-gradient(6px 6px at right center, var(--divider) 1px, transparent 1px); } /* ========================= 📝 Lists ========================= */ ul, ol { padding-left: 1.4rem; margin: 1em 0; } ul li::marker { content: "🎃 "; } ul ul li::marker { content: "🟠 "; opacity: 0.7; } /* ========================= 🗯️ Blockquotes (warm glow) ========================= */ blockquote { position: relative; margin: 1.6em 0; padding: 1.2em 1.4em 1em; font-style: italic; font-family: var(--font-body); color: color-mix(in oklab, var(--text-color) 90%, transparent); background: radial-gradient(circle at top left, rgba(255, 122, 24, 0.08), transparent 65%); border-radius: 6px; box-shadow: 0 0 6px var(--glow-color), 0 0 14px var(--glow-color-soft), inset 0 0 12px rgba(255, 122, 24, 0.15); transform: translateY(-2px); transition: transform 0.25s ease, box-shadow 0.3s ease; } blockquote::before { content: "“"; position: absolute; left: 12px; top: -10px; font-size: 2.8rem; line-height: 1; opacity: 0.12; color: var(--glow-color); pointer-events: none; } blockquote cite { display: block; margin-top: 0.75em; font-style: normal; font-family: var(--font-body); font-size: 0.9em; text-align: left; opacity: 0.85; color: color-mix(in oklab, var(--text-color) 75%, transparent); letter-spacing: 0.3px; } blockquote cite::before { content: "— "; opacity: 0.6; } /* ========================= 🧑‍💻 Code ========================= */ code, pre, .highlight { font-family: "Courier New", monospace; background: linear-gradient(180deg, rgba(255, 122, 24, 0.08), var(--code-background-color) 40%); color: var(--code-color); border-radius: 5px; padding: 3px 6px; } pre, .highlight { display: block; padding: 1em; overflow-x: auto; margin: 1.2em 0; } /* ========================= 🍽️ Tables ========================= */ table { width: 100%; border-collapse: collapse; border: 1px solid var(--divider); margin: 1.5em 0; } th, td { padding: 0.5rem 0.6rem; border-top: 1px dashed var(--divider); } th { text-align: left; background: rgba(255, 122, 24, 0.1); } /* ========================= 🦶 Footer ========================= */ footer { padding: 25px 0; text-align: center; color: color-mix(in oklab, var(--text-color) 80%, transparent); font-family: var(--font-body); } /* ========================= ⏰ Time (slightly broken clock) ========================= */ time { font-family: "Courier New", monospace; font-style: normal; font-size: 0.95rem; letter-spacing: 0.6px; color: color-mix(in oklab, var(--text-color) 75%, transparent); display: inline-block; transform: rotate(-1.5deg); opacity: 1; position: relative; transition: transform 0.25s ease, opacity 0.3s ease; } time::after { content: attr(datetime); position: absolute; left: 1px; top: 1px; opacity: 0.1; color: var(--glow-color); transform: rotate(1deg); pointer-events: none; } time:hover { transform: rotate(-3deg) scale(1.02); opacity: 1; } /* ========================= 🕯️ Blog post list ========================= */ ul.blog-posts { list-style: none; padding: 0; margin: 1.5em 0; } ul.blog-posts li { display: flex; align-items: baseline; padding: 0.3rem 0; } ul.blog-posts li::before { content: "🕯️"; margin-right: 0.5rem; opacity: 0.8; transform: translateY(1px); } ul.blog-posts li span { flex: 0 0 130px; opacity: 0.7; color: color-mix(in oklab, var(--text-color) 70%, transparent); font-size: 0.95em; } ul.blog-posts li a { font-family: var(--font-accent); color: var(--link-color); text-decoration: none; transition: text-shadow 0.25s ease, transform 0.15s ease; } ul.blog-posts li a:visited { color: var(--link-color); } ul.blog-posts li a:hover, ul.blog-posts li a:focus-visible { text-shadow: 0 0 6px var(--glow-color), 0 0 14px var(--glow-color-soft), 0 0 22px var(--glow-color-soft); transform: translateY(-1px); } /* ========================= ⚙️ Accessibility ========================= */ :focus-visible { outline: 3px solid color-mix(in oklab, var(--glow-color) 55%, transparent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ========================= 🦇 Optional: Restless bat ========================= */ body::after { content: "🦇"; position: fixed; top: 10%; left: -60px; font-size: 1.8rem; opacity: 0.6; z-index: 9999; pointer-events: none; animation: emberwing 22s linear infinite; } @keyframes emberwing { 0% { transform: translate(0, 0) rotate(8deg); opacity: 0; } 5% { transform: translate(3vw, -1vh) rotate(6deg); opacity: 0.8; } 10% { transform: translate(10vw, -4vh) rotate(-6deg); } 15% { transform: translate(18vw, -3vh) rotate(-2deg) translateY(-2px); } 25% { transform: translate(40vw, 6vh) rotate(10deg); } 30% { transform: translate(46vw, 5vh) rotate(8deg) translateY(-3px); } 37% { transform: translate(55vw, -2vh) rotate(-3deg); } 45% { transform: translate(68vw, 1vh) rotate(2deg) translateY(-2px); } 50% { transform: translate(80vw, 3vh) rotate(6deg); } 58% { transform: translate(88vw, 2vh) rotate(4deg) translateY(-3px); } 65% { transform: translate(95vw, -5vh) rotate(-8deg); } 72% { transform: translate(110vw, -3vh) rotate(-4deg) translateY(-2px); } 75% { transform: translate(120vw, 0vh) rotate(5deg); } 82% { transform: translate(130vw, -2vh) rotate(3deg) translateY(-3px); } 85% { transform: translate(140vw, -4vh) rotate(-4deg); } 92% { transform: translate(150vw, -1vh) rotate(-2deg) translateY(-2px); } 100% { transform: translate(160vw, 3vh) rotate(8deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { body::after { animation: none !important; opacity: 0 !important; } } /* ========================= 👻 Optional: Spooky cursor ========================= */ body { cursor: url("data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'>\ <text y='24' font-size='24'>👻</text></svg>") 8 8, auto; } /* ========================= 🔺 Optional: Pumpkin-powered upvote ========================= */ .post .upvote-button svg { display: none; } .post .upvote-button { position: relative; display: inline-flex; flex-direction: row; align-items: baseline; gap: 0.1875rem; padding: 0.1875rem 0.375rem; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; line-height: 1; font-size: 1rem; } .post .upvote-button:hover { background: transparent !important; } .post .upvote-button::before { content: "🎃"; display: inline-block; font-size: 1.125rem; line-height: 1; color: var(--link-color); transform: translateY(2px); transition: transform .15s ease, color .2s ease, text-shadow .2s ease; } .post .upvote-button:hover:not(:is(.upvoted, [aria-pressed="true"], [disabled]))::before { transform: translateY(2px) scale(1.1); text-shadow: 0 0 8px color-mix(in oklab, var(--pumpkin) 45%, transparent); } .post .upvote-button:is(.upvoted, [aria-pressed="true"], [disabled])::before { content: "🧡"; color: var(--pumpkin); animation: toast-pop .18s ease-out; } .post .upvote-button[disabled] { cursor: default; } .post .upvote-button + .upvote-count { margin: 0; font-size: 0.90625rem; line-height: 1; color: var(--text-color); opacity: 0.8; transform: translateY(1.5px); transition: color .25s ease, opacity .25s ease; } .post .upvote-button:is(.upvoted, [aria-pressed="true"], [disabled]) + .upvote-count { color: var(--pumpkin); opacity: 1; } @keyframes toast-pop { 0% { transform: translateY(2px) scale(1); } 40% { transform: translateY(2px) scale(1.3); } 100% { transform: translateY(2px) scale(1); } } @keyframes sparkle { 0% { opacity: 0; transform: translateY(4px) scale(.9) rotate(0deg); } 40% { opacity: 1; transform: translateY(-2px) scale(1.1) rotate(10deg); } 100% { opacity: 0; transform: translateY(-8px) scale(1) rotate(-6deg); } }