Nudge the logo off centre

The lettering does not sit in the middle of its own image, so centring
the image leaves the logo looking pushed to one side.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H9v2Xoa6eoeGYpK6gp95k9

config.js

@@ -121,9 +121,14 @@ const IMAGE_TYPES = new Set(['.jpg', '.jpeg', '.png', '.webp', '.avif']);
 const LOGO_FILE = 'logo.png';
 export const LOGO_SRC = `/assets/${LOGO_FILE}`;
 
-// How much of the screen's width the logo spans, centred.
+// How much of the screen's width the logo spans.
 export const LOGO_WIDTH = 0.6;
 
+// The lettering does not sit in the middle of its own image, so centring the
+// image leaves the logo looking pushed to one side. This nudges it back, as a
+// fraction of the logo's width — positive moves it right.
+export const LOGO_OFFSET = 0.1;
+
 function readBackgrounds() {
   let files;
   try {

public/player/backdrop.js

@@ -19,20 +19,23 @@ import {
   BACKGROUND_MAX_OVERSAMPLE,
   LOGO_SRC,
   LOGO_WIDTH,
+  LOGO_OFFSET,
 } from '/config.js';
 import { createPicker } from './motion.js';
 
 const KEYS = Object.keys(BACKGROUNDS);
 
 /**
- * Point the logo overlay at the configured file and size it against the
+ * Point the logo overlay at the configured file, size it against the screen
- * screen. The element is in the page from the start — only the two values that
+ * and nudge it off centre. The element is in the page from the start — only
- * belong to the config are set here.
+ * the values that belong to the config are set here. The offset is a fraction
+ * of the logo's own width, which is what a percentage in the translate means.
  */
 export function showLogo(element) {
   if (!element) return;
   element.src = LOGO_SRC;
   element.style.width = `${LOGO_WIDTH * 100}vw`;
+  element.style.setProperty('--logo-shift', `${LOGO_OFFSET * 100}%`);
 }
 
 /**

public/player/player.css

@@ -49,7 +49,10 @@ body {
   position: fixed;
   top: 50%;
   left: 50%;
-  translate: -50% -50%;
+  /* Centred, then nudged sideways by LOGO_OFFSET, which backdrop.js writes
+     onto the element. */
+  --logo-shift: 0%;
+  translate: calc(-50% + var(--logo-shift)) -50%;
   height: auto;
   /* Only bites on a screen too short for the width above — on the projector
      the width is what decides. */