web theme: flatten the dark-mode gradients (lower blob alphas + tighter glass sheen)

This commit is contained in:
Martin Dvořák 2026-09-30 12:46:45 +00:00
commit b733f8f87f
6 changed files with 17 additions and 12 deletions

View file

@ -72,7 +72,7 @@ more.
- **Fonts:** the web theme uses the system sans stack; Monocraft (self-hosted in `public/`) is - **Fonts:** the web theme uses the system sans stack; Monocraft (self-hosted in `public/`) is
used by the desktop theme's SMP menu and the in-desktop terminal. used by the desktop theme's SMP menu and the in-desktop terminal.
- **Images:** `next/image` - **Images:** `next/image`
- **Version:** `2.2.3` (see `package.json`) - **Version:** `2.2.4` (see `package.json`)
## 🚀 Running Locally ## 🚀 Running Locally

View file

@ -43,7 +43,7 @@ frosted-glass **web** site, and an alternate KDE/Plasma **desktop simulation**
utilities in the components (Tailwind is present via PostCSS but the look is utilities in the components (Tailwind is present via PostCSS but the look is
hand-written CSS). hand-written CSS).
- Path alias: `@/*` → `src/*`. - Path alias: `@/*` → `src/*`.
- Version: `2.2.3` (see `package.json`). - Version: `2.2.4` (see `package.json`).
### Scripts ### Scripts
```bash ```bash
@ -151,6 +151,11 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
`backdrop-filter: blur(28px) saturate(180%)`. The page blobs behind the panels `backdrop-filter: blur(28px) saturate(180%)`. The page blobs behind the panels
are `.web-bg` (a fixed radial-gradient layer at `z-index: 0`; `.web-root` sits are `.web-bg` (a fixed radial-gradient layer at `z-index: 0`; `.web-root` sits
at `z-index: 1`). at `z-index: 1`).
- The **dark scheme is deliberately flatter** than light: much lower `--blob-*`
alphas (~0.09 vs ~0.30) and a tighter `--glass-hi`/`--glass-lo` pair. White on
near-black reads far stronger than white on a pale page, so copying the light
alphas makes dark look far more gradient-heavy. Tune the two schemes
separately, not by eye against each other.
- Interactive surfaces (`.web-ctl`, pills, `.service-button`, `.social-button`, - Interactive surfaces (`.web-ctl`, pills, `.service-button`, `.social-button`,
`.project-card`, `.gym-item`, `.contribution-entry`, `.heatmap-container`) read `.project-card`, `.gym-item`, `.contribution-entry`, `.heatmap-container`) read
the `--btn-bg` / `--btn-bg-hi` / `--btn-border` / `--btn-shadow` tokens with the `--btn-bg` / `--btn-bg-hi` / `--btn-border` / `--btn-shadow` tokens with

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "dvorakmortonxd", "name": "dvorakmortonxd",
"version": "2.2.3", "version": "2.2.4",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "dvorakmortonxd", "name": "dvorakmortonxd",
"version": "2.2.3", "version": "2.2.4",
"dependencies": { "dependencies": {
"next": "^16.3.5", "next": "^16.3.5",
"react": "^19.3.0", "react": "^19.3.0",

View file

@ -1,6 +1,6 @@
{ {
"name": "dvorakmortonxd", "name": "dvorakmortonxd",
"version": "2.2.3", "version": "2.2.4",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "node scripts/dev-server.mjs", "dev": "node scripts/dev-server.mjs",

View file

@ -365,7 +365,7 @@ export default function WebLayout() {
</Section> </Section>
<footer className="web-footer glass"> <footer className="web-footer glass">
<span className="web-footer-label">v2.2.3</span> <span className="web-footer-label">v2.2.4</span>
© 2025-2026 Martin Dvořák. All rights reserved (not really I dont care, just © 2025-2026 Martin Dvořák. All rights reserved (not really I dont care, just
follow the GPL3.0 License) follow the GPL3.0 License)
</footer> </footer>

View file

@ -55,8 +55,8 @@ html[data-theme="web"][data-scheme="dark"] {
--web-ink: #e9edf9; --web-ink: #e9edf9;
--web-muted: #97a3bd; --web-muted: #97a3bd;
--glass-hi: rgba(255, 255, 255, 0.085); --glass-hi: rgba(255, 255, 255, 0.07);
--glass-lo: rgba(255, 255, 255, 0.03); --glass-lo: rgba(255, 255, 255, 0.045);
--glass-border: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.12);
--glass-inset: rgba(255, 255, 255, 0.1); --glass-inset: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.85); --glass-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.85);
@ -64,10 +64,10 @@ html[data-theme="web"][data-scheme="dark"] {
--accent-soft: rgba(139, 124, 255, 0.4); --accent-soft: rgba(139, 124, 255, 0.4);
--accent-line: rgba(139, 124, 255, 0.55); --accent-line: rgba(139, 124, 255, 0.55);
--blob-a: rgba(109, 94, 252, 0.24); --blob-a: rgba(109, 94, 252, 0.09);
--blob-b: rgba(47, 139, 255, 0.18); --blob-b: rgba(47, 139, 255, 0.07);
--blob-c: rgba(236, 72, 153, 0.13); --blob-c: rgba(236, 72, 153, 0.05);
--blob-d: rgba(45, 212, 191, 0.11); --blob-d: rgba(45, 212, 191, 0.04);
--btn-bg: rgba(255, 255, 255, 0.06); --btn-bg: rgba(255, 255, 255, 0.06);
--btn-bg-hi: rgba(255, 255, 255, 0.12); --btn-bg-hi: rgba(255, 255, 255, 0.12);