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

style(web): replace white Frutiger Aero UI borders with subtle cyan refractive rims (v2.2.20)

Browse source
This commit is contained in:
Martin Dvořák 2026-10-15 23:39:54 +02:00
commit 15ef4db75f
7 changed files with 68 additions and 76 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.19` (see `package.json`).
- Version: `2.2.20` (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.19` (see `package.json`)
- **Version:** `2.2.20` (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": 1792099979.9219553,
"seen": 1792099995.8841898,
"ast_hash": "8172234618a09e371ddd0ffde8aae133",
"mtime": 1792100351.2297838,
"seen": 1792100379.3572893,
"ast_hash": "b6d9db3bc88cf741e18ae6bb444680c5",
"semantic_hash": ""
},
"postcss.config.mjs": {
@ -114,9 +114,9 @@
"semantic_hash": "20e25c727b4bb982e5a22d65efece143"
},
"src/app/components/WebLayout.tsx": {
"mtime": 1792099982.8900013,
"seen": 1792099995.884235,
"ast_hash": "3bfb36b857aa77ff2f4d6273032b2807",
"mtime": 1792100354.0578282,
"seen": 1792100379.3573277,
"ast_hash": "ff608f378e130581fd55f76c25a4acbf",
"semantic_hash": ""
},
"src/app/components/WinWindow.tsx": {
@ -240,9 +240,9 @@
"semantic_hash": "b81dea2175efa2b0b6c38451ab5a4bbd"
},
"README.md": {
"mtime": 1792099983.2880075,
"seen": 1792099995.8842998,
"ast_hash": "a803a6b174839fa961a949e6126934e7",
"mtime": 1792100354.619837,
"seen": 1792100379.3573804,
"ast_hash": "f4315ab30a159fdebb81ec7f56ccaa23",
"semantic_hash": ""
},
"public/llms.txt": {
@ -366,9 +366,9 @@
"semantic_hash": "6f69e16823f10d9c7af1625eff2b32e8"
},
"AGENTS.md": {
"mtime": 1792099983.9940186,
"seen": 1792099995.8842938,
"ast_hash": "e2d160704c7a65c785806cd9872d9113",
"mtime": 1792100355.2478468,
"seen": 1792100379.3573759,
"ast_hash": "48b0f3195cfda4678fd15ea5a3c86883",
"semantic_hash": ""
},
"public/freezmo_aero.png": {

4
package-lock.json generated
View file

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

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "dvorakmortonxd",
"version": "2.2.19",
"version": "2.2.20",
"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.19</span>
<span className="web-footer-label">v2.2.20</span>
© 2025-2026 Martin Dvořák. All rights reserved (not really I dont care, just
follow the GPL3.0 License)
</footer>

108
src/app/web.css
View file

@ -1960,33 +1960,29 @@ html[data-theme="web"][data-scheme="dark"][data-aero="true"] {
--web-ink: #ffffff;
--web-muted: rgba(242, 250, 255, 0.94);
--glass-hi: rgba(255, 255, 255, 0.14);
--glass-hi: rgba(140, 225, 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);
--glass-border: rgba(110, 210, 255, 0.24);
--glass-inset: rgba(160, 235, 255, 0.28);
--pill-bg: rgba(8, 28, 62, 0.32);
--glass-shadow:
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 1px 1px rgba(170, 235, 255, 0.32),
inset 0 -1px 2px rgba(0, 140, 220, 0.22),
inset 0 6px 18px rgba(120, 220, 255, 0.1),
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.92);
--hover: rgba(120, 220, 255, 0.18);
--accent-soft: rgba(100, 220, 255, 0.35);
--accent-line: rgba(120, 225, 255, 0.48);
--btn-bg: rgba(8, 28, 62, 0.22);
--btn-bg-hi: rgba(255, 255, 255, 0.22);
--btn-border: rgba(255, 255, 255, 0.68);
--btn-bg-hi: rgba(100, 210, 255, 0.22);
--btn-border: rgba(110, 210, 255, 0.26);
--btn-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
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 1px 1px rgba(170, 235, 255, 0.32),
inset 0 -1px 2px rgba(0, 140, 220, 0.2),
inset 0 4px 10px rgba(120, 220, 255, 0.1),
inset 0 -4px 10px rgba(0, 18, 48, 0.18),
0 8px 20px -8px rgba(0, 18, 48, 0.35);
@ -2005,7 +2001,7 @@ html[data-theme="web"][data-scheme="dark"][data-aero="true"] {
--red: #fda4af;
--darkpink: #f9a8d4;
--index-line: rgba(255, 255, 255, 0.28);
--index-line: rgba(120, 215, 255, 0.2);
--status-finished: #86efac;
--status-live: #93c5fd;
--status-wip: #fde047;
@ -2118,18 +2114,16 @@ 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.14) 0%,
rgba(140, 225, 255, 0.12) 0%,
rgba(8, 28, 62, 0.18) 48%,
rgba(6, 22, 52, 0.22) 78%,
rgba(255, 255, 255, 0.1) 100%
rgba(100, 210, 255, 0.1) 100%
);
border: 1px solid rgba(255, 255, 255, 0.45);
border: 1px solid rgba(110, 210, 255, 0.24);
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 1px 1px rgba(170, 235, 255, 0.32),
inset 0 -1px 2px rgba(0, 140, 220, 0.22),
inset 0 6px 18px rgba(120, 220, 255, 0.1),
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);
@ -2137,21 +2131,21 @@ html[data-theme="web"][data-aero="true"] .web-freezmo {
backdrop-filter: blur(8px) saturate(135%);
}
/* Hollow specular gradient rim (paints ONLY the 1.5px border ring, leaving the
/* Hollow refractive cyan/aqua rim (paints ONLY the 1px 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;
padding: 1px;
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%
rgba(150, 230, 255, 0.42) 0%,
rgba(60, 175, 245, 0.1) 30%,
rgba(130, 225, 255, 0.34) 50%,
rgba(40, 160, 235, 0.08) 74%,
rgba(140, 230, 255, 0.38) 100%
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
@ -2162,19 +2156,19 @@ html[data-theme="web"][data-aero="true"] .glass::after {
}
html[data-theme="web"][data-aero="true"] .web-freezmo-orb {
border: 1.2px solid rgba(255, 255, 255, 0.88);
border: 1px solid rgba(130, 225, 255, 0.38);
background: radial-gradient(
circle at 30% 26%,
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%
rgba(200, 245, 255, 0.65) 0%,
rgba(120, 220, 255, 0.24) 18%,
rgba(0, 175, 255, 0.05) 52%,
rgba(0, 185, 255, 0.22) 82%,
rgba(130, 235, 255, 0.48) 100%
);
box-shadow:
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);
inset 0 -6px 14px rgba(0, 170, 255, 0.28),
inset 0 4px 10px rgba(170, 240, 255, 0.45),
0 0 28px rgba(80, 210, 255, 0.32);
}
html[data-theme="web"][data-aero="true"] .web-ctl,
@ -2195,17 +2189,15 @@ 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.16) 0%,
rgba(130, 220, 255, 0.14) 0%,
rgba(8, 28, 62, 0.24) 50%,
rgba(255, 255, 255, 0.1) 100%
rgba(90, 205, 255, 0.1) 100%
);
border: 1px solid rgba(255, 255, 255, 0.68);
border: 1px solid rgba(110, 210, 255, 0.26);
box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
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 1px 1px rgba(170, 235, 255, 0.32),
inset 0 -1px 2px rgba(0, 140, 220, 0.2),
inset 0 4px 10px rgba(120, 220, 255, 0.1),
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%);
@ -2221,18 +2213,18 @@ 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.26) 0%,
rgba(140, 225, 255, 0.24) 0%,
rgba(8, 28, 62, 0.26) 50%,
rgba(255, 255, 255, 0.18) 100%
rgba(100, 215, 255, 0.18) 100%
);
border-color: rgba(255, 255, 255, 0.95);
border-color: rgba(130, 225, 255, 0.48);
box-shadow:
inset 0 2px 1.5px #ffffff,
inset 0 -2px 1.5px rgba(255, 255, 255, 0.8),
inset 0 5px 14px rgba(255, 255, 255, 0.28),
inset 0 1px 1px rgba(190, 242, 255, 0.48),
inset 0 -1px 2px rgba(0, 160, 240, 0.3),
inset 0 5px 14px rgba(120, 225, 255, 0.18),
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.3);
0 0 14px rgba(80, 210, 255, 0.28);
}
html[data-theme="web"][data-aero="true"] .web-freezmo-name {