diff --git a/.docs/content/0.index.md b/.docs/content/0.index.md index 37ea4cd1e..762df624d 100644 --- a/.docs/content/0.index.md +++ b/.docs/content/0.index.md @@ -106,13 +106,10 @@ backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor}) :: #default - ::card-grid{cols=6 gap=1rem} + ::card-grid{cols=6} - #subtitle - Features - - #title - What's included + #root + :section-header{title="What's included" subtitle="Features"} #default ::card{icon=logos:nuxt-icon lights noise} diff --git a/.docs/content/2.components/1.elements/9.tooltip.md b/.docs/content/2.components/1.elements/9.tooltip.md index d46c90699..802bcadd6 100644 --- a/.docs/content/2.components/1.elements/9.tooltip.md +++ b/.docs/content/2.components/1.elements/9.tooltip.md @@ -33,7 +33,7 @@ The element that serves as the tooltip container has `role="tooltip"`. The eleme ## Props -| **Props** | **Type** | **Default** | **Description** | +| **Prop** | **Type** | **Default** | **Description** | | --- | --- | --- | --- | | **content** | `String` | `undefined` | Tooltip content | | **tabbable** | `Boolean` | `false` | Whether tooltip is tabbable or not | diff --git a/.docs/content/2.components/3.landing/1.hero.md b/.docs/content/2.components/3.landing/1.hero.md index c642aec03..c2f4df388 100644 --- a/.docs/content/2.components/3.landing/1.hero.md +++ b/.docs/content/2.components/3.landing/1.hero.md @@ -2,6 +2,102 @@ The `Hero` component is a versatile and visually appealing element designed for the landing page. It serves as the first screen that captures users' attention and introduces them to the key features and messaging of the product. The component incorporates a title, description, announce, call-to-action buttons, some extra content slot and a flexible area for visual content, such as images, videos, or animations (or `Terminal` in case of Docus website). +## Usage + +::code-group + ::code-preview{label="Preview" column} + ::hero{style="min-width: 1280px;"} + + #announce + ::announce{href=https://docus.dev/v2} + Docus v2 is out 🎉 + :: + + #title + The best place to start your documentation. + + #description + Write pages in [:icon{name=mdi:language-markdown}]{style="margin-right:4px"} [Markdown](https://content.nuxtjs.org), use [:icon{name=vscode-icons:file-type-vue}]{style="margin-right:4px"} [Vue](https://vuejs.org) components and enjoy the power of [:icon{name=vscode-icons:file-type-nuxt}]{style="margin-right:4px"} [Nuxt](https://nuxt.com). + + #extra + ::list + - **+50 Components** ready to build rich pages + - **Docs** and **Page** layouts + - Start from a `README`, scale to a framework documentation + - Navigation and Table of Contents generation + - Fully configurable design system + - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev) + - Used on [Content Documentation](https://content.nuxtjs.org) + :: + + #actions + ::button-link{href=/introduction/getting-started size=medium} + Get started + :: + ::button-link{href=https://github.com/nuxt-themes/docus size=medium color=gray ghost blank} + Open on GitHub → + :: + + #support + ::terminal + --- + content: + - npx nuxi@latest init -t themes/docus + - cd docs + - npm install + - npm run dev + --- + :: + :: + :: + + ```md [MDC] + ::hero + + #announce + ::announce{href=https://docus.dev/v2} + Docus v2 is out 🎉 + :: + + #title + The best place to start your documentation. + + #description + Write pages in [:icon{name=mdi:language-markdown}]{style="margin-right:4px"} [Markdown](https://content.nuxtjs.org), use [:icon{name=vscode-icons:file-type-vue}]{style="margin-right:4px"} [Vue](https://vuejs.org) components and enjoy the power of [:icon{name=vscode-icons:file-type-nuxt}]{style="margin-right:4px"} [Nuxt](https://nuxt.com). + + #extra + ::list + - **+50 Components** ready to build rich pages + - **Docs** and **Page** layouts + - Start from a `README`, scale to a framework documentation + - Navigation and Table of Contents generation + - Fully configurable design system + - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev) + - Used on [Content Documentation](https://content.nuxtjs.org) + :: + + #actions + ::button-link{href=/introduction/getting-started size=medium} + Get started + :: + ::button-link{href=https://github.com/nuxt-themes/docus size=medium color=gray ghost blank} + Open on GitHub → + :: + + #support + ::terminal + --- + content: + - npx nuxi@latest init -t themes/docus + - cd docs + - npm install + - npm run dev + --- + :: + :: + ``` +:: + ## Slots | **Name** | **Description** | @@ -68,6 +164,8 @@ export default defineTheme({ letterSpacing: '{letterSpacing.tight}', paddingX: { initial: '{space.8}', + md: '{space.12}', + lg: '{space.14}', xl: '{space.0}' }, textAlign: { @@ -96,7 +194,11 @@ export default defineTheme({ lg: '{text.xl.lineHeight}' }, color: '{elements.text.secondary.color.static}', - paddingX: '{space.2}', + paddingX: { + initial: '{space.2}', + md: '{space.6}', + xl: '{space.0}' + }, mixBlendMode: 'normal' }, extra: { diff --git a/.docs/content/2.components/3.landing/2.terminal.md b/.docs/content/2.components/3.landing/2.terminal.md index f8ec300c7..3096cd250 100644 --- a/.docs/content/2.components/3.landing/2.terminal.md +++ b/.docs/content/2.components/3.landing/2.terminal.md @@ -26,7 +26,7 @@ The `Terminal` component is used to display terminal commands. User could copy t ## Props -| **Props** | **Type** | **Default** | **Description** | +| **Prop** | **Type** | **Default** | **Description** | |--|--|--|--| | `content` | `[Array, String]` | `undefined` | One or multiple terminal commands. The prop is `required` | diff --git a/.docs/content/2.components/3.landing/card.md b/.docs/content/2.components/3.landing/3.card.md similarity index 100% rename from .docs/content/2.components/3.landing/card.md rename to .docs/content/2.components/3.landing/3.card.md diff --git a/.docs/content/2.components/3.landing/4.card-grid.md b/.docs/content/2.components/3.landing/4.card-grid.md new file mode 100644 index 000000000..fd2006fba --- /dev/null +++ b/.docs/content/2.components/3.landing/4.card-grid.md @@ -0,0 +1,47 @@ +# Card Grid + +The `CardGrid` component is a layout component that allows you to display a grid of `Card`'s. + +## Usage + +::code-group + ::code-preview{label="Preview" column} + ::card-grid{style="--docus-landing-card-wrapper-backgroundColor: var(--elements-surface-secondary-backgroundColor);"} + ::card + Card + :: + ::card{row=2} + Card + :: + ::card + Card + :: + ::card{row=2} + Card + :: + ::card{col=2} + Card + :: + ::card + Card + :: + :: + :: + ```md [MDC] + ``` +:: + +## Props + +| Prop | Type | Default | Description | +|--|--|--|--| +| `cols` | `[String, Number, Object]` | `3` | Number of columns to display | +| `gap` | `[String, Object]` | `{ initial: '{space.4}', '2xl': '{space.6}' }` | Gap between cards | + +## Slots + +| Slot | Description | +| --- | --- | +| `root` | A slot for any content, rendered at the root of the component | +| `default` | `Card` components to be displayed in the grid. | + diff --git a/.docs/content/2.components/3.landing/card-grid.md b/.docs/content/2.components/3.landing/5.section-header.md similarity index 100% rename from .docs/content/2.components/3.landing/card-grid.md rename to .docs/content/2.components/3.landing/5.section-header.md diff --git a/components/landing/Card.vue b/components/landing/Card.vue index e137532f5..0d1250820 100644 --- a/components/landing/Card.vue +++ b/components/landing/Card.vue @@ -41,8 +41,8 @@ watch([elementX, elementY], () => {
-
+ diff --git a/components/landing/CardGrid.vue b/components/landing/CardGrid.vue index 0f2cf6517..2650ff45b 100644 --- a/components/landing/CardGrid.vue +++ b/components/landing/CardGrid.vue @@ -4,9 +4,12 @@ defineProps({ type: [String, Number, Object], default: 3 }, - subtitleColor: { - type: String, - default: '{color.primary.500}' + gap: { + type: [String, Object], + default: () => ({ + initial: '{space.4}', + '2xl': '{space.6}' + }) } }) @@ -21,14 +24,6 @@ defineProps({ - - - - -

- -

-
@@ -38,38 +33,15 @@ defineProps({ diff --git a/tokens.config.ts b/tokens.config.ts index ead9c7037..1926b48ec 100644 --- a/tokens.config.ts +++ b/tokens.config.ts @@ -394,6 +394,8 @@ export default defineTheme({ letterSpacing: '{letterSpacing.tight}', paddingX: { initial: '{space.8}', + md: '{space.12}', + lg: '{space.14}', xl: '{space.0}' }, textAlign: { @@ -422,7 +424,11 @@ export default defineTheme({ lg: '{text.xl.lineHeight}' }, color: '{elements.text.secondary.color.static}', - paddingX: '{space.2}', + paddingX: { + initial: '{space.2}', + md: '{space.6}', + xl: '{space.0}' + }, mixBlendMode: 'normal' }, extra: { @@ -454,46 +460,6 @@ export default defineTheme({ } } }, - cardGrid: { - position: 'relative', - paddingBottom: { - initial: '{space.20}', - sm: '{space.24}', - md: '{space.32}' - }, - layout: { - gap: { - initial: '{space.4}', - '2xl': '{space.6}' - } - }, - subtitle: { - fontSize: '{text.xl.fontSize}', - lineHeight: '{text.xl.lineHeight}', - fontWeight: '{fontWeight.normal}', - letterSpacing: '{letterSpacing.wide}', - marginBottom: '{space.4}' - }, - title: { - width: '60%', - fontSize: { - initial: '{text.3xl.fontSize}', - sm: '{text.4xl.fontSize}' - }, - lineHeight: { - initial: '{text.3xl.lineHeight}', - sm: '{text.4xl.lineHeight}' - }, - marginBottom: '{space.8}', - fontWeight: '{fontWeight.semibold}', - letterSpacing: '{letterSpacing.tight}', - color: '{docus.body.color}', - gradientText: { - initial: 'linear-gradient(90deg, {color.gray.900} 0%, {color.secondary.700} 30%)', - dark: 'linear-gradient(90deg, {color.gray.100} 0%, {color.primary.200} 30%)' - } - } - }, card: { padding: '{space.1}', borderRadius: '{radii.sm}', @@ -504,6 +470,7 @@ export default defineTheme({ backgroundImage: 'none', backdropFilter: '{elements.backdrop.filter}', boxShadow: 'none', + minHeight: 'auto', // 180px wrapper: { borderRadius: '{radii.xs}', backgroundColor: 'transparent', @@ -588,6 +555,34 @@ export default defineTheme({ dark: '{color.gray.100}' } } + }, + sectionHeader: { + subtitle: { + fontSize: '{text.xl.fontSize}', + lineHeight: '{text.xl.lineHeight}', + fontWeight: '{fontWeight.normal}', + letterSpacing: '{letterSpacing.wide}', + marginBottom: '{space.4}' + }, + title: { + width: '60%', + fontSize: { + initial: '{text.3xl.fontSize}', + sm: '{text.4xl.fontSize}' + }, + lineHeight: { + initial: '{text.3xl.lineHeight}', + sm: '{text.4xl.lineHeight}' + }, + marginBottom: '{space.8}', + fontWeight: '{fontWeight.semibold}', + letterSpacing: '{letterSpacing.tight}', + color: '{docus.body.color}', + gradientText: { + initial: 'linear-gradient(90deg, {color.gray.900} 0%, {color.secondary.700} 30%)', + dark: 'linear-gradient(90deg, {color.gray.100} 0%, {color.primary.200} 30%)' + } + } } } },