mirror of
https://github.com/waynesutton/markdown-site.git
synced 2026-01-11 20:08:57 +00:00
fix: Docs layout CSS conflict fix
This commit is contained in:
Wayne Sutton
12
TASK.md
12
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
|
||||
|
||||
55
changelog.md
55
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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
2
files.md
2
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/`)
|
||||
|
||||
|
||||
BIN
public/images/codeblocks.png
Normal file
BIN
public/images/codeblocks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 423 KiB |
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
You found the contact page. Nice
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
## Ask AI
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
## Configuration
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
## Content
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
## Dashboard
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
## Deployment
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
## Frontmatter
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
## Keyword Search
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
## Semantic Search
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
## Getting started
|
||||
|
||||
@@ -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).
|
||||
|
||||
@@ -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](/)**.
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
Type: page
|
||||
Date: 2026-01-08
|
||||
Date: 2026-01-09
|
||||
---
|
||||
|
||||
# Newsletter Demo Page
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
@@ -315,10 +316,12 @@ export default function Layout({ children }: LayoutProps) {
|
||||
</nav>
|
||||
</MobileMenu>
|
||||
|
||||
{/* 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 */}
|
||||
<main
|
||||
className={
|
||||
location.pathname === "/stats" || location.pathname === "/blog"
|
||||
location.pathname === "/stats" ||
|
||||
location.pathname === "/blog" ||
|
||||
isDocsPage
|
||||
? "main-content-wide"
|
||||
: "main-content"
|
||||
}
|
||||
|
||||
@@ -418,6 +418,7 @@ export default function Post({
|
||||
src={page.image}
|
||||
alt={page.title}
|
||||
className="post-header-image-img"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -491,6 +492,7 @@ export default function Post({
|
||||
src={page.image}
|
||||
alt={page.title}
|
||||
className="post-header-image-img"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -659,6 +661,7 @@ export default function Post({
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="post-header-image-img"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -736,6 +739,7 @@ export default function Post({
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="post-header-image-img"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user