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 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.19` (see `package.json`). - Version: `2.2.20` (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.19` (see `package.json`) - **Version:** `2.2.20` (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": 1792099979.9219553, "mtime": 1792100351.2297838,
"seen": 1792099995.8841898, "seen": 1792100379.3572893,
"ast_hash": "8172234618a09e371ddd0ffde8aae133", "ast_hash": "b6d9db3bc88cf741e18ae6bb444680c5",
"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": 1792099982.8900013, "mtime": 1792100354.0578282,
"seen": 1792099995.884235, "seen": 1792100379.3573277,
"ast_hash": "3bfb36b857aa77ff2f4d6273032b2807", "ast_hash": "ff608f378e130581fd55f76c25a4acbf",
"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": 1792099983.2880075, "mtime": 1792100354.619837,
"seen": 1792099995.8842998, "seen": 1792100379.3573804,
"ast_hash": "a803a6b174839fa961a949e6126934e7", "ast_hash": "f4315ab30a159fdebb81ec7f56ccaa23",
"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": 1792099983.9940186, "mtime": 1792100355.2478468,
"seen": 1792099995.8842938, "seen": 1792100379.3573759,
"ast_hash": "e2d160704c7a65c785806cd9872d9113", "ast_hash": "48b0f3195cfda4678fd15ea5a3c86883",
"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.19", "version": "2.2.20",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "dvorakmortonxd", "name": "dvorakmortonxd",
"version": "2.2.19", "version": "2.2.20",
"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.19", "version": "2.2.20",
"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.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 © 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>

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-ink: #ffffff;
--web-muted: rgba(242, 250, 255, 0.94); --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-lo: rgba(8, 28, 62, 0.2);
--glass-border: rgba(255, 255, 255, 0.58); --glass-border: rgba(110, 210, 255, 0.24);
--glass-inset: rgba(255, 255, 255, 0.92); --glass-inset: rgba(160, 235, 255, 0.28);
--pill-bg: rgba(8, 28, 62, 0.32); --pill-bg: rgba(8, 28, 62, 0.32);
--glass-shadow: --glass-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.92), inset 0 1px 1px rgba(170, 235, 255, 0.32),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.58), inset 0 -1px 2px rgba(0, 140, 220, 0.22),
inset 1.5px 0 1px rgba(255, 255, 255, 0.45), inset 0 6px 18px rgba(120, 220, 255, 0.1),
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), inset 0 -6px 16px rgba(0, 18, 48, 0.22),
0 14px 36px -10px rgba(0, 18, 48, 0.45), 0 14px 36px -10px rgba(0, 18, 48, 0.45),
0 2px 8px rgba(0, 14, 40, 0.25); 0 2px 8px rgba(0, 14, 40, 0.25);
--hover: rgba(255, 255, 255, 0.18); --hover: rgba(120, 220, 255, 0.18);
--accent-soft: rgba(255, 255, 255, 0.45); --accent-soft: rgba(100, 220, 255, 0.35);
--accent-line: rgba(255, 255, 255, 0.92); --accent-line: rgba(120, 225, 255, 0.48);
--btn-bg: rgba(8, 28, 62, 0.22); --btn-bg: rgba(8, 28, 62, 0.22);
--btn-bg-hi: rgba(255, 255, 255, 0.22); --btn-bg-hi: rgba(100, 210, 255, 0.22);
--btn-border: rgba(255, 255, 255, 0.68); --btn-border: rgba(110, 210, 255, 0.26);
--btn-shadow: --btn-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95), inset 0 1px 1px rgba(170, 235, 255, 0.32),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 140, 220, 0.2),
inset 1px 0 1px rgba(255, 255, 255, 0.42), inset 0 4px 10px rgba(120, 220, 255, 0.1),
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), inset 0 -4px 10px rgba(0, 18, 48, 0.18),
0 8px 20px -8px rgba(0, 18, 48, 0.35); 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; --red: #fda4af;
--darkpink: #f9a8d4; --darkpink: #f9a8d4;
--index-line: rgba(255, 255, 255, 0.28); --index-line: rgba(120, 215, 255, 0.2);
--status-finished: #86efac; --status-finished: #86efac;
--status-live: #93c5fd; --status-live: #93c5fd;
--status-wip: #fde047; --status-wip: #fde047;
@ -2118,18 +2114,16 @@ 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: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(255, 255, 255, 0.14) 0%, rgba(140, 225, 255, 0.12) 0%,
rgba(8, 28, 62, 0.18) 48%, rgba(8, 28, 62, 0.18) 48%,
rgba(6, 22, 52, 0.22) 78%, 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: box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(170, 235, 255, 0.32),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(0, 140, 220, 0.22),
inset 1.5px 0 1px rgba(255, 255, 255, 0.42), inset 0 6px 18px rgba(120, 220, 255, 0.1),
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), inset 0 -6px 16px rgba(0, 18, 48, 0.22),
0 14px 36px -10px rgba(0, 18, 48, 0.45), 0 14px 36px -10px rgba(0, 18, 48, 0.45),
0 2px 8px rgba(0, 14, 40, 0.25); 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%); 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). */ interior 100% see-through). */
html[data-theme="web"][data-aero="true"] .glass::after { html[data-theme="web"][data-aero="true"] .glass::after {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: inherit; border-radius: inherit;
padding: 1.5px; padding: 1px;
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(255, 255, 255, 0.98) 0%, rgba(150, 230, 255, 0.42) 0%,
rgba(255, 255, 255, 0.18) 28%, rgba(60, 175, 245, 0.1) 30%,
rgba(255, 255, 255, 0.85) 50%, rgba(130, 225, 255, 0.34) 50%,
rgba(255, 255, 255, 0.16) 74%, rgba(40, 160, 235, 0.08) 74%,
rgba(255, 255, 255, 0.98) 100% rgba(140, 230, 255, 0.38) 100%
); );
-webkit-mask: -webkit-mask:
linear-gradient(#000 0 0) content-box, 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 { 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( background: radial-gradient(
circle at 30% 26%, circle at 30% 26%,
rgba(255, 255, 255, 0.95) 0%, rgba(200, 245, 255, 0.65) 0%,
rgba(255, 255, 255, 0.32) 16%, rgba(120, 220, 255, 0.24) 18%,
rgba(255, 255, 255, 0.04) 52%, rgba(0, 175, 255, 0.05) 52%,
rgba(255, 255, 255, 0.22) 82%, rgba(0, 185, 255, 0.22) 82%,
rgba(255, 255, 255, 0.78) 100% rgba(130, 235, 255, 0.48) 100%
); );
box-shadow: box-shadow:
inset 0 -6px 14px rgba(255, 255, 255, 0.32), inset 0 -6px 14px rgba(0, 170, 255, 0.28),
inset 0 6px 12px rgba(255, 255, 255, 0.9), inset 0 4px 10px rgba(170, 240, 255, 0.45),
0 0 28px rgba(255, 255, 255, 0.4); 0 0 28px rgba(80, 210, 255, 0.32);
} }
html[data-theme="web"][data-aero="true"] .web-ctl, 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 { html[data-theme="web"][data-aero="true"] .fw-tab {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(255, 255, 255, 0.16) 0%, rgba(130, 220, 255, 0.14) 0%,
rgba(8, 28, 62, 0.24) 50%, 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: box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95), inset 0 1px 1px rgba(170, 235, 255, 0.32),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 140, 220, 0.2),
inset 1px 0 1px rgba(255, 255, 255, 0.42), inset 0 4px 10px rgba(120, 220, 255, 0.1),
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), inset 0 -4px 10px rgba(0, 18, 48, 0.2),
0 8px 20px -8px rgba(0, 18, 48, 0.35); 0 8px 20px -8px rgba(0, 18, 48, 0.35);
-webkit-backdrop-filter: blur(8px) saturate(135%); -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 { html[data-theme="web"][data-aero="true"] .web-freezmo-ghost:hover {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(255, 255, 255, 0.26) 0%, rgba(140, 225, 255, 0.24) 0%,
rgba(8, 28, 62, 0.26) 50%, 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: box-shadow:
inset 0 2px 1.5px #ffffff, inset 0 1px 1px rgba(190, 242, 255, 0.48),
inset 0 -2px 1.5px rgba(255, 255, 255, 0.8), inset 0 -1px 2px rgba(0, 160, 240, 0.3),
inset 0 5px 14px rgba(255, 255, 255, 0.28), inset 0 5px 14px rgba(120, 225, 255, 0.18),
inset 0 -5px 14px rgba(0, 18, 48, 0.22), 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.3); 0 0 14px rgba(80, 210, 255, 0.28);
} }
html[data-theme="web"][data-aero="true"] .web-freezmo-name { html[data-theme="web"][data-aero="true"] .web-freezmo-name {