Files

Tommy D. Rossi 8871a3f36f website: user-centered copy rewrite, fix image layout shift, replace HTML entities

- Rewrite landing page copy to focus on user needs: agent controlling
  your browser, low context usage, unrestricted capabilities, collaboration
- Add Collaboration section (captchas, consent walls, getting agent unstuck)
- Replace HTML entities (&mdash; &apos; &ndash;) with JS string expressions
- Add width/height to screenshot image to prevent layout shift
- Add no-layout-shift requirement to AGENTS.md

2026-02-20 23:25:48 +01:00

2.2 KiB

Raw Blame History

Website

Tailwind dark mode

Dark mode uses prefers-color-scheme media query, configured in globals.css:

@custom-variant dark (@media (prefers-color-scheme: dark));

`@variant dark` rules

Must be nested inside a selector, never at the top level:

/* WRONG - silently produces no output */
@variant dark {
  .my-class { color: white; }
}

/* CORRECT - nest inside the selector */
.my-class {
  @variant dark {
    color: white;
  }
}

/* CORRECT - define variables inside :root */
:root {
  @variant dark {
    --my-var: white;
  }
}

Only works in CSS files that are part of the Tailwind compilation chain. Files must be imported via CSS @import from globals.css (which has @import "tailwindcss"). JS/TS import "file.css" in route files does NOT go through Tailwind — @variant dark will silently fail.

/* globals.css — this is the Tailwind entry point */
@import "tailwindcss";
@import "./editorial.css";       /* editorial page styles (class names, layout) */
@import "./editorial-prism.css"; /* prism syntax highlighting */
@custom-variant dark (@media (prefers-color-scheme: dark));

If you create a new CSS file that needs @variant dark, add it as a CSS @import in globals.css. Do NOT import it from a .tsx file.

For many dark overrides, use CSS variables on `:root`

For files with many dark mode selectors (like prism syntax colors), define CSS variables in :root { @variant dark { ... } } and reference them in selectors. This avoids repeating @variant dark in every rule.

Images must not cause layout shift

Every <img> must have explicit width and height attributes matching the intrinsic pixel dimensions of the source file. Add style={{ height: "auto" }} to keep it responsive. This lets the browser reserve the correct aspect ratio space before the image loads, preventing layout shift.

<img src="/photo.png" width={1280} height={800} style={{ maxWidth: "100%", height: "auto" }} />

Use sips -g pixelWidth -g pixelHeight <file> to get dimensions on macOS.

No localStorage dark mode toggle

There is no JS-based .dark class toggle. Do not add inline scripts to toggle .dark on <html>. The site follows the OS preference only via prefers-color-scheme.

2.2 KiB Raw Blame History