diff --git a/docs/docs/contribution/documentation/all-components.mdx b/docs/docs/contribution/documentation/all-components.mdx index bbcc45fa..96a9f2e3 100644 --- a/docs/docs/contribution/documentation/all-components.mdx +++ b/docs/docs/contribution/documentation/all-components.mdx @@ -108,11 +108,13 @@ Displays tabbed code examples with syntax highlighting, perfect for showing the #### Props -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `title` | string | No | Optional title for the code showcase | -| `description` | string | No | Optional description | -| `examples` | Array | Yes | Array of example objects | + **Example Object Structure:** ```js @@ -196,12 +198,14 @@ Collapsible code blocks for long code snippets with automatic expansion controls #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `language` | string | 'javascript' | Code language for syntax highlighting | -| `maxLines` | number | 10 | Lines visible before collapse | -| `title` | string | undefined | Optional code block title | -| `children` | ReactNode | Required | Code content | + #### Usage @@ -254,12 +258,14 @@ Styled terminal/shell command display with copy functionality. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `command` | string | Required | Command to display | -| `copyable` | boolean | true | Show copy button | -| `prompt` | string | '$' | Command prompt symbol | -| `language` | string | 'bash' | Syntax highlighting language | + #### Usage @@ -311,12 +317,14 @@ Collapsible sections perfect for FAQs, detailed explanations, or any content tha #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `title` | string | Required | Accordion header text | -| `defaultOpen` | boolean | false | Whether accordion starts expanded | -| `variant` | string | 'default' | Style variant ('default', 'bordered') | -| `children` | ReactNode | Required | Content to display when expanded | + #### Usage @@ -361,11 +369,13 @@ Hover over this #### Usage @@ -429,12 +439,14 @@ Display REST API endpoints with HTTP method badges and parameters. #### Props -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `method` | string | Yes | HTTP method (GET, POST, PUT, DELETE, PATCH) | -| `path` | string | Yes | API endpoint path | -| `description` | string | No | Optional description | -| `params` | Array | No | Query parameters | + **Parameter Object:** ```js @@ -515,12 +527,14 @@ Documentation table for API object properties. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `properties` | Array | Required | Array of property objects | -| `showRequired` | boolean | true | Show required column | -| `showTypes` | boolean | true | Show type column | -| `title` | string | undefined | Optional table title | + **Property Object:** ```js @@ -664,11 +678,13 @@ Interactive JSON schema visualization with expandable nested properties. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `schema` | Object | Required | JSON schema object | -| `collapsed` | boolean | false | Start collapsed | -| `depth` | number | 0 | Initial nesting depth | + #### Usage @@ -745,13 +761,15 @@ Complete API reference section with parameters and response tabs. #### Props -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `method` | string | Yes | HTTP method | -| `endpoint` | string | Yes | API endpoint | -| `description` | string | No | Endpoint description | -| `parameters` | Array | No | Parameters | -| `response` | Object | No | Example response | + #### Usage @@ -815,11 +833,13 @@ Multi-step process visualization with completion states. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `steps` | Array | Required | Array of step objects | -| `currentStep` | number | 0 | Current active step (0-based) | -| `orientation` | string | 'vertical' | Layout ('vertical', 'horizontal') | + **Step Object:** ```js @@ -886,14 +906,16 @@ Hero section for documentation pages with gradient backgrounds. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `title` | string | undefined | Hero title | -| `subtitle` | string | undefined | Hero subtitle | -| `backgroundImage` | string | undefined | Background image URL | -| `variant` | string | 'gradient' | Style ('default', 'gradient', 'dark', 'image') | -| `height` | string | 'medium' | Height ('small', 'medium', 'large', 'full') | -| `children` | ReactNode | undefined | Additional content | + #### Usage @@ -987,15 +1009,17 @@ Navigation cards for linking to documentation pages. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `title` | string | Required | Card title | -| `description` | string | undefined | Card description | -| `href` | string | undefined | Link destination | -| `icon` | string/ReactNode | undefined | Icon (emoji or component) | -| `variant` | string | 'default' | Style ('default', 'primary', 'secondary') | -| `size` | string | 'medium' | Size ('small', 'medium', 'large') | -| `external` | boolean | false | External link | + #### Usage @@ -1075,18 +1099,23 @@ Responsive grid layout for displaying features. #### Props **FeatureGrid:** -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `columns` | number | 3 | Number of columns (2, 3, 4) | -| `children` | ReactNode | Required | FeatureGridItem components | + **FeatureGridItem:** -| Prop | Type | Description | -|------|------|-------------| -| `icon` | string/ReactNode | Icon (emoji or component) | -| `title` | string | Feature title | -| `description` | string | Feature description | -| `href` | string | Optional link | + #### Usage @@ -1152,13 +1181,16 @@ Animated feature card with gradient effects and hover animations. #### Props -| Prop | Type | Description | -|------|------|-------------| -| `icon` | string | Emoji or icon | -| `title` | string | Card title | -| `description` | string | Card description | -| `gradient` | string | Gradient variant ('gradientBlue', 'gradientPurple', 'gradientPink', 'gradientGreen') | -| `link` | string | Optional link URL | + #### Usage @@ -1197,10 +1229,12 @@ Frosted glass effect container with backdrop blur. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `hover` | boolean | false | Enable hover animation | -| `children` | ReactNode | Required | Card content | + #### Usage @@ -1268,12 +1302,15 @@ Display statistics and metrics with optional trend indicators. #### Props -| Prop | Type | Description | -|------|------|-------------| -| `value` | string/ReactNode | Metric value | -| `label` | string | Metric label | -| `icon` | string | Optional icon | -| `trend` | Object | Optional trend `{direction: 'up'/'down', value: '12%'}` | + #### Usage @@ -1334,9 +1371,12 @@ Vertical timeline for roadmaps, changelogs, or historical events. #### Props -| Prop | Type | Description | -|------|------|-------------| -| `items` | Array | Required array of timeline items | + **Timeline Item:** ```js @@ -1421,10 +1461,13 @@ Feature comparison table with highlighted columns. #### Props -| Prop | Type | Description | -|------|------|-------------| -| `features` | Array | Array of feature objects | -| `columns` | Array | Array of column objects | + **Column Object:** ```js @@ -1490,10 +1533,13 @@ Text with gradient color effects - perfect for headings and emphasis. #### Props -| Prop | Type | Description | -|------|------|-------------| -| `variant` | string | Gradient variant ('primary', 'secondary', 'accent', 'success') | -| `children` | ReactNode | Text content | + #### Usage @@ -1545,11 +1591,13 @@ Pill-shaped label for status, tags, and metadata. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `variant` | string | 'primary' | Style variant | -| `size` | string | 'medium' | Size ('small', 'medium', 'large') | -| `children` | ReactNode | Required | Badge content | + **Variants:** - `primary` - Main actions @@ -1604,13 +1652,15 @@ Animated button with gradient effects and glow on hover. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `to` or `href` | string | undefined | Link destination | -| `variant` | string | 'primary' | Style ('primary', 'secondary', 'success', 'outline') | -| `size` | string | 'medium' | Size ('small', 'medium', 'large') | -| `external` | boolean | false | Open in new tab | -| `children` | ReactNode | Required | Button content | + #### Usage @@ -1676,14 +1726,16 @@ Smooth counting animation for numbers. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `end` | number | Required | Target number | -| `duration` | number | 2000 | Animation duration (ms) | -| `prefix` | string | '' | Prefix (e.g., '$') | -| `suffix` | string | '' | Suffix (e.g., '+', 'K') | -| `separator` | string | ',' | Thousands separator | -| `decimals` | number | 0 | Decimal places | + #### Usage @@ -1726,10 +1778,13 @@ Feedback widget for collecting user feedback on documentation pages. #### Props -| Prop | Type | Description | -|------|------|-------------| -| `pageId` | string | Unique page identifier | -| `onSubmit` | Function | Callback when feedback submitted | + #### Usage @@ -1779,11 +1834,13 @@ Display when page was last updated. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `date` | string/Date | Required | Date value | -| `author` | string | undefined | Optional author | -| `showAuthor` | boolean | false | Show author name | + #### Usage @@ -1825,10 +1882,12 @@ the overall user experience of your documentation site.`} #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `content` | string/ReactNode | Required | Content to analyze | -| `wordsPerMinute` | number | 200 | Reading speed | + #### Usage @@ -1882,10 +1941,12 @@ Display related documentation articles with navigation cards. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `items` | Array | Required | Array of related items | -| `title` | string | 'Related Documentation' | Section title | + **Item Object:** ```js @@ -1963,12 +2024,14 @@ This is a simple note without a custom title. #### Props -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `type` | string | 'info' | Type ('info', 'warning', 'danger', 'success', 'tip', 'note') | -| `title` | string | undefined | Optional custom title | -| `icon` | boolean | true | Show icon | -| `children` | ReactNode | Required | Content | + #### Usage diff --git a/docs/src/components/api/PropertyTable/index.js b/docs/src/components/api/PropertyTable/index.js index 5465ae5d..67c25312 100644 --- a/docs/src/components/api/PropertyTable/index.js +++ b/docs/src/components/api/PropertyTable/index.js @@ -1,9 +1,9 @@ import React from 'react'; -import clsx from 'clsx'; import styles from './styles.module.css'; /** - * PropertyTable Component - API property documentation table + * PropertyTable Component - Modern API property documentation table + * Inspired by Shadcn UI design patterns * * @param {Array} properties - Array of property objects * @param {boolean} showRequired - Show required column (default: true) @@ -20,52 +20,54 @@ export default function PropertyTable({
{title &&

{title}

}
- - - - - {showTypes && } - {showRequired && } - - - - - {properties.map((prop, index) => ( - - - {showTypes && ( - - )} - {showRequired && ( - + + ))} + +
PropertyTypeRequiredDescription
- {prop.name} - - {prop.type || 'any'} - - {prop.required ? ( - Yes - ) : ( - No - )} +
+ + + + + {showTypes && } + {showRequired && } + + + + + {properties.map((prop, index) => ( + + - )} - )} - {prop.example && ( -
- Example: {String(prop.example)} -
+ {showRequired && ( + )} - - - ))} - -
PropertyTypeRequiredDescription
+ {prop.name} - {prop.description || prop.desc || '-'} - {prop.default !== undefined && ( -
- Default: {String(prop.default)} -
+ {showTypes && ( + 		+ {prop.type || 'any'} + + {prop.required ? ( + Yes + ) : ( + No + )} +
+
+ {prop.description || prop.desc || '-'} + {prop.default !== undefined && ( +
+ Default: {String(prop.default)} +
+ )} + {prop.example && ( +
+ Example: {String(prop.example)} +
+ )} +
+
); diff --git a/docs/src/components/api/PropertyTable/styles.module.css b/docs/src/components/api/PropertyTable/styles.module.css index 478e198a..95741d68 100644 --- a/docs/src/components/api/PropertyTable/styles.module.css +++ b/docs/src/components/api/PropertyTable/styles.module.css @@ -1,89 +1,178 @@ -/* PropertyTable Component */ +/* PropertyTable Component - Modern Shadcn-inspired Design */ .propertyTable { - margin: 1.5rem 0; + margin: 2rem 0; + width: 100%; } .tableTitle { - font-size: 1.25rem; - font-weight: 700; + font-size: 1.125rem; + font-weight: 600; margin-bottom: 1rem; color: var(--ifm-heading-color); + letter-spacing: -0.01em; } -.tableWrapper { - overflow-x: auto; +[data-theme='dark'] .tableTitle { + color: #ffffff; } -.table { +/* Table Wrapper with Scroll */ +.tableWrapper { + position: relative; width: 100%; - border-collapse: collapse; + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 0.5rem; background: var(--ifm-background-surface-color); + overflow: hidden; } -[data-theme='dark'] .table { +[data-theme='dark'] .tableWrapper { + border-color: #2a2a2a; background: #0f0f0f; } +/* Scrollable Container */ +.tableContainer { + overflow-x: auto; + overflow-y: visible; + -webkit-overflow-scrolling: touch; + scrollbar-width: thin; + scrollbar-color: var(--ifm-color-emphasis-300) transparent; +} + +/* Custom Scrollbar */ +.tableContainer::-webkit-scrollbar { + height: 8px; +} + +.tableContainer::-webkit-scrollbar-track { + background: transparent; +} + +.tableContainer::-webkit-scrollbar-thumb { + background: var(--ifm-color-emphasis-300); + border-radius: 4px; +} + +.tableContainer::-webkit-scrollbar-thumb:hover { + background: var(--ifm-color-emphasis-400); +} + +[data-theme='dark'] .tableContainer::-webkit-scrollbar-thumb { + background: #2a2a2a; +} + +[data-theme='dark'] .tableContainer::-webkit-scrollbar-thumb:hover { + background: #3a3a3a; +} + +/* Table */ +.table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + min-width: 640px; +} + +/* Table Header */ .table thead { - background: var(--ifm-color-emphasis-100); + position: relative; } -[data-theme='dark'] .table thead { - background: #1a1a1a; +.table thead::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: var(--ifm-color-emphasis-200); +} + +[data-theme='dark'] .table thead::after { + background: #2a2a2a; } .table th { - padding: 0.875rem 1rem; + padding: 0.75rem 1rem; text-align: left; - font-weight: 600; - font-size: 0.875rem; + font-weight: 500; + font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--ifm-heading-color); - border-bottom: 2px solid var(--ifm-color-emphasis-200); + color: var(--ifm-color-emphasis-700); + background: var(--ifm-color-emphasis-50); + border-bottom: none; + white-space: nowrap; } [data-theme='dark'] .table th { - border-bottom-color: #2a2a2a; - color: #ffffff; + background: #1a1a1a; + color: #a0a0a0; } -.table td { - padding: 0.875rem 1rem; - border-bottom: 1px solid var(--ifm-color-emphasis-200); - color: var(--ifm-font-color-base); - font-size: 0.9375rem; +.table th:first-child { + padding-left: 1.5rem; } -[data-theme='dark'] .table td { - border-bottom-color: #2a2a2a; +.table th:last-child { + padding-right: 1.5rem; +} + +/* Table Body */ +.table tbody tr { + border-bottom: 1px solid var(--ifm-color-emphasis-100); + transition: background-color 0.15s ease; +} + +[data-theme='dark'] .table tbody tr { + border-bottom-color: #1a1a1a; } -.table tbody tr:last-child td { +.table tbody tr:last-child { border-bottom: none; } .table tbody tr:hover { - background: var(--ifm-color-emphasis-100); + background: var(--ifm-color-emphasis-50); } [data-theme='dark'] .table tbody tr:hover { background: #1a1a1a; } -/* Column widths */ +.table td { + padding: 1rem; + font-size: 0.875rem; + color: var(--ifm-font-color-base); + vertical-align: top; +} + +[data-theme='dark'] .table td { + color: #e5e5e5; +} + +.table td:first-child { + padding-left: 1.5rem; +} + +.table td:last-child { + padding-right: 1.5rem; +} + +/* Column Styles */ .nameColumn { width: 20%; - min-width: 150px; + min-width: 180px; } .typeColumn { width: 15%; - min-width: 120px; + min-width: 140px; } .requiredColumn { - width: 10%; + width: 12%; min-width: 100px; } @@ -91,81 +180,102 @@ width: auto; } +/* Name Cell */ .nameCell { - font-weight: 600; + font-weight: 500; } .propertyName { font-family: var(--ifm-font-family-monospace); - font-size: 0.875rem; - background: var(--ifm-code-background); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - color: var(--ifm-color-primary-dark); + font-size: 0.8125rem; + font-weight: 600; + background: var(--ifm-color-emphasis-100); + padding: 0.25rem 0.5rem; + border-radius: 0.375rem; + color: var(--ifm-color-primary); border: 1px solid var(--ifm-color-emphasis-200); + display: inline-block; + line-height: 1.4; } [data-theme='dark'] .propertyName { - background: #1a1a1a; - border-color: #2a2a2a; + background: rgba(59, 130, 246, 0.1); + border-color: rgba(59, 130, 246, 0.2); color: #93c5fd; } +/* Type Cell */ .typeCell { font-family: var(--ifm-font-family-monospace); } .typeValue { - font-size: 0.875rem; + font-size: 0.8125rem; + font-weight: 500; color: var(--ifm-color-primary); - background: var(--ifm-code-background); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; + background: var(--ifm-color-emphasis-100); + padding: 0.25rem 0.5rem; + border-radius: 0.375rem; border: 1px solid var(--ifm-color-emphasis-200); + display: inline-block; + line-height: 1.4; } [data-theme='dark'] .typeValue { + background: rgba(59, 130, 246, 0.1); + border-color: rgba(59, 130, 246, 0.2); color: #93c5fd; - background: #1a1a1a; - border-color: #2a2a2a; } +/* Required Cell */ .requiredCell { - text-align: center; + text-align: left; } .requiredBadge { - display: inline-block; + display: inline-flex; + align-items: center; font-size: 0.75rem; - padding: 0.125rem 0.5rem; - border-radius: 0.25rem; + font-weight: 500; + padding: 0.25rem 0.625rem; + border-radius: 0.375rem; background: rgba(239, 68, 68, 0.1); color: #ef4444; - font-weight: 600; + border: 1px solid rgba(239, 68, 68, 0.2); } [data-theme='dark'] .requiredBadge { - background: rgba(239, 68, 68, 0.2); + background: rgba(239, 68, 68, 0.15); color: #f87171; + border-color: rgba(239, 68, 68, 0.3); } .optionalBadge { - display: inline-block; + display: inline-flex; + align-items: center; font-size: 0.75rem; - padding: 0.125rem 0.5rem; - border-radius: 0.25rem; - background: rgba(100, 116, 139, 0.1); - color: #64748b; - font-weight: 600; + font-weight: 500; + padding: 0.25rem 0.625rem; + border-radius: 0.375rem; + background: var(--ifm-color-emphasis-100); + color: var(--ifm-color-emphasis-600); + border: 1px solid var(--ifm-color-emphasis-200); } [data-theme='dark'] .optionalBadge { - background: rgba(100, 116, 139, 0.2); + background: rgba(100, 116, 139, 0.15); color: #94a3b8; + border-color: rgba(100, 116, 139, 0.3); } +/* Description Cell */ .descriptionCell { line-height: 1.6; + color: var(--ifm-color-emphasis-700); +} + +[data-theme='dark'] .descriptionCell { + color: #a0a0a0; } .defaultValue, @@ -173,58 +283,108 @@ margin-top: 0.5rem; font-size: 0.8125rem; color: var(--ifm-color-emphasis-600); + line-height: 1.5; } [data-theme='dark'] .defaultValue, [data-theme='dark'] .exampleValue { - color: #909090; + color: #808080; } .defaultValue code, .exampleValue code { font-family: var(--ifm-font-family-monospace); - font-size: 0.8125rem; - background: var(--ifm-code-background); + font-size: 0.75rem; + background: var(--ifm-color-emphasis-100); padding: 0.125rem 0.375rem; border-radius: 0.25rem; - color: var(--ifm-color-primary-dark); + color: var(--ifm-color-primary); border: 1px solid var(--ifm-color-emphasis-200); + margin-left: 0.25rem; } [data-theme='dark'] .defaultValue code, [data-theme='dark'] .exampleValue code { - background: #1a1a1a; - border-color: #2a2a2a; + background: rgba(59, 130, 246, 0.1); + border-color: rgba(59, 130, 246, 0.2); color: #93c5fd; } -/* Responsive */ +/* Responsive Design */ @media (max-width: 996px) { + .propertyTable { + margin: 1.5rem 0; + } + + .tableTitle { + font-size: 1rem; + } + .tableWrapper { - font-size: 0.875rem; + border-radius: 0.375rem; } .table th, .table td { - padding: 0.75rem 0.875rem; + padding: 0.875rem 0.75rem; + font-size: 0.8125rem; + } + + .table th:first-child, + .table td:first-child { + padding-left: 1rem; + } + + .table th:last-child, + .table td:last-child { + padding-right: 1rem; } -} -@media (max-width: 768px) { .nameColumn, .typeColumn, .requiredColumn { - width: auto; - min-width: auto; + min-width: 120px; } +} - .table { - font-size: 0.8125rem; +@media (max-width: 768px) { + .tableWrapper { + border-left: none; + border-right: none; + border-radius: 0; } .table th, .table td { - padding: 0.625rem 0.75rem; + padding: 0.75rem 0.625rem; + font-size: 0.75rem; + } + + .table th:first-child, + .table td:first-child { + padding-left: 0.75rem; } -} + .table th:last-child, + .table td:last-child { + padding-right: 0.75rem; + } + + .propertyName, + .typeValue { + font-size: 0.75rem; + padding: 0.1875rem 0.375rem; + } + + .requiredBadge, + .optionalBadge { + font-size: 0.6875rem; + padding: 0.1875rem 0.5rem; + } + + .defaultValue, + .exampleValue { + font-size: 0.75rem; + margin-top: 0.375rem; + } +} diff --git a/docs/src/components/docs/DocCard/styles.module.css b/docs/src/components/docs/DocCard/styles.module.css index a9c47728..751c7a44 100644 --- a/docs/src/components/docs/DocCard/styles.module.css +++ b/docs/src/components/docs/DocCard/styles.module.css @@ -195,9 +195,47 @@ margin: 2rem 0; } +/* When sidebar is visible (typical desktop width), adjust for better fit */ +@media (min-width: 997px) and (max-width: 1200px) { + .docCardGrid { + grid-template-columns: 1fr; + gap: 1.25rem; + } +} + +/* Wider screens with sidebar, allow 2 columns if space permits */ +@media (min-width: 1201px) and (max-width: 1400px) { + .docCardGrid { + grid-template-columns: repeat(var(--grid-columns, 2), 1fr); + gap: 1.25rem; + } +} + +/* Very wide screens, allow configured columns */ +@media (min-width: 1401px) { + .docCardGrid { + grid-template-columns: repeat(var(--grid-columns, 2), 1fr); + gap: 1.5rem; + } +} + @media (max-width: 996px) { .docCardGrid { grid-template-columns: 1fr; + gap: 1.25rem; + } +} + +/* Responsive adjustments for cards when sidebar is visible */ +@media (min-width: 997px) and (max-width: 1200px) { + .docCard { + padding: 1.75rem; + gap: 1.125rem; + } + + .docCardIcon { + width: 3.25rem; + height: 3.25rem; } } diff --git a/docs/src/components/features/FeatureGrid/styles.module.css b/docs/src/components/features/FeatureGrid/styles.module.css index e4cf1a5d..2e05d27a 100644 --- a/docs/src/components/features/FeatureGrid/styles.module.css +++ b/docs/src/components/features/FeatureGrid/styles.module.css @@ -1,19 +1,37 @@ /* FeatureGrid Component */ .featureGrid { display: grid; - grid-template-columns: repeat(var(--grid-columns, 3), 1fr); + grid-template-columns: repeat(var(--grid-columns, 2), 1fr); gap: 2rem; margin: 2.5rem 0; } -@media (max-width: 996px) { +/* When sidebar is visible on narrower screens, switch to single column for better fit */ +@media (min-width: 997px) and (max-width: 1200px) { + .featureGrid { + grid-template-columns: 1fr; + gap: 1.5rem; + } +} + +/* Wider screens with sidebar, keep 2 columns */ +@media (min-width: 1201px) { + .featureGrid { + grid-template-columns: repeat(var(--grid-columns, 2), 1fr); + gap: 2rem; + } +} + +/* Tablet range - 2 columns */ +@media (min-width: 689px) and (max-width: 996px) { .featureGrid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } -@media (max-width: 768px) { +/* Mobile - single column with adjusted spacing */ +@media (max-width: 688px) { .featureGrid { grid-template-columns: 1fr; gap: 1.25rem; diff --git a/docs/src/css/documentation.css b/docs/src/css/documentation.css index 81bc964d..831d401e 100644 --- a/docs/src/css/documentation.css +++ b/docs/src/css/documentation.css @@ -185,7 +185,7 @@ /* Tables */ .markdown table { - margin: 2rem 0; + margin: 0 !important; border-collapse: collapse; width: 100%; border-radius: 0.75rem; diff --git a/docs/src/pages/home/ctaSection.module.css b/docs/src/pages/home/ctaSection.module.css index 2d864e62..0a1fd8c5 100644 --- a/docs/src/pages/home/ctaSection.module.css +++ b/docs/src/pages/home/ctaSection.module.css @@ -3,11 +3,11 @@ .ctaSection { padding: 8rem 0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); position: relative; } .ctaContent { max-width: 800px; margin: 0 auto; text-align: center; padding: 4rem 2rem; background: white; border: 1px solid #e2e8f0; border-radius: 2rem; box-shadow: 0 20px 40px rgba(0,0,0,0.08); } -.ctaTitle { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 1.5rem; } -.ctaDescription { font-size: 1.125rem; line-height: 1.7; color: #64748b; margin-bottom: 2.5rem; } +.ctaTitle { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 1.5rem; text-align: center; } +.ctaDescription { font-size: 1.125rem; line-height: 1.7; color: #64748b; margin-bottom: 2.5rem; text-align: center; } .ctaButtons { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } -.ctaButton { display: inline-flex; align-items: center; gap: 0.625rem; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 0.75rem; text-decoration: none; transition: all var(--motion-duration-normal) var(--motion-ease-standard); border: 2px solid transparent; white-space: nowrap; } +.ctaButton { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 0.75rem; text-decoration: none; transition: all var(--motion-duration-normal) var(--motion-ease-standard); border: 2px solid transparent; white-space: nowrap; } .ctaPrimary { background: linear-gradient(135deg, var(--compose-primary-500) 0%, var(--compose-primary-600) 100%); color: white; box-shadow: 0 4px 14px rgba(59,130,246,0.4), 0 1px 3px rgba(0,0,0,0.12); } .ctaPrimary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,130,246,0.5), 0 4px 8px rgba(0,0,0,0.12); color: white; } .ctaSecondaryLight { background: rgba(59,130,246,0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #1e40af; border: 2px solid rgba(59,130,246,0.3); } diff --git a/docs/static/icons/arrow-right.svg b/docs/static/icons/arrow-right.svg index a4bac1d9..1170f672 100644 --- a/docs/static/icons/arrow-right.svg +++ b/docs/static/icons/arrow-right.svg @@ -1,11 +1,5 @@ - - - - - - - +