VARASYS/ZDDC-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: VARASYS:e3ec3ae93cd4dcbd97bd5f506d4835c14113c0a9
Branches Tags
VARASYS:main
..
compare: VARASYS:a0815ced5d5a21b09b1d2b67bade09238e2eba5d
Branches Tags
VARASYS:main

2 commits
e3ec3ae93c ... a0815ced5d

Author SHA1 Message Date
ZDDC
a0815ced5d fix: dark-mode contrast on blue pills, brand logo, stable channel chip
All checks were successful
Deploy content to live site / deploy (push) Successful in 3s
Details 
- index.html: stable channel chip referenced --color-primary, which
  is undefined; falling back to the browser-default visited-link color
  rendered it purple. Switch to the actually-defined --color-accent.
- css/style.css: lift dark-mode pill backgrounds (--color-accent-soft,
  --color-Tracking, --color-Title) so pills have a visible edge against
  the near-black page bg (~1.5:1 → ~2.2:1 adjacency contrast). Accent
  text on the lighter pills stays at 3.6:1, fine for short labels.
- css/style.css: brand-logo's navy <rect> blends into the page bg in
  dark mode; override its fill to a lighter steel-blue so the rounded
  square stays visible.

Light mode is untouched.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-02 21:27:20 -05:00
ZDDC
c275afc4a3 docs: add Publishing and Editing notes to README; stub CLAUDE.md 
Captures the rsync-on-push contract (excludes, delete-after) and the
two non-obvious editing constraints (layout.js selector list, inline
<style> convention). CLAUDE.md is now a one-line pointer to README so
/init has something to find.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-02 21:27:10 -05:00
4 changed files with 43 additions and 11 deletions
Show stats Expand all files Collapse all files

3
CLAUDE.md Normal file
View file

@ -0,0 +1,3 @@
# CLAUDE.md
See [README.md](README.md).

19
README.md
View file

@ -28,6 +28,25 @@ The preview won't have a `/releases/` directory unless you also have
the source repo and run its build pipeline. That's expected — the the source repo and run its build pipeline. That's expected — the
two repos are intentionally decoupled. two repos are intentionally decoupled.
## Publishing
`.forgejo/workflows/deploy-content.yml` rsyncs the working tree into
`/srv/zddc/` on the deploy host on every push to `main`. The rsync
uses `--delete-after` and excludes `/releases/`, `/.git*`,
`/.forgejo*`, `/README.md`, and `/LICENSE` — anything else added at
the repo root **will** be published.
## Editing notes
- `js/layout.js` queries the header for `.header-nav`, `.dropdown`,
`.dropdown-toggle`, `.dropdown-menu`, and `.theme-toggle`. Both
HTML pages need to keep those classes or the theme toggle and
Tools dropdown silently break.
- Page-specific CSS goes in an inline `<style>` in `<head>` (see
`index.html`); only shared rules go in `css/style.css`. Design
tokens (`--color-accent`, spacing scale, etc.) live at the top of
`css/style.css` — prefer those over hardcoded values.
## Contributing ## Contributing
Issues + PRs welcome. For changes to the tool source code (not the Issues + PRs welcome. For changes to the tool source code (not the

22
css/style.css
View file

@ -1017,13 +1017,13 @@ tr:nth-child(even) td {
--color-accent: #58a6ff; --color-accent: #58a6ff;
--color-accent-hover: #3d84c2; --color-accent-hover: #3d84c2;
--color-accent-soft: #1a3550; --color-accent-soft: #1f4d7a;
--color-accent-dark: #79c0ff; --color-accent-dark: #79c0ff;
--color-Tracking: #1e3a5f; --color-Tracking: #264e7d;
--color-Revision: #134a29; --color-Revision: #134a29;
--color-Status: #5c4a00; --color-Status: #5c4a00;
--color-Title: #2d3440; --color-Title: #3a4659;
} }
} }
@ -1039,13 +1039,23 @@ html[data-theme="dark"] {
--color-accent: #58a6ff; --color-accent: #58a6ff;
--color-accent-hover: #3d84c2; --color-accent-hover: #3d84c2;
--color-accent-soft: #1a3550; --color-accent-soft: #1f4d7a;
--color-accent-dark: #79c0ff; --color-accent-dark: #79c0ff;
--color-Tracking: #1e3a5f; --color-Tracking: #264e7d;
--color-Revision: #134a29; --color-Revision: #134a29;
--color-Status: #5c4a00; --color-Status: #5c4a00;
--color-Title: #2d3440; --color-Title: #3a4659;
}
/* Brand logo's navy bg-rect blends into the dark page bg; lift it. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo > rect {
fill: #2a5a8a;
}
}
html[data-theme="dark"] .brand-logo > rect {
fill: #2a5a8a;
} }
/* ── Pain badge dark mode ── */ /* ── Pain badge dark mode ── */

2
index.html
View file

@ -18,7 +18,7 @@
.channel-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.9rem; } .channel-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.9rem; }
.channel-row a { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 999px; text-decoration: none; border: 1px solid var(--color-border); color: var(--color-text); } .channel-row a { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 999px; text-decoration: none; border: 1px solid var(--color-border); color: var(--color-text); }
.channel-row a:hover { background: var(--color-bg-subtle); } .channel-row a:hover { background: var(--color-bg-subtle); }
.channel-row .channel-stable { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; } .channel-row .channel-stable { border-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
.channel-row .channel-beta, .channel-row .channel-alpha { color: var(--color-text-muted); } .channel-row .channel-beta, .channel-row .channel-alpha { color: var(--color-text-muted); }
.install-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); margin-top: var(--spacing-md); } .install-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); margin-top: var(--spacing-md); }
.install-card { padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-subtle); } .install-card { padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-subtle); }