Serve the docs site from the domain it is actually on, and theme it

GitHub applies the user site's custom domain to every project page on the
account, so this site is served from camilleross.org/datamatch/ and never
from the chross22.github.io URL that _pkgdown.yml and DESCRIPTION both
named. Every canonical link, sitemap entry and og:url pointed at a hostname
no visitor uses, which is two URLs for each page as far as a search engine
is concerned. Both now name where people land.

The theme carries the main site's tokens across, so crossing from
camilleross.org into the package docs no longer looks like leaving for
somebody else's site. Tokens are set as Bootstrap CSS custom properties
rather than Sass variables because the light switch flips data-bs-theme at
runtime and only the CSS layer can follow it. Note --bs-link-color-rgb:
Bootstrap 5.3 resolves anchors through the -rgb pair, and setting only
--bs-link-color leaves every link Bootstrap blue.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: chross22

DESCRIPTION

@@ -57,6 +57,6 @@ Suggests:
     withr
 Config/testthat/edition: 3
 VignetteBuilder: knitr
-URL: https://github.com/chross22/datamatch, https://chross22.github.io/datamatch/
+URL: https://github.com/chross22/datamatch, https://camilleross.org/datamatch/
 BugReports: https://github.com/chross22/datamatch/issues
 Config/roxygen2/version: 8.1.0

_pkgdown.yml

@@ -1,7 +1,12 @@
-url: https://chross22.github.io/datamatch/
+# Served from camilleross.org/datamatch/, not chross22.github.io: GitHub applies
+# the user site's custom domain to every project page on the account. This must
+# name where visitors actually land, or the canonical link, sitemap and og:url
+# all point at a hostname nobody uses and search engines see two of each page.
+url: https://camilleross.org/datamatch/
 
 template:
   bootstrap: 5
+  light-switch: true
 
 reference:
 - title: Fetching data

pkgdown/extra.scss

