Custom SCSS Theming

This experiment adds sandbox-only title, callout, reading-badge, and wide-screen header styling. It uses Quartz theme variables rather than fixed colour literals. The recorded evidence establishes that the rules were compiled and a callout was rendered; it does not establish measured contrast, appearance in both modes, or responsive behavior through a resize interaction.

The following contiguous excerpt is copied from the actual /home/loca/dev/quartz-sandbox/sandbox/engine/quartz/styles/custom.scss, lines 1–30. This is the stylesheet itself, not the shorter illustrative snippet in the experiment article:

@use "./variables.scss" as *;
 
// Sandbox-only accents deliberately use Quartz's mode-aware CSS variables.
:root {
  --sandbox-accent: var(--tertiary);
  --sandbox-accent-strong: var(--secondary);
}
 
.page-title {
  letter-spacing: 0.015em;
  color: var(--sandbox-accent-strong);
}
 
.callout[data-callout="important"] {
  border-inline-start: 0.3rem solid var(--sandbox-accent);
}
 
[data-sandbox-reading-stats] {
  border: 1px solid var(--lightgray);
  border-radius: 0.35rem;
  color: var(--darkgray);
  font-size: 0.85rem;
  padding: 0.2rem 0.55rem;
}
 
@media #{$desktop} {
  .page-header {
    border-bottom: 1px solid var(--lightgray);
  }
}

The fixture callout is copied verbatim from /home/loca/dev/quartz-sandbox/sandbox/vault/experiments/custom-scss-theming.md, lines 68–70:

> [!important] Sandbox-only style
> 
> This callout is the visual marker for the `data-callout="important"` selector. The selector
> is intentionally narrow, and the property values all come from the theme.

What the rendered output proves

The corresponding live article is https://quartz.loca.zone/experiments/custom-scss-theming.html. The numbers below are prior-capture evidence from /home/loca/dev/quartz-sandbox/evidence/2026-09-15-quartz-migration-f1fd35c3/sandbox-experiments.json, whose rendered capture used a temporary loopback server for dist-1789511778. They are not new visual observations by this page’s author.

• rendered_proof.routes records title Custom SCSS Theming — Quartz Sandbox, bytes: 42817, and markers callout_class: 1, reading_stats: 1, reading_words: "245", reading_minutes: "2".
• The experiment’s proof_markers records compiled_custom_scss: true and callout_class: 1.
• artifacts.compiled_custom_scss records accent_variables: true, page_title_rule: true, important_callout_rule: true, and reading_stats_rule: true. Its desktop_rule value is exactly: @media (min-width:1200px) .page-header border rule present.

Compiled CSS evidence and DOM evidence are different observations: the former locates output rules; the latter locates a rendered callout. Neither alone proves computed styles won the cascade, establishes contrast or legibility, or demonstrates a dark-mode toggle or breakpoint transition. The source references mode-aware variables, but no measured light/dark appearance claim follows from these receipts. This page does not claim that unrelated route, search, or graph behavior was regression-tested by the style capture.

Safe for the shared engine?

Recorded classification: safe_for_shared_engine: false.

Receipt reason, verbatim:

It is a sandbox brand treatment; copying it into the shared engine would change all 51 wikis.

This classification is an assessment, not deployment authority. Even a true verdict does NOT authorize a shared-engine change: report any such requirement as a BLOCKER, not an action. These rules belong to the isolated sandbox, not the shared stylesheet.

Try it in the sandbox

The rebuild command is provided for an authorized sandbox operator; it was not run while authoring this page:

cd /home/loca/dev/quartz-sandbox/sandbox && ./build.sh

The actual wrapper /home/loca/dev/quartz-sandbox/sandbox/build.sh pins the isolated engine to commit 3dff48b5df6d84c9544a5ae19c8f2cbb01dc44e5 and refuses an engine outside the project. A commit mismatch fails unless the explicit SANDBOX_ALLOW_DRIFT=1 override is used; that override does not remove the isolation fence. A nonblocking .build.lock serializes wrapper builds. It runs install-plugins BEFORE bootstrap-cli.mjs build, using --directory with /home/loca/dev/quartz-sandbox/sandbox/vault by default and --output with a fresh timestamped /home/loca/dev/quartz-sandbox/sandbox/dist-<epoch> directory. It checks for index.html before atomically swapping current. The origin sees the new release on the next request without a restart, as the prior sandbox-runtime.json hot-swap receipt demonstrated.

Recorded runtime invocation, reference only:

PATH=/usr/bin:/bin PORT=51947 SANDBOX_ROOT=/home/loca/dev/quartz-sandbox/sandbox/current NODE_ENV=production /usr/bin/node /home/loca/dev/quartz-sandbox/sandbox/serve.mjs

The production service already owns port 51947. Do NOT start a second process or restart the service. The runtime receipt describes an earlier supervised proof process; it is not an instruction to recreate that process beside production.

index