OpenPLUTO

Easter Bunny Operator - a Palette for QuietType πŸ»πŸ‡

While it does seem impossible to come up with a 'dark pastel' theme, I have modified the Midnight Operator palette a bit in the spirit of the upcoming holiday. This will be my subtle, subconscious was to slip into the spirit of the holiday as we have decided to get together for Easter this year as a family.

There are no major changes between this is and QuietType, with the exception of me now pulling in fonts from FontBunny. If this bothers you at your core you can always just take that palette and slap them into QuietType and be good to go.

πŸ‡ Easter Bunny Operator

A dark pastel-inspired space with feelings of late nights and nostalgia. Follow the White Rabbit.

Just the Palette

/* "Easter Bunny" Operator – A Modified "Midnight Operator" color scheme for Easter 2026 */

--bg: #000208;     
--text: #f3fdd4;   
--accent: #a78bfa;

Full Theme

@import url(https://fonts.bunny.net/css?family=inter:400,400i|inter-tight:400,400i|jetbrains-mono:400,400i|open-sans:400,400i|ubuntu-sans-mono:400,400i|work-sans:400,400i);

:root {
  color-scheme: dark;

/* "Easter Bunny" Operator – A Modified "Midnight Operator" color scheme for Easter 2026 */

--bg: #000208;     
--text: #f3fdd4;   
--accent: #a78bfa; 

  /* Layout + type */
  --width: min(720px, 90vw);
  --font-main: "Work Sans" , system-ui, Verdana, sans-serif;
  --font-secondary: "Inter" , system-ui, Verdana, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-scale: 1rem;

  /* UI tokens */
  --radius: 6px;
  --font-small: 0.95em;
  --link: var(--accent);

  /* Derived tokens β€” do NOT change per palette */
  --muted: color-mix(in srgb, var(--text) 70%, transparent);
  --border: color-mix(in srgb, var(--text) 14%, transparent);
  --surface: color-mix(in srgb, var(--text) 8%, var(--bg));
  --code-bg: color-mix(in srgb, var(--text) 10%, #000);
  --code-text: var(--text);
  --visited: color-mix(in srgb, var(--accent) 70%, var(--text));

  /* Title emphasis */
  --title: color-mix(in srgb, var(--text) 88%, white);
}

body {
  font-family: var(--font-secondary);
  font-size: var(--font-scale);
  margin: auto;
  padding: 20px;
  max-width: var(--width);
  text-align: left;
  background: var(--bg);
  color: var(--text);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-main);
}

  /* Tyler was here */
.title h1 {
  font-size: 1.5em;
  color: var(--title);
}


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

a:hover {
  text-decoration: underline;
}

a:visited {
  color: var(--visited);
}

nav a {
  margin-right: 8px;
}

strong,
b {
  color: var(--text);
}

button {
  margin: 0;
  cursor: pointer;
}

time {
  font-family:var(--font-mono);
  font-style: normal;
  font-size: 15px;
  color: var(--muted);
}

main {
  line-height: 1.6;
}

main p {
  margin-block: 1em;
}

main ul,
main ol {
  padding-left: 1.2em;
}

main li {
  margin-block: 0.35em;
}

table {
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px dashed var(--border);
}

img {
  max-width: 100%;
}

code {
  font-family: var(--font-mono);
  padding: 2px;
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 3px;
}

blockquote {
  border-left: 2px solid var(--border);
  color: var(--muted);
  padding-left: 20px;
  font-style: italic;
  margin-inline: 0;
}

footer {
  padding: 25px 0;
  text-align: center;
  color: var(--muted);
}

footer p {
  font-size: 0.75em;
}

.title:hover {
  text-decoration: none;
}

.title h1 {
  font-size: 1.5em;
}

.inline {
  width: auto !important;
}

.highlight,
.code {
  padding: 1px 15px;
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 3px;
  margin-block: 1em;
  overflow-x: auto;
}

/* Tyler was here - Nav links alignment */
header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

header nav {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

nav a {
  margin-right: 0;
}

/* Tyler was here - Nav link button treatment */
header nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;

  padding: 0.25em 0.6em;
  font-size: 0.95em;
  font-weight: 500;

  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;

  color: var(--accent);
  text-decoration: none;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

header nav a:hover {
  background-color: var(--surface);
  border-color: var(--border);
  text-decoration: none;
  /* kill underline here */
  transform: translateY(-1px);
}

header nav a:active {
  transform: translateY(0);
}

/* Tyler was here - extra credit */

header nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* blog post list */
ul.blog-posts {
  list-style: none;
  padding: 0;
}

ul.blog-posts li {
  display: flex;
}

ul.blog-posts li span {
  flex: 0 0 130px;
}

/* Tyler was here - Applause No Count */

form#upvote-form {
  display: block !important;
  margin-block-start: 1.3em;
}

form#upvote-form>small {
  display: block;
  font-size: 1em;
}

