diff --git a/TASK.md b/TASK.md index 147bd1f..f3b7214 100644 --- a/TASK.md +++ b/TASK.md @@ -4,10 +4,20 @@ ## Current Status -v2.15.0 ready. Export as PDF feature added to CopyPageDropdown. +v2.15.1 ready. Additional Core Web Vitals CLS and INP improvements. ## Completed +- [x] Additional Core Web Vitals CLS and INP improvements (v2.15.1) + - [x] Added aspect-ratio to blog images and header images to prevent layout shift + - [x] Added CSS containment to main content areas + - [x] Added fetchPriority="high" to logo and header images for faster LCP + - [x] Added will-change to continuous spin animations and marquee + +- [x] Additional Core Web Vitals fixes (v2.14.1) + - [x] Fixed docs-skeleton-pulse animation (background-position to transform: translateX()) + - [x] Added will-change to 6 more animated elements (lightbox, modals, chat, toast) + - [x] Export as PDF option in CopyPageDropdown - [x] Added browser print dialog for saving pages as PDF - [x] Clean formatted output with markdown syntax stripped diff --git a/changelog.md b/changelog.md index 39edbd9..2a89cec 100644 --- a/changelog.md +++ b/changelog.md @@ -4,6 +4,47 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). +## [2.15.2] - 2026-01-08 + +### Fixed + +- Docs section layout CSS conflict with main-content container + - Fixed `.main-content` max-width: 800px constraint preventing docs layout from being full width + - Added `.main-content:has(.docs-layout)` rule to expand to 100% width when docs layout is used + - Updated Layout.tsx to use `main-content-wide` class for docs pages + - Fixed left sidebar not flush left and right sidebar not flush right + - Fixed responsive margins for docs layout (280px desktop, 240px tablet, 0 mobile) + +### Technical + +- Updated `src/styles/global.css`: + - Added `.main-content:has(.docs-layout) { max-width: 100%; padding: 0; }` + - Fixed `.docs-content` margins: 280px left/right for fixed sidebars + - Added responsive margin adjustments at 1200px, 900px, 768px breakpoints +- Updated `src/components/Layout.tsx`: + - Added `isDocsPage` check to className logic for main element + - Docs pages now use `main-content-wide` class for full width layout + +## [2.15.1] - 2026-01-08 + +### Fixed + +- Additional Core Web Vitals improvements for CLS and INP + - Added `aspect-ratio: 16/10` to `.blog-image` to reserve space before images load + - Added `aspect-ratio: 16/9` to `.post-header-image-img` to prevent layout shift + - Added `contain: layout style` to `.main-content` and `.main-content-wide` to isolate layout recalculations + - Added `fetchPriority="high"` to logo image for faster LCP + - Added `fetchPriority="high"` to header images (`showImageAtTop`) for faster LCP + - Added `will-change: transform` to continuous spin animations (`.spinner-icon`, `.animate-spin`, `.ai-chat-spinner`, `.ai-image-spinner`, `.spinning`, `.dashboard-import-btn .spin`) + - Added `will-change: transform` to `.logo-marquee-track` for smoother marquee animation + - Added `will-change: opacity` to `.visitor-map-badge-dot` for smoother pulse animation + +### Technical + +- Updated `src/styles/global.css` with CLS prevention and animation optimization +- Updated `src/components/Layout.tsx` with fetchPriority on logo +- Updated `src/pages/Post.tsx` with fetchPriority on header images + ## [2.15.0] - 2026-01-07 ### Added @@ -23,6 +64,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Added `handleExportPDF` handler with styled print window - Imports `FilePdf` from `@phosphor-icons/react` (already installed) +## [2.14.1] - 2026-01-07 + +### Fixed + +- Additional Core Web Vitals animation fixes + - Fixed `docs-skeleton-pulse` animation (converted from `background-position` to `transform: translateX()` via pseudo-element) + - Added `will-change` hints to 6 more animated elements for GPU compositing + +### Technical + +- Updated `src/styles/global.css`: + - Converted docs-loading-skeleton from background animation to pseudo-element with translateX + - Added `will-change` to `.image-lightbox-backdrop`, `.search-modal`, `.ai-chat-message`, `.dashboard-toast`, `.ask-ai-modal`, `.docs-article` + ## [2.14.0] - 2026-01-07 ### Fixed diff --git a/content/blog/how-to-use-code-blocks.md b/content/blog/how-to-use-code-blocks.md index b011fbb..f5056cf 100644 --- a/content/blog/how-to-use-code-blocks.md +++ b/content/blog/how-to-use-code-blocks.md @@ -9,6 +9,7 @@ readTime: "4 min read" featured: false authorName: "Markdown" authorImage: "/images/authors/markdown.png" +image: /images/codeblocks.png excerpt: "Learn how to add syntax-highlighted code blocks and enhanced diff views to your posts." docsSection: true docsSectionGroup: "Publishing" diff --git a/content/pages/changelog-page.md b/content/pages/changelog-page.md index d138753..43295ab 100644 --- a/content/pages/changelog-page.md +++ b/content/pages/changelog-page.md @@ -11,6 +11,74 @@ docsSectionOrder: 4 All notable changes to this project. +## v2.15.2 + +Released January 8, 2026 + +**Docs layout CSS conflict fix** + +Fixed a CSS conflict where the `.main-content` container was constraining the docs section layout to 800px max-width, preventing the three-column layout (left sidebar, content, right sidebar) from displaying correctly. + +**Fixes:** + +- Left sidebar now properly flush left at `left: 0` +- Right sidebar now properly flush right at `right: 0` +- Docs content area properly positioned between sidebars +- Responsive margins adjusted for all breakpoints + +**Technical:** + +- Added `.main-content:has(.docs-layout)` CSS rule to expand to 100% width +- Updated Layout.tsx to use `main-content-wide` class for docs pages +- Fixed `.docs-content` margins: 280px (desktop), 240px (small tablet), 0 (mobile) +- Added responsive margin adjustments at 1200px, 900px, 768px breakpoints + +**Files changed:** + +- `src/styles/global.css` - Added docs layout override, fixed margin values +- `src/components/Layout.tsx` - Added isDocsPage check for main-content-wide + +--- + +## v2.15.1 + +Released January 8, 2026 + +**Additional Core Web Vitals CLS and INP improvements** + +Continued performance improvements targeting Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), and Interaction to Next Paint (INP). + +**CLS Fixes:** + +- Added `aspect-ratio: 16/10` to `.blog-image` to reserve space before images load +- Added `aspect-ratio: 16/9` to `.post-header-image-img` to prevent header image layout shift +- Added `contain: layout style` to `.main-content` and `.main-content-wide` to isolate layout recalculations + +**LCP Improvements:** + +- Added `fetchPriority="high"` to logo image in Layout.tsx for faster loading +- Added `fetchPriority="high"` to header images (showImageAtTop) in Post.tsx + +**INP/Animation Improvements:** + +- Added `will-change: transform` to continuous spin animations: + - `.spinner-icon` + - `.animate-spin` + - `.ai-chat-spinner` + - `.ai-image-spinner` + - `.spinning` + - `.dashboard-import-btn .spin` +- Added `will-change: transform` to `.logo-marquee-track` for smoother marquee +- Added `will-change: opacity` to `.visitor-map-badge-dot` for pulse animation + +**Files changed:** + +- `src/styles/global.css` - CLS prevention, CSS containment, animation will-change hints +- `src/components/Layout.tsx` - fetchPriority on logo +- `src/pages/Post.tsx` - fetchPriority on header images + +--- + ## v2.15.0 Released January 7, 2026 @@ -40,6 +108,34 @@ Added PDF export option to CopyPageDropdown. Users can now export any blog post --- +## v2.14.1 + +Released January 7, 2026 + +**Additional Core Web Vitals animation fixes** + +Continued performance improvements targeting non-composited animations identified by PageSpeed Insights. + +**Fixes:** + +- Fixed `docs-skeleton-pulse` animation: Converted from `background-position` (non-composited) to pseudo-element with `transform: translateX()` (GPU-composited) +- Added `will-change` hints to 6 more animated elements for GPU compositing + +**Elements with new will-change hints:** + +- `.image-lightbox-backdrop` - will-change: opacity +- `.search-modal` - will-change: transform, opacity +- `.ai-chat-message` - will-change: transform, opacity +- `.dashboard-toast` - will-change: transform, opacity +- `.ask-ai-modal` - will-change: transform, opacity +- `.docs-article` - will-change: opacity + +**Files changed:** + +- `src/styles/global.css` - Skeleton animation fix, additional will-change hints + +--- + ## v2.14.0 Released January 7, 2026 diff --git a/files.md b/files.md index d7106b6..60c14d1 100644 --- a/files.md +++ b/files.md @@ -105,7 +105,7 @@ A brief description of each file in the codebase. | File | Description | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `global.css` | Global CSS with theme variables, centralized font-size CSS variables for all themes, sidebar styling with alternate background colors, hidden scrollbar, and consistent borders using box-shadow for docs-style layout. Left sidebar (`.post-sidebar-wrapper`) and right sidebar (`.post-sidebar-right`) have separate, independent styles. Footer image styles (`.site-footer-image-wrapper`, `.site-footer-image`, `.site-footer-image-caption`) for responsive image display. Write page layout uses viewport height constraints (100vh) with overflow hidden to prevent page scroll, and AI chat uses flexbox with min-height: 0 for proper scrollable message area. Image lightbox styles (`.image-lightbox-backdrop`, `.image-lightbox-img`, `.image-lightbox-close`, `.image-lightbox-caption`) for full-screen image magnification with backdrop, close button, and caption display. SEO: `.blog-h1-demoted` class for demoted H1s (semantic H2 with H1 styling), CSS `order` properties for article/sidebar DOM order optimization. Core Web Vitals: GPU-composited visitor-pulse animations with `transform: scale()`, `will-change` hints on animated elements (theme-toggle, copy-page-menu, search-modal-backdrop, scroll-to-top) | +| `global.css` | Global CSS with theme variables, centralized font-size CSS variables for all themes, sidebar styling with alternate background colors, hidden scrollbar, and consistent borders using box-shadow for docs-style layout. Left sidebar (`.post-sidebar-wrapper`) and right sidebar (`.post-sidebar-right`) have separate, independent styles. Footer image styles (`.site-footer-image-wrapper`, `.site-footer-image`, `.site-footer-image-caption`) for responsive image display. Write page layout uses viewport height constraints (100vh) with overflow hidden to prevent page scroll, and AI chat uses flexbox with min-height: 0 for proper scrollable message area. Image lightbox styles (`.image-lightbox-backdrop`, `.image-lightbox-img`, `.image-lightbox-close`, `.image-lightbox-caption`) for full-screen image magnification with backdrop, close button, and caption display. SEO: `.blog-h1-demoted` class for demoted H1s (semantic H2 with H1 styling), CSS `order` properties for article/sidebar DOM order optimization. Core Web Vitals: GPU-composited visitor-pulse animations with `transform: scale()`, docs-skeleton-pulse using pseudo-element with `transform: translateX()`, `will-change` hints on animated elements (theme-toggle, copy-page-menu, search-modal-backdrop, scroll-to-top, image-lightbox-backdrop, search-modal, ai-chat-message, dashboard-toast, ask-ai-modal, docs-article) | ## Convex Backend (`convex/`) diff --git a/public/images/codeblocks.png b/public/images/codeblocks.png new file mode 100644 index 0000000..e5471a3 Binary files /dev/null and b/public/images/codeblocks.png differ diff --git a/public/raw/about.md b/public/raw/about.md index 5b6e7f3..fa722a7 100644 --- a/public/raw/about.md +++ b/public/raw/about.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- An open-source publishing framework built for AI agents and developers to ship websites, docs, or blogs. Write markdown, sync from the terminal. Your content is instantly available to browsers, LLMs, and AI agents. Built on Convex and Netlify. diff --git a/public/raw/changelog.md b/public/raw/changelog.md index df5609c..21a3c45 100644 --- a/public/raw/changelog.md +++ b/public/raw/changelog.md @@ -2,11 +2,79 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- All notable changes to this project. +## v2.15.2 + +Released January 8, 2026 + +**Docs layout CSS conflict fix** + +Fixed a CSS conflict where the `.main-content` container was constraining the docs section layout to 800px max-width, preventing the three-column layout (left sidebar, content, right sidebar) from displaying correctly. + +**Fixes:** + +- Left sidebar now properly flush left at `left: 0` +- Right sidebar now properly flush right at `right: 0` +- Docs content area properly positioned between sidebars +- Responsive margins adjusted for all breakpoints + +**Technical:** + +- Added `.main-content:has(.docs-layout)` CSS rule to expand to 100% width +- Updated Layout.tsx to use `main-content-wide` class for docs pages +- Fixed `.docs-content` margins: 280px (desktop), 240px (small tablet), 0 (mobile) +- Added responsive margin adjustments at 1200px, 900px, 768px breakpoints + +**Files changed:** + +- `src/styles/global.css` - Added docs layout override, fixed margin values +- `src/components/Layout.tsx` - Added isDocsPage check for main-content-wide + +--- + +## v2.15.1 + +Released January 8, 2026 + +**Additional Core Web Vitals CLS and INP improvements** + +Continued performance improvements targeting Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), and Interaction to Next Paint (INP). + +**CLS Fixes:** + +- Added `aspect-ratio: 16/10` to `.blog-image` to reserve space before images load +- Added `aspect-ratio: 16/9` to `.post-header-image-img` to prevent header image layout shift +- Added `contain: layout style` to `.main-content` and `.main-content-wide` to isolate layout recalculations + +**LCP Improvements:** + +- Added `fetchPriority="high"` to logo image in Layout.tsx for faster loading +- Added `fetchPriority="high"` to header images (showImageAtTop) in Post.tsx + +**INP/Animation Improvements:** + +- Added `will-change: transform` to continuous spin animations: + - `.spinner-icon` + - `.animate-spin` + - `.ai-chat-spinner` + - `.ai-image-spinner` + - `.spinning` + - `.dashboard-import-btn .spin` +- Added `will-change: transform` to `.logo-marquee-track` for smoother marquee +- Added `will-change: opacity` to `.visitor-map-badge-dot` for pulse animation + +**Files changed:** + +- `src/styles/global.css` - CLS prevention, CSS containment, animation will-change hints +- `src/components/Layout.tsx` - fetchPriority on logo +- `src/pages/Post.tsx` - fetchPriority on header images + +--- + ## v2.15.0 Released January 7, 2026 @@ -36,6 +104,34 @@ Added PDF export option to CopyPageDropdown. Users can now export any blog post --- +## v2.14.1 + +Released January 7, 2026 + +**Additional Core Web Vitals animation fixes** + +Continued performance improvements targeting non-composited animations identified by PageSpeed Insights. + +**Fixes:** + +- Fixed `docs-skeleton-pulse` animation: Converted from `background-position` (non-composited) to pseudo-element with `transform: translateX()` (GPU-composited) +- Added `will-change` hints to 6 more animated elements for GPU compositing + +**Elements with new will-change hints:** + +- `.image-lightbox-backdrop` - will-change: opacity +- `.search-modal` - will-change: transform, opacity +- `.ai-chat-message` - will-change: transform, opacity +- `.dashboard-toast` - will-change: transform, opacity +- `.ask-ai-modal` - will-change: transform, opacity +- `.docs-article` - will-change: opacity + +**Files changed:** + +- `src/styles/global.css` - Skeleton animation fix, additional will-change hints + +--- + ## v2.14.0 Released January 7, 2026 diff --git a/public/raw/contact.md b/public/raw/contact.md index 97e07b8..5d197e4 100644 --- a/public/raw/contact.md +++ b/public/raw/contact.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- You found the contact page. Nice diff --git a/public/raw/docs-ask-ai.md b/public/raw/docs-ask-ai.md index c5ad786..fe9a23b 100644 --- a/public/raw/docs-ask-ai.md +++ b/public/raw/docs-ask-ai.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- ## Ask AI diff --git a/public/raw/docs-configuration.md b/public/raw/docs-configuration.md index 003e476..f6bc853 100644 --- a/public/raw/docs-configuration.md +++ b/public/raw/docs-configuration.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- ## Configuration diff --git a/public/raw/docs-content.md b/public/raw/docs-content.md index 1a5b335..1a049e9 100644 --- a/public/raw/docs-content.md +++ b/public/raw/docs-content.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- ## Content diff --git a/public/raw/docs-dashboard.md b/public/raw/docs-dashboard.md index 7bb689e..7a1772b 100644 --- a/public/raw/docs-dashboard.md +++ b/public/raw/docs-dashboard.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- ## Dashboard diff --git a/public/raw/docs-deployment.md b/public/raw/docs-deployment.md index 8e2bc4e..8dbc384 100644 --- a/public/raw/docs-deployment.md +++ b/public/raw/docs-deployment.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- ## Deployment diff --git a/public/raw/docs-frontmatter.md b/public/raw/docs-frontmatter.md index 6900a7a..eb6b22b 100644 --- a/public/raw/docs-frontmatter.md +++ b/public/raw/docs-frontmatter.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- ## Frontmatter diff --git a/public/raw/docs-search.md b/public/raw/docs-search.md index f267bc3..108c212 100644 --- a/public/raw/docs-search.md +++ b/public/raw/docs-search.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- ## Keyword Search diff --git a/public/raw/docs-semantic-search.md b/public/raw/docs-semantic-search.md index 7492beb..4ac5a50 100644 --- a/public/raw/docs-semantic-search.md +++ b/public/raw/docs-semantic-search.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- ## Semantic Search diff --git a/public/raw/documentation.md b/public/raw/documentation.md index 723d5d9..3c0a37a 100644 --- a/public/raw/documentation.md +++ b/public/raw/documentation.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- ## Getting started diff --git a/public/raw/footer.md b/public/raw/footer.md index 50bd6bc..6730fa2 100644 --- a/public/raw/footer.md +++ b/public/raw/footer.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- Built with [Convex](https://convex.dev) for real-time sync and deployed on [Netlify](https://netlify.com). Read the [project on GitHub](https://github.com/waynesutton/markdown-site) to fork and deploy your own. View [real-time site stats](/stats). diff --git a/public/raw/home-intro.md b/public/raw/home-intro.md index 7c1b146..2b53ec5 100644 --- a/public/raw/home-intro.md +++ b/public/raw/home-intro.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- An open-source publishing framework built for AI agents and developers to ship **[docs](/docs)**, or **[blogs](/blog)** or **[websites](/)**. diff --git a/public/raw/newsletter.md b/public/raw/newsletter.md index 5171d97..4569084 100644 --- a/public/raw/newsletter.md +++ b/public/raw/newsletter.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- # Newsletter Demo Page diff --git a/public/raw/projects.md b/public/raw/projects.md index b8860ba..3de86ef 100644 --- a/public/raw/projects.md +++ b/public/raw/projects.md @@ -2,7 +2,7 @@ --- Type: page -Date: 2026-01-08 +Date: 2026-01-09 --- This markdown framework is open source and built to be extended. Here is what ships out of the box. diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 8daf663..aa2ec35 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -200,6 +200,7 @@ export default function Layout({ children }: LayoutProps) { width={siteConfig.innerPageLogo.size} height={siteConfig.innerPageLogo.size} style={{ height: siteConfig.innerPageLogo.size, width: "auto" }} + fetchPriority="high" /> )} @@ -315,10 +316,12 @@ export default function Layout({ children }: LayoutProps) { - {/* Use wider layout for stats and blog pages, normal layout for other pages */} + {/* Use wider layout for stats, blog, and docs pages, normal layout for other pages */}
)} @@ -491,6 +492,7 @@ export default function Post({ src={page.image} alt={page.title} className="post-header-image-img" + fetchPriority="high" /> )} @@ -659,6 +661,7 @@ export default function Post({ src={post.image} alt={post.title} className="post-header-image-img" + fetchPriority="high" /> )} @@ -736,6 +739,7 @@ export default function Post({ src={post.image} alt={post.title} className="post-header-image-img" + fetchPriority="high" /> )} diff --git a/src/styles/global.css b/src/styles/global.css index 74c1834..5f6685f 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -323,6 +323,8 @@ body { width: 100%; margin: 0 auto; /* Note: padding-top for nav is handled by .layout */ + /* CLS/INP fix: isolate layout recalculations to this container */ + contain: layout style; } /* Expand main-content to full width when sidebar layout is used */ @@ -331,6 +333,12 @@ body { padding: 0 0px; } +/* Expand main-content to full width when docs layout is used */ +.main-content:has(.docs-layout) { + max-width: 100%; + padding: 0; +} + /* Wide content layout for pages that need more space (stats, etc.) */ .main-content-wide { flex: 1; @@ -338,6 +346,8 @@ body { width: 100%; margin: 0 auto; padding: 0; + /* CLS/INP fix: isolate layout recalculations to this container */ + contain: layout style; } /* Top navigation bar */ @@ -836,6 +846,7 @@ body { .spinner-icon { animation: spin 1s linear infinite; color: var(--text-secondary); + will-change: transform; } @keyframes dropdownFadeIn { @@ -967,6 +978,9 @@ body { height: auto; display: block; object-fit: cover; + /* CLS fix: reserve space for header images */ + aspect-ratio: 16 / 9; + background: var(--bg-secondary); } /* Title row container - flex layout for title and CopyPageDropdown */ @@ -1886,6 +1900,10 @@ body { height: auto; border-radius: 8px; display: block; + /* CLS fix: reserve space before image loads (default landscape ratio) */ + aspect-ratio: 16 / 10; + object-fit: contain; + background: var(--bg-secondary); } .blog-image-clickable { @@ -1933,6 +1951,7 @@ body { justify-content: center; padding: 20px; animation: lightboxFadeIn 0.2s ease; + will-change: opacity; } @keyframes lightboxFadeIn { @@ -3523,6 +3542,7 @@ body { display: flex; flex-direction: column; animation: modalSlideIn 0.2s ease; + will-change: transform, opacity; } @keyframes modalSlideIn { @@ -3845,8 +3865,12 @@ body { } @keyframes search-highlight-pulse { - 0% { background-color: var(--accent); } - 100% { background-color: var(--search-highlight-active); } + 0% { + background-color: var(--accent); + } + 100% { + background-color: var(--search-highlight-active); + } } /* Theme-specific search highlight colors */ @@ -3862,7 +3886,7 @@ body { :root[data-theme="tan"] { --search-highlight-bg: rgba(139, 115, 85, 0.15); - --search-highlight-active: rgba(139, 115, 85, 0.30); + --search-highlight-active: rgba(139, 115, 85, 0.3); } :root[data-theme="cloud"] { @@ -4524,6 +4548,7 @@ body { background: var(--visitor-map-dot); border-radius: 50%; animation: badge-pulse 2s ease-in-out infinite; + will-change: opacity; } @keyframes badge-pulse { @@ -4610,6 +4635,7 @@ body { display: flex; animation: marquee-scroll var(--marquee-speed, 30s) linear infinite; width: max-content; + will-change: transform; } @keyframes marquee-scroll { @@ -6347,6 +6373,7 @@ body { gap: 8px; max-width: 85%; animation: aiChatFadeIn 0.2s ease; + will-change: transform, opacity; } @keyframes aiChatFadeIn { @@ -6511,6 +6538,7 @@ body { .ai-chat-spinner { animation: aiChatSpin 1s linear infinite; + will-change: transform; } @keyframes aiChatSpin { @@ -9266,6 +9294,7 @@ body { .animate-spin { animation: spin 1s linear infinite; + will-change: transform; } .dashboard-editor-container { @@ -10154,6 +10183,7 @@ body { .ai-image-spinner { animation: spin 1s linear infinite; + will-change: transform; } /* AI Image Input Container */ @@ -10297,6 +10327,7 @@ body { .dashboard-import-btn .spin { animation: spin 1s linear infinite; + will-change: transform; } .dashboard-import-result { @@ -10699,6 +10730,7 @@ body { .spinning { animation: spin 1s linear infinite; + will-change: transform; } /* Sync Terminal Output */ @@ -11289,7 +11321,8 @@ body { flex-shrink: 0; } -.dashboard-write-section.focus-mode.frontmatter-collapsed .dashboard-write-sidebar { +.dashboard-write-section.focus-mode.frontmatter-collapsed + .dashboard-write-sidebar { width: 56px; } @@ -11382,6 +11415,7 @@ body { border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); animation: toastSlideIn 0.3s ease; + will-change: transform, opacity; } @keyframes toastSlideIn { @@ -12917,7 +12951,7 @@ body { /* Left sidebar for docs navigation - flush left */ .docs-sidebar-left { position: fixed; - top: 80px; + top: 20px; left: 0; width: 280px; height: calc(100vh - 80px); @@ -12950,7 +12984,7 @@ body { /* Right sidebar for table of contents - flush right */ .docs-sidebar-right { position: fixed; - top: 80px; + top: 20px; right: 0; width: 280px; height: calc(100vh - 80px); @@ -13057,8 +13091,8 @@ body { /* Main content area - uses margins for fixed sidebars */ .docs-content { - margin-left: auto; - margin-right: auto; + margin-left: 280px; + margin-right: 280px; padding: 32px 48px; overflow-y: auto; min-height: calc(100vh - 80px); @@ -13071,7 +13105,7 @@ body { margin-right: auto; } -/* No TOC layout - content takes more space */ +/* No TOC layout - content takes more space (no right sidebar) */ .docs-layout.no-toc .docs-content { margin-right: 0; } @@ -13294,6 +13328,7 @@ body { max-width: 800px; margin: 0 auto; animation: docs-content-fade-in 150ms ease-out; + will-change: opacity; } @keyframes docs-content-fade-in { @@ -13311,15 +13346,28 @@ body { } .docs-loading-skeleton { + background: var(--bg-secondary); + border-radius: 4px; + position: relative; + overflow: hidden; +} + +.docs-loading-skeleton::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; background: linear-gradient( 90deg, - var(--bg-secondary) 25%, + transparent 0%, var(--bg-hover) 50%, - var(--bg-secondary) 75% + transparent 100% ); - background-size: 200% 100%; + transform: translateX(-100%); animation: docs-skeleton-pulse 1.5s ease-in-out infinite; - border-radius: 4px; + will-change: transform; } .docs-loading-title { @@ -13342,10 +13390,10 @@ body { @keyframes docs-skeleton-pulse { 0% { - background-position: 200% 0; + transform: translateX(-100%); } 100% { - background-position: -200% 0; + transform: translateX(100%); } } @@ -13441,6 +13489,10 @@ body { .docs-sidebar-right { display: none; } + + .docs-content { + margin-right: 0; + } } /* Docs responsive - small tablet */ @@ -13450,6 +13502,7 @@ body { } .docs-content { + margin-left: 240px; padding: 24px 32px; } } @@ -13522,7 +13575,9 @@ body { display: flex; align-items: center; justify-content: center; - transition: color 0.2s ease, background-color 0.2s ease; + transition: + color 0.2s ease, + background-color 0.2s ease; } .ask-ai-button:hover { @@ -13555,6 +13610,7 @@ body { flex-direction: column; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); animation: modalSlideIn 0.2s ease; + will-change: transform, opacity; } /* Modal Header */ @@ -13610,7 +13666,9 @@ body { display: flex; align-items: center; justify-content: center; - transition: color 0.2s ease, background-color 0.2s ease; + transition: + color 0.2s ease, + background-color 0.2s ease; } .ask-ai-action-btn:hover:not(:disabled) {