@@ -0,0 +1,158 @@
+// Shared pkgdown theme for Camille Ross's R packages.
+//
+// These sites are served from camilleross.org/<package>/, because GitHub
+// applies the user site's custom domain to every project page on the account.
+// A visitor therefore crosses from the main site into these without changing
+// hostname, and stock Bootstrap makes that crossing look like a mistake. The
+// tokens below are lifted from chross22.github.io/_sass/site/_tokens.scss so
+// the two read as one property.
+//
+// Everything is expressed as Bootstrap 5.3 CSS custom properties rather than
+// Sass variables, for one reason: pkgdown's light switch flips
+// data-bs-theme at runtime, and only the CSS-variable layer can follow it.
+// Setting $body-bg at compile time would give one fixed palette.
+//
+// ACCESSIBILITY CONTRACT, inherited from the main site — do not break it:
+//   * Every text colour clears 4.5:1 on both surfaces in both themes.
+//   * --accent and --link are near-identical in luminance, so neither may be
+//     the only thing distinguishing two meanings. Links stay underlined.
+// System font stacks only: no network requests, no FOUT, nothing to self-host.
+
+:root {
+  --site-paper:     #fbfbf9;
+  --site-paper-2:   #f2f3f1;
+  --site-abyss:     #1d2528;
+  --site-abyss-2:   #263033;
+  --site-ink:       #26302f;
+  --site-ink-2:     #5c6765;
+  --site-bone:      #e3e8e6;
+  --site-bone-2:    #a7b3b4;
+  --site-sea:       #276270;
+  --site-sea-deep:  #1d5364;
+  --site-sea-light: #7fc4d9;
+  --site-sea-pale:  #a6dbea;
+  --site-copper:    #8b4920;
+  --site-copper-lt: #e09a62;
+  --site-rule:      #e3e5e0;
+  --site-rule-dk:   #35403f;
+
+  --site-font-display: Charter, "Bitstream Charter", "Iowan Old Style",
+                       "Source Serif 4", Georgia, "Times New Roman", serif;
+  --site-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+  --site-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+// ---- light ---------------------------------------------------------------
+:root,
+[data-bs-theme="light"] {
+  --bs-body-bg:          var(--site-paper);
+  --bs-body-color:       var(--site-ink);
+  --bs-secondary-color:  var(--site-ink-2);
+  --bs-emphasis-color:   var(--site-ink);
+  --bs-border-color:     var(--site-rule);
+  --bs-link-color:       var(--site-sea);
+  --bs-link-hover-color: var(--site-sea-deep);
+  // Bootstrap 5.3 resolves anchors through the -rgb pair, not the colour
+  // itself: a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity)) }.
+  // Setting only --bs-link-color leaves every link Bootstrap blue.
+  --bs-link-color-rgb:       39, 98, 112;
+  --bs-link-hover-color-rgb: 29, 83, 100;
+  --bs-code-color:       var(--site-copper);
+  --bs-secondary-bg:     var(--site-paper-2);
+  --bs-tertiary-bg:      var(--site-paper-2);
+  --site-accent:         var(--site-copper);
+}
+
+// ---- dark ----------------------------------------------------------------
+// Bootstrap's own dark mode lands near black, which is not this palette.
+[data-bs-theme="dark"] {
+  --bs-body-bg:          var(--site-abyss);
+  --bs-body-color:       var(--site-bone);
+  --bs-secondary-color:  var(--site-bone-2);
+  --bs-emphasis-color:   var(--site-bone);
+  --bs-border-color:     var(--site-rule-dk);
+  --bs-link-color:       var(--site-sea-light);
+  --bs-link-hover-color: var(--site-sea-pale);
+  --bs-link-color-rgb:       127, 196, 217;
+  --bs-link-hover-color-rgb: 166, 219, 234;
+  --bs-code-color:       var(--site-copper-lt);
+  --bs-secondary-bg:     var(--site-abyss-2);
+  --bs-tertiary-bg:      var(--site-abyss-2);
+  --site-accent:         var(--site-copper-lt);
+}
+
+// ---- type ----------------------------------------------------------------
+body {
+  font-family: var(--site-font-body);
+  font-size: 1.0625rem;
+  line-height: 1.65;
+}
+
+h1, h2, h3, h4, h5, h6,
+.navbar-brand {
+  font-family: var(--site-font-display);
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.005em;
+  text-wrap: balance;
+}
+
+// unquote(): Sass would otherwise try to add rem to vw at compile time.
+h1 { font-size: clamp(1.875rem, unquote("1.4rem + 1.8vw"), 2.375rem); }
+h2 { font-size: 1.5625rem; }
+h3 { font-size: 1.4375rem; }
+
+code, pre, kbd, samp { font-family: var(--site-font-mono); }
+
+// Colour is decoration, never the only cue: under protanopia in dark mode the
+// link and body colours sit at about 1.5:1.
+main a:not(.btn):not(.anchor):not(.nav-link) { text-decoration: underline; }
+
+// ---- chrome --------------------------------------------------------------
+.navbar {
+  background-color: var(--bs-body-bg) !important;
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.navbar-brand {
+  font-size: 1.1875rem;
+  letter-spacing: 0.01em;
+}
+
+.navbar .nav-link { color: var(--bs-secondary-color) !important; }
+.navbar .nav-link:hover,
+.navbar .nav-link.active { color: var(--bs-emphasis-color) !important; }
+
+// The active page gets a copper rule, matching the main site's header.
+.navbar .nav-link.active {
+  box-shadow: inset 0 -2px 0 var(--site-accent);
+}
+
+.template-home h1 { margin-bottom: 1.5rem; }
+
+pre, .sourceCode {
+  background-color: var(--bs-secondary-bg) !important;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 5px;
+}
+
+table { font-size: 0.9375rem; }
+thead th { border-bottom: 1px solid var(--bs-border-color); }
+
+.sidebar {
+  font-size: 0.9375rem;
+  h2, h3 { font-size: 1.1875rem; }
+}
+
+footer {
+  border-top: 1px solid var(--bs-border-color);
+  color: var(--bs-secondary-color);
+  font-size: 0.8125rem;
+}
+
+// Focus ring carries the sea colour rather than Bootstrap's default blue.
+:focus-visible {
+  outline: 2px solid var(--bs-link-color);
+  outline-offset: 2px;
+}