dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(web): make Frutiger Aero liquid glass truly see-through with readable text (v2.2.19)

Browse source
This commit is contained in:
Martin Dvořák 2026-10-15 23:33:41 +02:00
commit 2089705e37
7 changed files with 135 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

2
AGENTS.md
View file

@ -56,7 +56,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.18` (see `package.json`). - Version: `2.2.19` (see `package.json`).
### Scripts ### Scripts
```bash ```bash

2
README.md
View file

@ -92,7 +92,7 @@ more.
icons (`public/freezmo.png`, `public/freezmo_aero.png`), the Frutiger Aero wallpaper icons (`public/freezmo.png`, `public/freezmo_aero.png`), the Frutiger Aero wallpaper
(`public/frutigerbackground.png`), the Joker easter egg and the Gentoo mark; all cards, (`public/frutigerbackground.png`), the Joker easter egg and the Gentoo mark; all cards,
feature/app previews and the desktop wallpaper are CSS. feature/app previews and the desktop wallpaper are CSS.
- **Version:** `2.2.18` (see `package.json`) - **Version:** `2.2.19` (see `package.json`)
- **Dependencies:** `npm audit` reports **0 vulnerabilities**. `next` is kept at a patched - **Dependencies:** `npm audit` reports **0 vulnerabilities**. `next` is kept at a patched
release (`>=16.3.6`) for the `next/og` RCE, and `brace-expansion` is force-upgraded via release (`>=16.3.6`) for the `next/og` RCE, and `brace-expansion` is force-upgraded via
`overrides`. `braces` (a transitive ESLint/`fast-glob` dependency) has **no upstream fix**, `overrides`. `braces` (a transitive ESLint/`fast-glob` dependency) has **no upstream fix**,

24
graphify-out/manifest.json
View file

@ -24,9 +24,9 @@
"semantic_hash": "03388a201be8750ddcddb14dfbc34411" "semantic_hash": "03388a201be8750ddcddb14dfbc34411"
}, },
"package.json": { "package.json": {
"mtime": 1792099681.7033262, "mtime": 1792099979.9219553,
"seen": 1792099697.2859526, "seen": 1792099995.8841898,
"ast_hash": "54ab7827bcc73a489e87842b63dc3ff2", "ast_hash": "8172234618a09e371ddd0ffde8aae133",
"semantic_hash": "" "semantic_hash": ""
}, },
"postcss.config.mjs": { "postcss.config.mjs": {
@ -114,9 +114,9 @@
"semantic_hash": "20e25c727b4bb982e5a22d65efece143" "semantic_hash": "20e25c727b4bb982e5a22d65efece143"
}, },
"src/app/components/WebLayout.tsx": { "src/app/components/WebLayout.tsx": {
"mtime": 1792099684.666372, "mtime": 1792099982.8900013,
"seen": 1792099697.2860098, "seen": 1792099995.884235,
"ast_hash": "c1ce20c375fe65ec25daa5ee3570b159", "ast_hash": "3bfb36b857aa77ff2f4d6273032b2807",
"semantic_hash": "" "semantic_hash": ""
}, },
"src/app/components/WinWindow.tsx": { "src/app/components/WinWindow.tsx": {
@ -240,9 +240,9 @@
"semantic_hash": "b81dea2175efa2b0b6c38451ab5a4bbd" "semantic_hash": "b81dea2175efa2b0b6c38451ab5a4bbd"
}, },
"README.md": { "README.md": {
"mtime": 1792099686.846406, "mtime": 1792099983.2880075,
"seen": 1792099697.286089, "seen": 1792099995.8842998,
"ast_hash": "56de572329691e8f09e3d591315d7f75", "ast_hash": "a803a6b174839fa961a949e6126934e7",
"semantic_hash": "" "semantic_hash": ""
}, },
"public/llms.txt": { "public/llms.txt": {
@ -366,9 +366,9 @@
"semantic_hash": "6f69e16823f10d9c7af1625eff2b32e8" "semantic_hash": "6f69e16823f10d9c7af1625eff2b32e8"
}, },
"AGENTS.md": { "AGENTS.md": {
"mtime": 1792099688.789436, "mtime": 1792099983.9940186,
"seen": 1792099697.2860813, "seen": 1792099995.8842938,
"ast_hash": "b94f2124b7e2b2e682234e9fc12e0bd2", "ast_hash": "e2d160704c7a65c785806cd9872d9113",
"semantic_hash": "" "semantic_hash": ""
}, },
"public/freezmo_aero.png": { "public/freezmo_aero.png": {

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "dvorakmortonxd", "name": "dvorakmortonxd",
"version": "2.2.18", "version": "2.2.19",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "dvorakmortonxd", "name": "dvorakmortonxd",
"version": "2.2.18", "version": "2.2.19",
"dependencies": { "dependencies": {
"next": "^16.3.8", "next": "^16.3.8",
"react": "^19.3.0", "react": "^19.3.0",

2
package.json
View file

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

2
src/app/components/WebLayout.tsx
View file

@ -421,7 +421,7 @@ export default function WebLayout() {
</Section> </Section>
<footer className="web-footer glass"> <footer className="web-footer glass">
<span className="web-footer-label">v2.2.18</span> <span className="web-footer-label">v2.2.19</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>

232
src/app/web.css
View file

@ -1954,48 +1954,47 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
============================================================ */ ============================================================ */
html[data-theme="web"][data-aero="true"], html[data-theme="web"][data-aero="true"],
html[data-theme="web"][data-scheme="dark"][data-aero="true"] { html[data-theme="web"][data-scheme="dark"][data-aero="true"] {
--web-accent: #baf2ff; --web-accent: #9eefff;
--web-accent-2: #7ce8ff; --web-accent-2: #64e3ff;
--web-page: #0a74cc; --web-page: #0a74cc;
--web-ink: #ffffff; --web-ink: #ffffff;
--web-muted: rgba(236, 248, 255, 0.86); --web-muted: rgba(242, 250, 255, 0.94);
--glass-hi: rgba(255, 255, 255, 0.22); --glass-hi: rgba(255, 255, 255, 0.14);
--glass-lo: rgba(255, 255, 255, 0.06); --glass-lo: rgba(8, 28, 62, 0.2);
--glass-border: rgba(255, 255, 255, 0.78); --glass-border: rgba(255, 255, 255, 0.58);
--glass-inset: rgba(255, 255, 255, 0.95); --glass-inset: rgba(255, 255, 255, 0.92);
--pill-bg: rgba(255, 255, 255, 0.16); --pill-bg: rgba(8, 28, 62, 0.32);
--glass-shadow: --glass-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95), inset 0 1.5px 1px rgba(255, 255, 255, 0.92),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.7), inset 0 -1.5px 1px rgba(255, 255, 255, 0.58),
inset 1.5px 0 1px rgba(255, 255, 255, 0.5), inset 1.5px 0 1px rgba(255, 255, 255, 0.45),
inset -1.5px 0 1px rgba(255, 255, 255, 0.5), inset -1.5px 0 1px rgba(255, 255, 255, 0.45),
inset 0 4px 12px rgba(255, 255, 255, 0.26), inset 0 6px 16px rgba(255, 255, 255, 0.16),
inset 0 -4px 12px rgba(255, 255, 255, 0.18), inset 0 -6px 16px rgba(0, 18, 48, 0.22),
inset 0 0 22px rgba(255, 255, 255, 0.12), 0 14px 36px -10px rgba(0, 18, 48, 0.45),
0 14px 34px -10px rgba(0, 22, 56, 0.42), 0 2px 8px rgba(0, 14, 40, 0.25);
0 2px 8px rgba(0, 18, 48, 0.22);
--hover: rgba(255, 255, 255, 0.18); --hover: rgba(255, 255, 255, 0.18);
--accent-soft: rgba(255, 255, 255, 0.45); --accent-soft: rgba(255, 255, 255, 0.45);
--accent-line: rgba(255, 255, 255, 0.95); --accent-line: rgba(255, 255, 255, 0.92);
--btn-bg: rgba(255, 255, 255, 0.1); --btn-bg: rgba(8, 28, 62, 0.22);
--btn-bg-hi: rgba(255, 255, 255, 0.22); --btn-bg-hi: rgba(255, 255, 255, 0.22);
--btn-border: rgba(255, 255, 255, 0.8); --btn-border: rgba(255, 255, 255, 0.68);
--btn-shadow: --btn-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95), inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.68), inset 0 -1.5px 1px rgba(255, 255, 255, 0.6),
inset 1px 0 1px rgba(255, 255, 255, 0.45), inset 1px 0 1px rgba(255, 255, 255, 0.42),
inset -1px 0 1px rgba(255, 255, 255, 0.45), inset -1px 0 1px rgba(255, 255, 255, 0.42),
inset 0 3px 8px rgba(255, 255, 255, 0.24), inset 0 4px 10px rgba(255, 255, 255, 0.18),
inset 0 -3px 8px rgba(255, 255, 255, 0.14), inset 0 -4px 10px rgba(0, 18, 48, 0.18),
0 8px 20px -8px rgba(0, 22, 56, 0.36); 0 8px 20px -8px rgba(0, 18, 48, 0.35);
--fg: var(--web-ink); --fg: var(--web-ink);
--white: var(--web-ink); --white: var(--web-ink);
--gray: var(--web-muted); --gray: var(--web-muted);
--bg: var(--web-page); --bg: var(--web-page);
--bg-hard: rgba(255, 255, 255, 0.16); --bg-hard: rgba(6, 24, 54, 0.26);
--accent: var(--web-accent); --accent: var(--web-accent);
--accent2: var(--web-accent-2); --accent2: var(--web-accent-2);
--accent3: var(--web-accent); --accent3: var(--web-accent);
@ -2017,13 +2016,15 @@ html[data-theme="web"][data-scheme="dark"][data-aero="true"] {
html[data-theme="web"][data-aero="true"] body { html[data-theme="web"][data-aero="true"] body {
background: #0a74cc url("/frutigerbackground.png") center / cover fixed no-repeat; background: #0a74cc url("/frutigerbackground.png") center / cover fixed no-repeat;
text-shadow: 0 1px 3px rgba(0, 24, 58, 0.48); text-shadow:
0 1px 2px rgba(0, 16, 42, 0.82),
0 2px 8px rgba(0, 16, 42, 0.45);
} }
html[data-theme="web"][data-aero="true"] .web-bg { html[data-theme="web"][data-aero="true"] .web-bg {
background: background:
radial-gradient(56rem 38rem at 86% 6%, rgba(255, 255, 255, 0.28), transparent 65%), radial-gradient(56rem 38rem at 86% 6%, rgba(255, 255, 255, 0.16), transparent 65%),
radial-gradient(50rem 40rem at 14% 92%, rgba(80, 255, 190, 0.18), transparent 68%), radial-gradient(50rem 40rem at 14% 92%, rgba(80, 255, 190, 0.12), transparent 68%),
url("/frutigerbackground.png") center / cover no-repeat; url("/frutigerbackground.png") center / cover no-repeat;
} }
@ -2115,53 +2116,65 @@ html[data-theme="web"][data-aero="true"] .web-bg {
/* ---------- Crystal-clear 3D bevel-rimmed liquid glass ---------- */ /* ---------- Crystal-clear 3D bevel-rimmed liquid glass ---------- */
html[data-theme="web"][data-aero="true"] .glass, html[data-theme="web"][data-aero="true"] .glass,
html[data-theme="web"][data-aero="true"] .web-freezmo { html[data-theme="web"][data-aero="true"] .web-freezmo {
background: background: linear-gradient(
linear-gradient(
135deg, 135deg,
rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.14) 0%,
rgba(255, 255, 255, 0.06) 40%, rgba(8, 28, 62, 0.18) 48%,
rgba(255, 255, 255, 0.02) 62%, rgba(6, 22, 52, 0.22) 78%,
rgba(255, 255, 255, 0.18) 100% rgba(255, 255, 255, 0.1) 100%
) );
padding-box, border: 1px solid rgba(255, 255, 255, 0.45);
linear-gradient( box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.9),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.55),
inset 1.5px 0 1px rgba(255, 255, 255, 0.42),
inset -1.5px 0 1px rgba(255, 255, 255, 0.42),
inset 0 6px 16px rgba(255, 255, 255, 0.15),
inset 0 -6px 16px rgba(0, 18, 48, 0.22),
0 14px 36px -10px rgba(0, 18, 48, 0.45),
0 2px 8px rgba(0, 14, 40, 0.25);
-webkit-backdrop-filter: blur(8px) saturate(135%);
backdrop-filter: blur(8px) saturate(135%);
}
/* Hollow specular gradient rim (paints ONLY the 1.5px border ring, leaving the
interior 100% see-through). */
html[data-theme="web"][data-aero="true"] .glass::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(
135deg, 135deg,
rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.26) 28%, rgba(255, 255, 255, 0.18) 28%,
rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.85) 50%,
rgba(255, 255, 255, 0.22) 74%, rgba(255, 255, 255, 0.16) 74%,
rgba(255, 255, 255, 0.98) 100% rgba(255, 255, 255, 0.98) 100%
) );
border-box; -webkit-mask:
border: 1.5px solid transparent; linear-gradient(#000 0 0) content-box,
box-shadow: linear-gradient(#000 0 0);
inset 0 1.5px 1px rgba(255, 255, 255, 0.95), -webkit-mask-composite: xor;
inset 0 -1.5px 1px rgba(255, 255, 255, 0.72), mask-composite: exclude;
inset 1.5px 0 1px rgba(255, 255, 255, 0.5), pointer-events: none;
inset -1.5px 0 1px rgba(255, 255, 255, 0.5),
inset 0 5px 14px rgba(255, 255, 255, 0.28),
inset 0 -5px 14px rgba(255, 255, 255, 0.18),
inset 0 0 24px rgba(255, 255, 255, 0.12),
0 16px 36px -12px rgba(0, 22, 56, 0.42),
0 2px 8px rgba(0, 18, 48, 0.22);
-webkit-backdrop-filter: blur(12px) saturate(145%);
backdrop-filter: blur(12px) saturate(145%);
} }
html[data-theme="web"][data-aero="true"] .web-freezmo-orb { html[data-theme="web"][data-aero="true"] .web-freezmo-orb {
border: 1.2px solid rgba(255, 255, 255, 0.9); border: 1.2px solid rgba(255, 255, 255, 0.88);
background: radial-gradient( background: radial-gradient(
circle at 30% 26%, circle at 30% 26%,
rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.35) 16%, rgba(255, 255, 255, 0.32) 16%,
rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0.04) 52%,
rgba(255, 255, 255, 0.25) 82%, rgba(255, 255, 255, 0.22) 82%,
rgba(255, 255, 255, 0.82) 100% rgba(255, 255, 255, 0.78) 100%
); );
box-shadow: box-shadow:
inset 0 -6px 14px rgba(255, 255, 255, 0.35), inset 0 -6px 14px rgba(255, 255, 255, 0.32),
inset 0 6px 12px rgba(255, 255, 255, 0.92), inset 0 6px 12px rgba(255, 255, 255, 0.9),
0 0 28px rgba(255, 255, 255, 0.45); 0 0 28px rgba(255, 255, 255, 0.4);
} }
html[data-theme="web"][data-aero="true"] .web-ctl, html[data-theme="web"][data-aero="true"] .web-ctl,
@ -2180,35 +2193,23 @@ html[data-theme="web"][data-aero="true"] .fw,
html[data-theme="web"][data-aero="true"] .fw-url, html[data-theme="web"][data-aero="true"] .fw-url,
html[data-theme="web"][data-aero="true"] .fw-search, html[data-theme="web"][data-aero="true"] .fw-search,
html[data-theme="web"][data-aero="true"] .fw-tab { html[data-theme="web"][data-aero="true"] .fw-tab {
background: background: linear-gradient(
linear-gradient(
135deg, 135deg,
rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.16) 0%,
rgba(255, 255, 255, 0.07) 42%, rgba(8, 28, 62, 0.24) 50%,
rgba(255, 255, 255, 0.03) 64%, rgba(255, 255, 255, 0.1) 100%
rgba(255, 255, 255, 0.2) 100% );
) border: 1px solid rgba(255, 255, 255, 0.68);
padding-box,
linear-gradient(
135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.28) 30%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.24) 74%,
rgba(255, 255, 255, 0.98) 100%
)
border-box;
border: 1.5px solid transparent;
box-shadow: box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95), inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.7), inset 0 -1.5px 1px rgba(255, 255, 255, 0.6),
inset 1px 0 1px rgba(255, 255, 255, 0.48), inset 1px 0 1px rgba(255, 255, 255, 0.42),
inset -1px 0 1px rgba(255, 255, 255, 0.48), inset -1px 0 1px rgba(255, 255, 255, 0.42),
inset 0 4px 10px rgba(255, 255, 255, 0.24), inset 0 4px 10px rgba(255, 255, 255, 0.18),
inset 0 -4px 10px rgba(255, 255, 255, 0.16), inset 0 -4px 10px rgba(0, 18, 48, 0.2),
0 10px 24px -10px rgba(0, 22, 56, 0.38); 0 8px 20px -8px rgba(0, 18, 48, 0.35);
-webkit-backdrop-filter: blur(12px) saturate(145%); -webkit-backdrop-filter: blur(8px) saturate(135%);
backdrop-filter: blur(12px) saturate(145%); backdrop-filter: blur(8px) saturate(135%);
color: #ffffff; color: #ffffff;
} }
@ -2218,44 +2219,35 @@ html[data-theme="web"][data-aero="true"] .social-button:hover,
html[data-theme="web"][data-aero="true"] .gym-item:hover, html[data-theme="web"][data-aero="true"] .gym-item:hover,
html[data-theme="web"][data-aero="true"] .web-freezmo-cta:hover, html[data-theme="web"][data-aero="true"] .web-freezmo-cta:hover,
html[data-theme="web"][data-aero="true"] .web-freezmo-ghost:hover { html[data-theme="web"][data-aero="true"] .web-freezmo-ghost:hover {
background: background: linear-gradient(
linear-gradient(
135deg, 135deg,
rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.26) 0%,
rgba(255, 255, 255, 0.12) 42%, rgba(8, 28, 62, 0.26) 50%,
rgba(255, 255, 255, 0.06) 64%, rgba(255, 255, 255, 0.18) 100%
rgba(255, 255, 255, 0.28) 100% );
) border-color: rgba(255, 255, 255, 0.95);
padding-box,
linear-gradient(
135deg,
#ffffff 0%,
rgba(255, 255, 255, 0.45) 30%,
#ffffff 50%,
rgba(255, 255, 255, 0.4) 74%,
#ffffff 100%
)
border-box;
border-color: transparent;
box-shadow: box-shadow:
inset 0 2px 1.5px #ffffff, inset 0 2px 1.5px #ffffff,
inset 0 -2px 1.5px rgba(255, 255, 255, 0.85), inset 0 -2px 1.5px rgba(255, 255, 255, 0.8),
inset 0 5px 14px rgba(255, 255, 255, 0.36), inset 0 5px 14px rgba(255, 255, 255, 0.28),
inset 0 -5px 14px rgba(255, 255, 255, 0.24), inset 0 -5px 14px rgba(0, 18, 48, 0.22),
0 14px 30px -10px rgba(0, 22, 56, 0.48), 0 14px 30px -10px rgba(0, 22, 56, 0.48),
0 0 14px rgba(255, 255, 255, 0.35); 0 0 14px rgba(255, 255, 255, 0.3);
} }
html[data-theme="web"][data-aero="true"] .web-freezmo-name { html[data-theme="web"][data-aero="true"] .web-freezmo-name {
background: linear-gradient(120deg, #ffffff, #baf2ff); background: none;
-webkit-background-clip: text; -webkit-background-clip: border-box;
background-clip: text; background-clip: border-box;
color: transparent; color: #9eefff;
text-shadow:
0 1px 2px rgba(0, 16, 42, 0.85),
0 0 16px rgba(130, 235, 255, 0.55);
} }
html[data-theme="web"][data-aero="true"] .social-icon { html[data-theme="web"][data-aero="true"] .social-icon {
filter: invert(1) brightness(1.8); filter: invert(1) brightness(1.8) drop-shadow(0 1px 2px rgba(0, 16, 42, 0.75));
opacity: 0.92; opacity: 0.95;
} }
html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="1"], html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="1"],