The Garden

A blog by Marijn van Hoorn

Joyous April

Marijn van Hoorn

Ahoy there, dear reader! As you can see, to celebrate this joyous day, i finally got into contact with a proper web designer, who suggested some legibility and appeal changes to the site. The font has been changed so that it's easier to read by all, and a new, patented CHROMOCYCLE™ system has been implemented to really drive up the length of time people stay, because they’ll be so transfixed by the colours! I’m going to be an SEO kajillionaire!

Signed,
Marjin


Update: Right, it’s getting late on my end, and i don’t want the pranking to carry on into April 2nd my time, so i’ve turned the eye-sear off.

For those of you reading this after the fact, the website was done up in Comic Sans and flashing rainbow colours for April Fool’s Day. If you know your way around a dev console you can recreate the effect by putting in this bit of CSS code:

:root {
  --serif: "Comic Sans MS", "Comic Sans", "Chalkboard", "Comic Neue", "Segoe Print", "Segoe Script", fantasy/*'EB Garamond MF Unicode', 'EB Garamond MF', 'EB Garamond MF HellenicNums', 'EB Garamond', Adobe Garamond, Garamond, Baskerville, 'Times New Roman', 'Source Serif 4', 'Source Serif Pro', 'Source Serif', Tinos, 'Liberation Serif', serif*/;
  --cormorant: "Comic Sans MS", "Comic Sans", "Chalkboard", "Comic Neue", "Segoe Print", "Segoe Script", fantasy/*'Cormorant Garamond MF', 'Cormorant Garamond', 'Cormorant', var(--serif), serif*/;
  --monospace: "Comic Sans MS", "Comic Sans", "Chalkboard", "Comic Neue", "Segoe Print", "Segoe Script", fantasy/*ui-monospace, Consolas, Menlo, Ubuntu Mono, Roboto Mono, Droid Mono, Noto Mono, Source Code Pro, Liberation Mono, monospace*/;
  --system: "Comic Sans MS", "Comic Sans", "Chalkboard", "Comic Neue", "Segoe Print", "Segoe Script", fantasy/*system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Roboto, Cantarell, 'Helvetica Neue', 'Liberation Sans', Arimo, Tahoma, Arial, sans-serif*/;
  --caps-spacing: 0.05em;

  scrollbar-color: var(--accent-strong) var(--background);
  /*font-size: 1.175em;*/
  animation: hueshift 2000ms 0ms infinite linear;
}

@keyframes hueshift {
  0% {
    filter: hue-rotate(0);
  }
  50% {
    filter: hue-rotate(180deg);
  }
  100% {
    filter: hue-rotate(359deg);
  }
}