From 52f2e1d88f757e1b43a2e4d20ba40a487fd8e236 Mon Sep 17 00:00:00 2001 From: John Enderson Date: Sat, 29 Aug 2026 13:01:20 -0300 Subject: [PATCH 1/3] fix(ui): troca text-rendering pra optimizeLegibility no body geometricPrecision deixa o texto com aparencia borrada em navegadores Chromium, mais perceptivel em texto pequeno/baixo contraste (ex: descricoes dos cards em text-site-body-muted). optimizeLegibility mantem o kerning bom sem esse efeito. Co-Authored-By: Claude Sonnet 5 --- styles/globals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/globals.css b/styles/globals.css index 6756517..c0c86d6 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -555,7 +555,7 @@ body { line-height: 1.725; width: 100%; margin: 0; - text-rendering: geometricPrecision; + text-rendering: optimizeLegibility; min-height: 100%; height: 100%; display: flex; From f1178f8f66e54ec676529f08fb8b751e0e8750ee Mon Sep 17 00:00:00 2001 From: John Enderson Date: Sat, 29 Aug 2026 13:12:26 -0300 Subject: [PATCH 2/3] fix(css): remove regras html.light redundantes e a.link morto - Blocos html.light que so redeclaravam a mesma custom property que ja muda de valor sozinha via :root/html.light (navbar, prefs-panel, body, article h2/h3/blockquote, hovers de link de heading, code block do artigo) - zero diferenca de renderizacao, confirmado via toggle de tema real no preview - a.link: classe morta (sem nenhum uso em src/app/content), cor hardcoded em white que quebraria o tema claro se algum dia fosse usada Co-Authored-By: Claude Sonnet 5 --- styles/globals.css | 97 +--------------------------------------------- 1 file changed, 2 insertions(+), 95 deletions(-) diff --git a/styles/globals.css b/styles/globals.css index c0c86d6..3828b8c 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -590,11 +590,6 @@ body > * { z-index: 1; } -html.light body { - background: var(--site-background); - color: var(--site-foreground); -} - /* Preferences dropdown panel */ .prefs-panel { background: var(--site-popover); @@ -602,10 +597,6 @@ html.light body { -webkit-backdrop-filter: blur(24px) saturate(180%); } -html.light .prefs-panel { - background: var(--site-popover); -} - /* Navbar — mobile keeps a blurred surface; desktop is transparent until scrolled. */ .navbar { background: var(--site-navbar); @@ -614,20 +605,11 @@ html.light .prefs-panel { border-bottom: 1px solid transparent; } -html.light .navbar { - background: var(--site-navbar); -} - .navbar.scrolled { background: var(--site-navbar-scrolled); border-bottom-color: var(--site-border-subtle); } -html.light .navbar.scrolled { - background: var(--site-navbar-scrolled); - border-bottom-color: var(--site-border-subtle); -} - @media (min-width: 768px) { .navbar { background: var(--site-navbar-desktop); @@ -642,11 +624,6 @@ html.light .navbar.scrolled { -webkit-backdrop-filter: blur(64px) saturate(220%); border-bottom-color: var(--site-border-subtle); } - - html.light .navbar.scrolled { - background: var(--site-navbar-scrolled); - border-bottom-color: var(--site-border-subtle); - } } /* Dark theme. */ @@ -709,10 +686,6 @@ article h2::before { ); } -html.light article h2 { - color: var(--site-foreground); -} - article h3 { position: relative; margin-top: 2rem; @@ -731,10 +704,6 @@ article h3::before { content: none; } -html.light article h3 { - color: var(--site-foreground); -} - article h4 { margin-top: 1.9rem; margin-bottom: 0.55rem; @@ -897,18 +866,10 @@ article blockquote p { color: var(--site-body); } -html.light article blockquote { - color: var(--site-body); -} - article blockquote::before { content: none; } -html.light article blockquote::before { - content: none; -} - .mdx-admonition { --admonition-accent: var(--site-primary); --admonition-bg: color-mix( @@ -1065,15 +1026,6 @@ html.light .mdx-admonition-content li { text-decoration-color: var(--site-primary); } - html.light a, - html.light article a { - color: var(--site-foreground); - text-decoration-color: var(--site-border); - text-decoration-thickness: 1px; - text-decoration-skip-ink: none; - text-underline-offset: 4px; - } - html.light a:hover { color: var(--site-primary-hover); text-decoration-color: var(--site-primary-hover); @@ -1086,14 +1038,12 @@ html.light .mdx-admonition-content li { * the same level. */ a.cta-solid, -a.cta-solid:hover, -html.light a.cta-solid:hover { +a.cta-solid:hover { color: var(--site-primary-foreground); text-decoration: none; } -a.cta-ghost:hover, -html.light a.cta-ghost:hover { +a.cta-ghost:hover { color: var(--site-primary); text-decoration: none; } @@ -1221,35 +1171,11 @@ a.icon:hover { ); } -html.light h1 a:hover, -html.light h2 a:hover, -html.light h3 a:hover, -html.light h4 a:hover, -html.light h5 a:hover, -html.light h6 a:hover, -html.light p a.icon:hover, -html.light a.icon:hover { - background-repeat: repeat-x; - background-position: bottom; - background-size: 100% 6px; - background-image: linear-gradient( - transparent, - transparent 6px, - var(--site-foreground) 6px, - var(--site-foreground) - ); -} - p a.icon:hover, a.icon:hover { color: var(--site-foreground); } -html.light p a.icon:hover, -html.light a.icon:hover { - color: var(--site-foreground); -} - p.no-margin { margin: 0; } @@ -1311,11 +1237,6 @@ p.no-margin-top { padding-top: 4.35rem; } -html.light .content pre { - background: var(--code-surface) !important; - border-color: var(--code-border); -} - .content pre, .content code { -moz-hyphens: manual; @@ -1475,20 +1396,6 @@ html.light .content pre code { color: var(--site-primary); } -a.link { - text-decoration: none; - color: white; - background-repeat: repeat-x; - background-position: bottom; - background-size: 100% 6px; - background-image: linear-gradient( - transparent, - transparent 5px, - white 5px, - white - ); -} - table { border-spacing: 0; border-collapse: collapse; From 89c00a03edf3d74e36bb2847253552ee5df91588 Mon Sep 17 00:00:00 2001 From: John Enderson Date: Sat, 29 Aug 2026 20:34:36 -0300 Subject: [PATCH 3/3] fix(css): aplica will-change so no hover/focus, nao no estado base .interactive-card, .interactive-row e .about-tag mantinham will-change: transform o tempo todo, mesmo sem interacao - forcando uma camada de composicao permanente em cada elemento com essas classes. Como sao usadas em listas longas (jogos, artistas, repos, tags), isso desperdicava GPU/memoria a toa. Move a declaracao pra dentro do :hover/:focus-within, que e quando a transform de fato acontece. Deixei de fora os !important em .content pre/pre code - confirmei que sao necessarios pra sobrepor os estilos inline que o Shiki injeta no HTML do syntax highlighting. Co-Authored-By: Claude Sonnet 5 --- .claude/launch.json | 3 ++- styles/globals.css | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.claude/launch.json b/.claude/launch.json index e15a68e..5907e8d 100644 --- a/.claude/launch.json +++ b/.claude/launch.json @@ -14,7 +14,8 @@ "-c", "PATH=/home/john/.nvm/versions/node/v22.15.0/bin:/usr/local/bin:/usr/bin:/bin yarn dev" ], - "port": 3000 + "port": 3000, + "autoPort": true }, { "name": "prod", diff --git a/styles/globals.css b/styles/globals.css index 3828b8c..9beac7d 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -263,7 +263,6 @@ html.light { box-shadow: 0 0 0 transparent; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 380ms var(--ease-elastic); - will-change: transform; } .interactive-card:hover, @@ -272,6 +271,7 @@ html.light { border-color: var(--site-border); box-shadow: var(--site-card-shadow); transform: translateY(-4px); + will-change: transform; } .interactive-card:focus-within { @@ -445,7 +445,6 @@ html.light [data-preference-tone='negative'] { color-mix(in srgb, var(--site-foreground) 7%, transparent); transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 280ms var(--ease-elastic); - will-change: transform; } .about-tag:hover { @@ -461,6 +460,7 @@ html.light [data-preference-tone='negative'] { ); color: var(--site-foreground); transform: translateY(-2px); + will-change: transform; } .about-tag[data-variant='neutral'] { @@ -503,13 +503,13 @@ html.light [data-preference-tone='negative'] { .interactive-row { transition: background-color 180ms ease, color 180ms ease, transform 320ms var(--ease-elastic); - will-change: transform; } .interactive-row:hover, .interactive-row:focus-within { background: var(--site-card-hover); transform: translateX(3px); + will-change: transform; } @media (prefers-reduced-motion: reduce) {