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
hand-written CSS).
- Path alias: `@/*` → `src/*`.
- Version: `2.2.18` (see `package.json`).
- Version: `2.2.19` (see `package.json`).
### Scripts
```bash

2
README.md
View file

@ -92,7 +92,7 @@ more.
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,
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
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**,

24
graphify-out/manifest.json
View file

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

4
package-lock.json generated
View file

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

2
package.json
View file

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

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

@ -421,7 +421,7 @@ export default function WebLayout() {
</Section>
<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
follow the GPL3.0 License)
</footer>

242
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-scheme="dark"][data-aero="true"] {
--web-accent: #baf2ff;
--web-accent-2: #7ce8ff;
--web-accent: #9eefff;
--web-accent-2: #64e3ff;
--web-page: #0a74cc;
--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-lo: rgba(255, 255, 255, 0.06);
--glass-border: rgba(255, 255, 255, 0.78);
--glass-inset: rgba(255, 255, 255, 0.95);
--pill-bg: rgba(255, 255, 255, 0.16);
--glass-hi: rgba(255, 255, 255, 0.14);
--glass-lo: rgba(8, 28, 62, 0.2);
--glass-border: rgba(255, 255, 255, 0.58);
--glass-inset: rgba(255, 255, 255, 0.92);
--pill-bg: rgba(8, 28, 62, 0.32);
--glass-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.7),
inset 1.5px 0 1px rgba(255, 255, 255, 0.5),
inset -1.5px 0 1px rgba(255, 255, 255, 0.5),
inset 0 4px 12px rgba(255, 255, 255, 0.26),
inset 0 -4px 12px rgba(255, 255, 255, 0.18),
inset 0 0 22px rgba(255, 255, 255, 0.12),
0 14px 34px -10px rgba(0, 22, 56, 0.42),
0 2px 8px rgba(0, 18, 48, 0.22);
inset 0 1.5px 1px rgba(255, 255, 255, 0.92),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.58),
inset 1.5px 0 1px rgba(255, 255, 255, 0.45),
inset -1.5px 0 1px rgba(255, 255, 255, 0.45),
inset 0 6px 16px rgba(255, 255, 255, 0.16),
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);
--hover: rgba(255, 255, 255, 0.18);
--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-border: rgba(255, 255, 255, 0.8);
--btn-border: rgba(255, 255, 255, 0.68);
--btn-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.68),
inset 1px 0 1px rgba(255, 255, 255, 0.45),
inset -1px 0 1px rgba(255, 255, 255, 0.45),
inset 0 3px 8px rgba(255, 255, 255, 0.24),
inset 0 -3px 8px rgba(255, 255, 255, 0.14),
0 8px 20px -8px rgba(0, 22, 56, 0.36);
inset 0 -1.5px 1px rgba(255, 255, 255, 0.6),
inset 1px 0 1px rgba(255, 255, 255, 0.42),
inset -1px 0 1px rgba(255, 255, 255, 0.42),
inset 0 4px 10px rgba(255, 255, 255, 0.18),
inset 0 -4px 10px rgba(0, 18, 48, 0.18),
0 8px 20px -8px rgba(0, 18, 48, 0.35);
--fg: var(--web-ink);
--white: var(--web-ink);
--gray: var(--web-muted);
--bg: var(--web-page);
--bg-hard: rgba(255, 255, 255, 0.16);
--bg-hard: rgba(6, 24, 54, 0.26);
--accent: var(--web-accent);
--accent2: var(--web-accent-2);
--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 {
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 {
background:
radial-gradient(56rem 38rem at 86% 6%, rgba(255, 255, 255, 0.28), transparent 65%),
radial-gradient(50rem 40rem at 14% 92%, rgba(80, 255, 190, 0.18), transparent 68%),
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.12), transparent 68%),
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 ---------- */
html[data-theme="web"][data-aero="true"] .glass,
html[data-theme="web"][data-aero="true"] .web-freezmo {
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.24) 0%,
rgba(255, 255, 255, 0.06) 40%,
rgba(255, 255, 255, 0.02) 62%,
rgba(255, 255, 255, 0.18) 100%
)
padding-box,
linear-gradient(
135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.26) 28%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.22) 74%,
rgba(255, 255, 255, 0.98) 100%
)
border-box;
border: 1.5px solid transparent;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.14) 0%,
rgba(8, 28, 62, 0.18) 48%,
rgba(6, 22, 52, 0.22) 78%,
rgba(255, 255, 255, 0.1) 100%
);
border: 1px solid rgba(255, 255, 255, 0.45);
box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.72),
inset 1.5px 0 1px rgba(255, 255, 255, 0.5),
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%);
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,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.18) 28%,
rgba(255, 255, 255, 0.85) 50%,
rgba(255, 255, 255, 0.16) 74%,
rgba(255, 255, 255, 0.98) 100%
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
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(
circle at 30% 26%,
rgba(255, 255, 255, 0.96) 0%,
rgba(255, 255, 255, 0.35) 16%,
rgba(255, 255, 255, 0.06) 52%,
rgba(255, 255, 255, 0.25) 82%,
rgba(255, 255, 255, 0.82) 100%
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.32) 16%,
rgba(255, 255, 255, 0.04) 52%,
rgba(255, 255, 255, 0.22) 82%,
rgba(255, 255, 255, 0.78) 100%
);
box-shadow:
inset 0 -6px 14px rgba(255, 255, 255, 0.35),
inset 0 6px 12px rgba(255, 255, 255, 0.92),
0 0 28px rgba(255, 255, 255, 0.45);
inset 0 -6px 14px rgba(255, 255, 255, 0.32),
inset 0 6px 12px rgba(255, 255, 255, 0.9),
0 0 28px rgba(255, 255, 255, 0.4);
}
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-search,
html[data-theme="web"][data-aero="true"] .fw-tab {
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.26) 0%,
rgba(255, 255, 255, 0.07) 42%,
rgba(255, 255, 255, 0.03) 64%,
rgba(255, 255, 255, 0.2) 100%
)
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;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.16) 0%,
rgba(8, 28, 62, 0.24) 50%,
rgba(255, 255, 255, 0.1) 100%
);
border: 1px solid rgba(255, 255, 255, 0.68);
box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.7),
inset 1px 0 1px rgba(255, 255, 255, 0.48),
inset -1px 0 1px rgba(255, 255, 255, 0.48),
inset 0 4px 10px rgba(255, 255, 255, 0.24),
inset 0 -4px 10px rgba(255, 255, 255, 0.16),
0 10px 24px -10px rgba(0, 22, 56, 0.38);
-webkit-backdrop-filter: blur(12px) saturate(145%);
backdrop-filter: blur(12px) saturate(145%);
inset 0 -1.5px 1px rgba(255, 255, 255, 0.6),
inset 1px 0 1px rgba(255, 255, 255, 0.42),
inset -1px 0 1px rgba(255, 255, 255, 0.42),
inset 0 4px 10px rgba(255, 255, 255, 0.18),
inset 0 -4px 10px rgba(0, 18, 48, 0.2),
0 8px 20px -8px rgba(0, 18, 48, 0.35);
-webkit-backdrop-filter: blur(8px) saturate(135%);
backdrop-filter: blur(8px) saturate(135%);
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"] .web-freezmo-cta:hover,
html[data-theme="web"][data-aero="true"] .web-freezmo-ghost:hover {
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.36) 0%,
rgba(255, 255, 255, 0.12) 42%,
rgba(255, 255, 255, 0.06) 64%,
rgba(255, 255, 255, 0.28) 100%
)
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;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.26) 0%,
rgba(8, 28, 62, 0.26) 50%,
rgba(255, 255, 255, 0.18) 100%
);
border-color: rgba(255, 255, 255, 0.95);
box-shadow:
inset 0 2px 1.5px #ffffff,
inset 0 -2px 1.5px rgba(255, 255, 255, 0.85),
inset 0 5px 14px rgba(255, 255, 255, 0.36),
inset 0 -5px 14px rgba(255, 255, 255, 0.24),
inset 0 -2px 1.5px rgba(255, 255, 255, 0.8),
inset 0 5px 14px rgba(255, 255, 255, 0.28),
inset 0 -5px 14px rgba(0, 18, 48, 0.22),
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 {
background: linear-gradient(120deg, #ffffff, #baf2ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
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 {
filter: invert(1) brightness(1.8);
opacity: 0.92;
filter: invert(1) brightness(1.8) drop-shadow(0 1px 2px rgba(0, 16, 42, 0.75));
opacity: 0.95;
}
html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="1"],