:is(.post, .page) .upvote-button {
  display: inline-flex;
  align-items: center;
  padding: 0 0.1em;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--font-small);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease;
}

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

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

:is(.post, .page) .upvote-button::before {
  content: "πŸ₯š";
  display: inline-block;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--link);
  vertical-align: -0.06em;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  :is(.post, .page) .upvote-button:not(.upvoted):not([disabled]):hover::before {
    transform: scale(1.28) rotate(-6deg);
  }
}

:is(.post, .page) .upvote-button.upvoted::before,
:is(.post, .page) .upvote-button[disabled]::before {
  content: "🐣";
}

:is(.post, .page) .upvote-button:not([disabled]):active {
  transform: translateY(1px);
}

:is(.post, .page) .upvote-button.upvoted,
:is(.post, .page) .upvote-button[disabled] {
  opacity: 0.7;
  color: inherit !important;
  cursor: default;
}

.tags a {
  font-size: 0.85em;
}

.metas {
  font-family: var(--font-secondary);
  font-size: 0.85em;
}

/* Tyler was here - William's Fieldmark */

span.fieldmark {
  display: block;
  width: 9rem;
  height: 14px;
  margin: 1.2rem auto;
  background: var(--link);
  opacity: .9;

  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'><path d='M2 9 C35 3 65 3 85 9 S130 15 158 7' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round'/></svg>") no-repeat center / contain;
  mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'><path d='M2 9 C35 3 65 3 85 9 S130 15 158 7' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round'/></svg>") no-repeat center / contain;
}

/* Afterword */

.afterword {
  padding-bottom: 9px;
  font-family: var(--font-secondary);
  font-size: 0.9em;
  /* font-style: italic; */
  color: var(--muted);
  margin-top: 1.2rem;
}

.afterword a {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
  padding: 2px 4px;
  border-radius: 3px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.afterword a:hover {
  color: var(--text);
  background-color: var(--surface);
}

/* ==========================
   Meadow.cafe Guestbooks embed
   Scoped + token-based (palette-safe)
   ========================== */

:where(#guestbooks___guestbook-form-container, #guestbooks___guestbook-messages-container) {
  color: var(--text);
}

/* Form wrapper */
#guestbooks___guestbook-form-container {
  margin-block: 1.25rem 1.75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--surface) 85%, var(--bg));
}

/* Layout inside the form */
#guestbooks___guestbook-form {
  display: grid;
  gap: 0.75rem;
}

/* Inputs / textarea */
#guestbooks___guestbook-form :where(input, textarea) {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--text);

  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, black);
}

#guestbooks___guestbook-form textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.45;
}

/* Focus treatment consistent with QuietType */
#guestbooks___guestbook-form :where(input, textarea, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Button */
#guestbooks___guestbook-form button[type="submit"] {
  justify-self: start;

  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);

  background: transparent;
  color: var(--accent);
  font: inherit;

  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}

#guestbooks___guestbook-form button[type="submit"]:hover {
  background: var(--surface);
  border-color: var(--border);
  transform: translateY(-1px);
}

#guestbooks___guestbook-form button[type="submit"]:active {
  transform: translateY(0);
}

/* Challenge + error areas */
#guestbooks___challenge-answer-container {
  margin-top: 0.25rem;
}

#guestbooks___error-message {
  margin-top: 0.25rem;
  color: color-mix(in srgb, var(--accent) 70%, white);
  opacity: 0.95;
  font-size: var(--font-small);
}

/* β€œPowered by” line */
#guestbooks___guestbook-made-with {
  opacity: 0.85;
}

#guestbooks___guestbook-made-with a {
  color: var(--accent);
}

/* Messages header */
#guestbooks___guestbook-messages-header {
  margin-top: 0;
}

/* Messages container */
#guestbooks___guestbook-messages-container {
  display: grid;
  gap: 0.9rem;
  margin-block: 1rem 2rem;
}

/* Robust message styling (handles unknown markup from JS) */
#guestbooks___guestbook-messages-container > * {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--surface) 75%, var(--bg));
}

/* Links inside messages */
#guestbooks___guestbook-messages-container a {
  color: var(--accent);
}

/* Small/meta text inside messages */
#guestbooks___guestbook-messages-container :where(small, time) {
  color: var(--muted);
}

.palette-preview span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;

  /* token-driven rings that adapt to any palette */
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 35%, transparent);
}

/* Copy code plugin */
.copy-code-button {
  color: var(--text-color);
  opacity: 0.6;
}

.copy-code-button:focus-visible {
  opacity: 1;
}

@media (hover: hover) {
  .highlight:hover .copy-code-button {
    opacity: 0.8;
  }

  .copy-code-button:hover {
    opacity: 1;
  }
}

πŸ‡