diff options
Diffstat (limited to 'frontend-vanilla/public/themes')
| -rw-r--r-- | frontend-vanilla/public/themes/codex.css | 11 | ||||
| -rw-r--r-- | frontend-vanilla/public/themes/sakura.css | 3 | ||||
| -rw-r--r-- | frontend-vanilla/public/themes/terminal.css | 42 |
3 files changed, 34 insertions, 22 deletions
diff --git a/frontend-vanilla/public/themes/codex.css b/frontend-vanilla/public/themes/codex.css index ece9e2d..50942e6 100644 --- a/frontend-vanilla/public/themes/codex.css +++ b/frontend-vanilla/public/themes/codex.css @@ -49,8 +49,11 @@ body { background-color: var(--bg-color); color: var(--text-color); -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - font-feature-settings: 'liga' 1, 'kern' 1, 'onum' 1; + /* text-rendering: optimizeLegibility triggers expensive kerning/ligature + computation on all text. On mobile with long feed content this causes + significant layout slowdowns during scroll. The default 'auto' lets + the browser optimize per-element. font-feature-settings similarly + forces the shaper to run on every glyph. Removed for performance. */ } /* ---- Sidebar: Table of Contents ---- */ @@ -236,8 +239,8 @@ body { font-size: 1rem; line-height: 1.75; color: var(--text-color); - hyphens: auto; - -webkit-hyphens: auto; + /* hyphens: auto removed -- requires dictionary lookups during layout for + every line break, expensive with long feed content during scroll. */ } .item-description a { diff --git a/frontend-vanilla/public/themes/sakura.css b/frontend-vanilla/public/themes/sakura.css index f0fc990..48a1c0a 100644 --- a/frontend-vanilla/public/themes/sakura.css +++ b/frontend-vanilla/public/themes/sakura.css @@ -57,7 +57,8 @@ body { background-color: var(--bg-color); color: var(--text-color); -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; + /* text-rendering: optimizeLegibility removed -- causes expensive text + shaping on all content, leading to scroll jank on mobile. */ } /* ---- Sidebar ---- */ diff --git a/frontend-vanilla/public/themes/terminal.css b/frontend-vanilla/public/themes/terminal.css index dd9c1b2..48164c9 100644 --- a/frontend-vanilla/public/themes/terminal.css +++ b/frontend-vanilla/public/themes/terminal.css @@ -52,23 +52,31 @@ body { -webkit-font-smoothing: antialiased; } -/* Subtle scanline overlay -- only in dark mode */ -.theme-dark body::after { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 9999; - background: repeating-linear-gradient( - to bottom, - transparent, - transparent 2px, - rgba(0, 0, 0, 0.03) 2px, - rgba(0, 0, 0, 0.03) 4px - ); +/* Subtle scanline overlay -- only in dark mode, desktop only. + The fixed full-viewport pseudo-element with a repeating gradient + forces GPU compositing on every scroll frame. On mobile this causes + severe jank and memory pressure, so we limit it to large screens + and promote it to its own layer with will-change to avoid repainting + the content beneath it. */ +@media (min-width: 1025px) { + .theme-dark body::after { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 9999; + background: repeating-linear-gradient( + to bottom, + transparent, + transparent 2px, + rgba(0, 0, 0, 0.03) 2px, + rgba(0, 0, 0, 0.03) 4px + ); + will-change: transform; + } } /* ---- Sidebar ---- */ |
