CEEFAX'S PAGECEEFAX'S PAGE

> CUSTOMIZATION LOG.TXT

2 min read

Inspired by the Quartz Customization Log from quartz.eilleeenz.com, this page tracks all the changes we have made to this site from Quartz’s default setup (ignoring stuff like changing fonts and colours). Listed with the date we changed or added it (DD/MM/YY)

Custom callout styling

[26/12/25] Currently, this is simply using Eilleen’s custom callout styling, which itself is taken from Kepano’s minimal theme

To do:

  • I would like to look into making some custom callouts at some point too

Changed sidebar background

[28/12/25] Wanted to make the sidebars a different colour to the center, so I did some fiddling in custom.scss:

 .left {
      background-color: #181825;
    }

 .right {
      background-color: #181825;
    }

…the colour change for the right sidebar isn’t actually in use now, I’ve decided I don’t like it, but. Uh. Yeah.

The center content was looking rather clausterphobic after this change, so I also then went and modified the padding for it (in the same file):

 .center {
     padding-left: 10px;
     padding-right: 10px;
   }

To do:

  • I BROKE THIS AND I DON’T EVEN REMEMBER HOW. I THINK IT WAS WHEN I ADDED A LIGHT THEME? UGHHHHHHH.
  • I’m not the biggest fan of how this looks, so I’ll probably revisit it at some point
  • Right padding doesn’t seem to work fully (callouts and dividers), look into why that is
  • Also make the footer play nice with this (probably center it? I’ve got some code already written out but it doesn’t… actually seem to work :P maybe it’s in the wrong spot)

[28/12/25] I went and inserted some art of my fursona (drawn by @popfizzles) above the title text, heavily referencing code by ben’s garden:

Page Title.tsx

  const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
  const baseDir = pathToRoot(fileData.slug!)
  const bannerPath = `${baseDir}/static/banner.gif`
  
  return (
    <h2 class={classNames(displayClass, "page-title")}>
      <img src={bannerPath} alt={title} class="page-title-banner" />
      <a href={baseDir}>{title}</a>
    </h2>
  )
}

I then went and modified the footer to provide direct credit to popfizzles for the art:

Footer.tsx

    return (
      <footer class={`${displayClass ?? ""}`}>
        <p>
          {i18n(cfg.locale).components.footer.createdWith}{" "}
          <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a> © {year} · Header art by <a href="https://popfizzles.tumblr.com">@popfizzles</a>
        </p>

To do:

  • This admittedly doesn’t format the nicest on mobile. Making the image a separate element above the title will probably work a LOT better, this is quite a hacky solution for now

Graph View

Backlinks