npm - fulldev-ui - Versions diffs - 0.6.0-beta.3 → 0.6.0-beta.6 - Mend

fulldev-ui 0.6.0-beta.3 → 0.6.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/astro.config.ts +1 -7
package/cloudcannon.config.yml +269 -0
package/package.json +1 -1
package/src/blocks/Banner.astro +33 -0
package/src/blocks/Colleagues1.astro +73 -0
package/src/blocks/Contact1.astro +12 -4
package/src/blocks/Content1.astro +79 -0
package/src/blocks/Content2.astro +94 -0
package/src/blocks/Content3.astro +70 -0
package/src/blocks/Content4.astro +75 -0
package/src/blocks/Cta1.astro +35 -34
package/src/blocks/Feature1.astro +20 -26
package/src/blocks/Features1.astro +66 -0
package/src/blocks/Footer.astro +27 -52
package/src/blocks/Header.astro +154 -0
package/src/blocks/Hero1.astro +41 -41
package/src/blocks/Intro1.astro +32 -18
package/src/blocks/Jobs1.astro +73 -0
package/src/blocks/Logos1.astro +55 -0
package/src/blocks/Products1.astro +4 -4
package/src/blocks/Reviews1.astro +79 -0
package/src/components/Badges.astro +12 -35
package/src/components/Block.astro +5 -24
package/src/components/Button.astro +1 -2
package/src/components/Buttons.astro +12 -43
package/src/components/Cart.astro +6 -12
package/src/components/Drawer.astro +1 -2
package/src/components/Form.astro +3 -3
package/src/components/Grid.astro +39 -0
package/src/components/{Banner.astro → Group.astro} +5 -6
package/src/components/Heading.astro +5 -1
package/src/components/Icon.astro +0 -1
package/src/components/Image.astro +15 -50
package/src/components/Layout.astro +35 -0
package/src/components/Links.astro +14 -35
package/src/components/Logo.astro +5 -7
package/src/components/Masonry.astro +42 -0
package/src/components/Menu.astro +17 -38
package/src/components/Menus.astro +20 -0
package/src/components/Panel.astro +1 -1
package/src/components/Paragraph.astro +8 -8
package/src/components/Prose.astro +15 -7
package/src/components/Search.astro +1 -1
package/src/components/Section.astro +1 -1
package/src/components/Sidebar.astro +11 -42
package/src/components/Stack.astro +25 -0
package/src/components/Tagline.astro +1 -1
package/src/components/Toc.astro +22 -30
package/src/components/Writeup.astro +59 -0
package/src/components/_Image.astro +79 -0
package/src/content/config.ts +2 -28
package/src/content/layouts/base.yml +4 -3
package/src/content/{docs → pages/docs}/_internationalization.mdx +1 -0
package/src/content/{docs → pages/docs}/_using-blocks.mdx +1 -0
package/src/content/{docs → pages/docs}/_using-presets.mdx +1 -0
package/src/content/{docs → pages/docs}/blocks.mdx +1 -0
package/src/content/{docs → pages/docs}/collections/images.mdx +1 -0
package/src/content/{docs → pages/docs}/collections/pages.mdx +1 -0
package/src/content/{docs → pages/docs}/collections/presets.mdx +1 -0
package/src/content/{docs → pages/docs}/collections.mdx +1 -0
package/src/content/{docs → pages/docs}/components/_card.mdx +1 -0
package/src/content/{docs → pages/docs}/components/_dialog.mdx +1 -0
package/src/content/{docs → pages/docs}/components/_drawer.mdx +1 -0
package/src/content/{docs → pages/docs}/components/_localeswitcher.mdx +1 -0
package/src/content/{docs → pages/docs}/components/_switch.mdx +1 -0
package/src/content/{docs → pages/docs}/components/_tagline.mdx +1 -0
package/src/content/{docs → pages/docs}/components/_toggle.mdx +1 -0
package/src/content/{docs → pages/docs}/components/avatar.mdx +1 -0
package/src/content/{docs → pages/docs}/components/badge.mdx +1 -0
package/src/content/{docs → pages/docs}/components/badges.mdx +1 -0
package/src/content/{docs → pages/docs}/components/button.mdx +1 -0
package/src/content/{docs → pages/docs}/components/buttons.mdx +1 -0
package/src/content/{docs → pages/docs}/components/channel.mdx +1 -0
package/src/content/{docs → pages/docs}/components/channels.mdx +1 -0
package/src/content/{docs → pages/docs}/components/checkbox.mdx +1 -0
package/src/content/{docs → pages/docs}/components/code.mdx +1 -0
package/src/content/{docs → pages/docs}/components/heading.mdx +1 -0
package/src/content/{docs → pages/docs}/components/icon.mdx +1 -0
package/src/content/{docs → pages/docs}/components/image.mdx +1 -0
package/src/content/{docs → pages/docs}/components/input.mdx +1 -0
package/src/content/{docs → pages/docs}/components/label.mdx +1 -0
package/src/content/{docs → pages/docs}/components/link.mdx +1 -0
package/src/content/{docs → pages/docs}/components/links.mdx +1 -0
package/src/content/{docs → pages/docs}/components/list.mdx +1 -0
package/src/content/{docs → pages/docs}/components/logo.mdx +1 -0
package/src/content/{docs → pages/docs}/components/menu.mdx +1 -0
package/src/content/{docs → pages/docs}/components/prose.mdx +1 -0
package/src/content/{docs → pages/docs}/components/rating.mdx +1 -0
package/src/content/{docs → pages/docs}/components/section.mdx +1 -0
package/src/content/{docs → pages/docs}/components/select.mdx +1 -0
package/src/content/{docs → pages/docs}/components/social.mdx +1 -0
package/src/content/{docs → pages/docs}/components/socials.mdx +1 -0
package/src/content/{docs → pages/docs}/components/switch.mdx +1 -0
package/src/content/{docs → pages/docs}/components/table.mdx +1 -0
package/src/content/{docs → pages/docs}/components/tagline.mdx +1 -0
package/src/content/{docs → pages/docs}/components/text.mdx +1 -0
package/src/content/{docs → pages/docs}/components/textarea.mdx +1 -0
package/src/content/{docs → pages/docs}/components/themer.mdx +1 -0
package/src/content/{docs → pages/docs}/components.mdx +1 -0
package/src/content/{docs → pages/docs}/customization.mdx +1 -0
package/src/content/{docs → pages/docs}/frameworks.mdx +1 -0
package/src/content/{docs → pages/docs}/generating-pages.mdx +1 -0
package/src/content/{docs → pages/docs}/index.mdx +1 -0
package/src/content/{docs → pages/docs}/installation.mdx +1 -0
package/src/content/{docs → pages/docs}/layouts.mdx +1 -0
package/src/content/pages/index.mdx +3 -3
package/src/content/{products → pages/products}/product.md +2 -2
package/src/integration/index.ts +38 -16
package/src/layouts/{CategoryLayout.astro → Category.astro} +19 -20
package/src/layouts/Doc.astro +70 -0
package/src/layouts/Job.astro +62 -0
package/src/layouts/Jobs.astro +72 -0
package/src/layouts/Page.astro +29 -0
package/src/layouts/Post.astro +52 -0
package/src/layouts/{ProductLayout.astro → Product.astro} +20 -11
package/src/pages/[...page].astro +36 -4
package/src/pages/test.astro +25 -1
package/src/schemas/components/block.ts +58 -15
package/src/schemas/components/button.ts +1 -0
package/src/schemas/components/image.ts +32 -18
package/src/schemas/components/menu.ts +1 -0
package/src/schemas/imageSchema.ts +3 -3
package/src/schemas/page.ts +40 -0
package/src/utils/getHref.ts +4 -21
package/tailwind.config.ts +4 -0
package/src/blocks/Banner1.astro +0 -35
package/src/blocks/Header1.astro +0 -192
package/src/content/layouts/docs.yml +0 -2
package/src/layouts/DocLayout.astro +0 -59
package/src/layouts/Layout.astro +0 -107
package/src/layouts/PageLayout.astro +0 -27
package/src/layouts/PostLayout.astro +0 -22
package/src/pages/[...category].astro +0 -17
package/src/pages/[...doc].astro +0 -17
package/src/pages/[...post].astro +0 -17
package/src/pages/[...product].astro +0 -17
package/src/schemas/blocks/banner.ts +0 -10
package/src/schemas/blocks/categories.ts +0 -14
package/src/schemas/blocks/contact.ts +0 -18
package/src/schemas/blocks/cta.ts +0 -18
package/src/schemas/blocks/feature.ts +0 -18
package/src/schemas/blocks/hero.ts +0 -20
package/src/schemas/blocks/intro.ts +0 -16
package/src/schemas/blocks/products.ts +0 -14
package/src/schemas/categorySchema.ts +0 -16
package/src/schemas/docSchema.ts +0 -14
package/src/schemas/layoutSchema.ts +0 -22
package/src/schemas/pageSchema.ts +0 -17
package/src/schemas/postSchema.ts +0 -14
package/src/schemas/productSchema.ts +0 -22
/package/src/content/{categories → pages/categories}/category.md +0 -0
/package/src/content/{posts → pages/posts}/post.md +0 -0

package/src/components/Icon.astro CHANGED Viewed

@@ -11,7 +11,6 @@ interface Props extends Omit<HTMLAttributes<'svg'>, 'name'>, IconSchema {
 const { size = 'md', name, ...rest } = Astro.props
-console.log(name)
 const trimmedName = name?.trim()
 const icon = trimmedName
   ? (tablerIcons as any)?.icons[trimmedName]?.body

package/src/components/Image.astro CHANGED Viewed

@@ -1,31 +1,9 @@
 ---
-// @ts-nocheck
-import type { ImageMetadata } from 'astro'
 import type { HTMLAttributes } from 'astro/types'
 import { Image as AstroImage } from 'astro:assets'
-import { getEntry } from 'astro:content'
+import type { ImageSchema } from 'fulldev-ui/schemas/imageSchema'
-interface Props extends GlobalProps, HTMLAttributes<'img'> {
-  id?: any
-  size?: 'sm' | 'md' | 'lg' | undefined
-  position?: 'background' | 'cover' | 'inset' | undefined
-}
-const { id } = Astro.props
-const entry = id ? (await getEntry('images', id))?.data : {}
-const {
-  width = 1920,
-  height = 1920,
-  position,
-  src,
-  alt,
-  size,
-  ...rest
-} = {
-  ...entry,
-  ...Astro.props,
-}
+interface Props extends HTMLAttributes<'img'>, ImageSchema {}
 function getAltBySrc() {
   if (!src) return
@@ -35,24 +13,23 @@ function getAltBySrc() {
   return unslugged || ''
 }
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
-const image = images[src as keyof typeof images]
+const {
+  src,
+  alt = getAltBySrc(),
+  height = 1920,
+  width = 1920,
+  ...rest
+} = Astro.props
 ---
 {
-  (image || src) && (
+  src && (
     <AstroImage
-      class:list={[
-        'image',
-        {
-          [`size-${size}`]: size,
-          [`position-${position}`]: position,
-        },
-      ]}
-      alt={alt || getAltBySrc()}
-      src={image ? image() : src}
-      width={width ? Number(width) : undefined}
-      height={height ? Number(height) : undefined}
+      class:list="image"
+      {alt}
+      {src}
+      {width}
+      {height}
       {...rest}
     />
   )
@@ -62,18 +39,6 @@ const image = images[src as keyof typeof images]
   @layer fulldev {
     .image {
       @apply block;
-      &.position-contain {
-        @apply h-auto w-full object-contain;
-      }
-      &.position-cover {
-        @apply h-full w-full object-cover;
-      }
-      &.position-background {
-        @apply absolute inset-0 h-full max-h-none w-full max-w-none object-cover opacity-30;
-      }
     }
   }
 </style>

package/src/components/Layout.astro ADDED Viewed

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Head from 'fulldev-ui/components/Head.astro'
+import type { HeadSchema } from 'fulldev-ui/schemas/components/head'
+type Props = Omit<HTMLAttributes<'body'>, 'title'> & {
+  head?: HeadSchema
+}
+const { head, ...rest } = Astro.props
+---
+<!doctype html>
+<html>
+  <Head {...head} />
+  <body {...rest}>
+    <slot />
+    <style is:global>
+      @layer fulldev {
+        html {
+          @apply w-full font-sans text-base leading-relaxed text-foreground;
+          color-scheme: light;
+        }
+        .dark {
+          color-scheme: dark;
+        }
+        body {
+          @apply w-full bg-background font-sans text-foreground;
+        }
+      }
+    </style>
+  </body>
+</html>

package/src/components/Links.astro CHANGED Viewed

@@ -1,42 +1,21 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Link from './Link.astro'
+import type { ComponentProps } from 'astro/types'
+import Link from 'fulldev-ui/components/Link.astro'
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  variant?: ComponentProps<typeof Link>['variant']
+interface Props extends ComponentProps<typeof Link> {
+  link?: ComponentProps<typeof Link> | undefined
   links?: ComponentProps<typeof Link>[] | undefined
-  direction?: 'row' | 'column' | undefined
 }
-const { variant = 'muted', links, size, ...rest } = Astro.props
+const { variant = 'muted', link, links, ...rest } = Astro.props
 ---
-<Element
-  class:list="links"
-  {...rest}
->
-  {
-    links?.map((link) => (
-      <Link
-        {variant}
-        {size}
-        {...link}
-      />
-    ))
-  }
-  <slot />
-</Element>
-<style is:global>
-  @layer fulldev {
-    .links {
-      @apply flex items-center justify-stretch gap-x-6 gap-y-2;
-      &.direction-column {
-        @apply flex-col items-start;
-      }
-    }
-  }
-</style>
+{
+  [link, ...(links || [])].filter(Boolean).map((link) => (
+    <Link
+      {variant}
+      {...rest}
+      {...link}
+    />
+  ))
+}

package/src/components/Logo.astro CHANGED Viewed

@@ -31,16 +31,14 @@ const {
   <Fragment set:html={text} />
 </Element>
-<Image
-  class:list="logo"
-  {size}
-  {...rest}
-/>
 <style is:global>
   @layer fulldev {
     .logo {
-      @apply flex w-auto items-center object-contain text-base font-bold leading-none text-foreground;
+      @apply flex w-auto items-center gap-2 whitespace-nowrap object-contain text-base font-bold leading-none text-foreground;
+      .image {
+        @apply h-full w-auto object-contain;
+      }
       &.size-sm {
         @apply h-6;

package/src/components/Masonry.astro ADDED Viewed

@@ -0,0 +1,42 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+const { ...rest } = Astro.props
+---
+<Element
+  class:list="masonry"
+  {...rest}
+>
+  <slot />
+</Element>
+<style is:global>
+  @layer fulldev {
+    .masonry {
+      --column-width: 20rem;
+      @apply relative w-full columns-sm gap-5 space-y-5;
+      & > * {
+        @apply break-inside-avoid;
+      }
+      /* &.size-sm {
+        --column-width: 16rem;
+      }
+      &.size-md {
+        --column-width: 20rem;
+      }
+      &.size-lg {
+        --column-width: 26rem;
+      } */
+    }
+  }
+</style>

package/src/components/Menu.astro CHANGED Viewed

@@ -1,59 +1,38 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import type Link from './Link.astro'
+import type { MenuSchema } from 'fulldev-ui/schemas/components/menu'
 import Links from './Links.astro'
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  direction?: 'row' | 'column'
-  groups?:
-    | {
-        heading?: ComponentProps<typeof Heading>['text']
-        links?: ComponentProps<typeof Link>[]
-      }[]
-    | undefined
-}
+interface Props extends HTMLAttributes<'div'>, MenuSchema {}
-const { direction = 'column', groups, size = 'md', ...rest } = Astro.props
+const { size = 'md', heading, links, ...rest } = Astro.props
 ---
 <Element
   class:list="menu"
-  {direction}
-  {size}
   {...rest}
 >
-  {
-    groups?.map(({ heading, links }) => (
-      <Element class:list="menu-group">
-        <Heading
-          level={6}
-          text={heading}
-          {size}
-        />
-        <Links
-          direction="column"
-          {links}
-          {size}
-        />
-      </Element>
-    ))
-  }
+  <Heading
+    text={heading}
+    as="h6"
+    {size}
+  />
+  <Links
+    variant="muted"
+    {size}
+    {links}
+  />
 </Element>
 <style is:global>
   @layer fulldev {
     .menu {
-      @apply flex flex-col gap-6;
-      .menu-group {
-        @apply flex flex-col gap-3;
-      }
+      @apply flex flex-col gap-2;
-      &.direction-row {
-        @apply flex-row flex-wrap gap-12;
+      .heading {
+        @apply mb-1;
       }
     }
   }

package/src/components/Menus.astro ADDED Viewed

@@ -0,0 +1,20 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Menu from 'fulldev-ui/components/Menu.astro'
+interface Props extends ComponentProps<typeof Menu> {
+  menu?: ComponentProps<typeof Menu> | undefined
+  menus?: ComponentProps<typeof Menu>[] | undefined
+}
+const { menu, menus, ...rest } = Astro.props
+---
+{
+  [menu, ...(menus || [])].filter(Boolean).map((menu) => (
+    <Menu
+      {...rest}
+      {...menu}
+    />
+  ))
+}

package/src/components/Panel.astro CHANGED Viewed

@@ -19,7 +19,7 @@ const { ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .panel {
-      @apply w-full gap-x-gutter rounded-lg border bg-card px-gutter py-16 text-card-foreground lg:px-16;
+      @apply w-full gap-x-gutter rounded-lg border bg-card px-gutter py-20 text-card-foreground lg:px-20;
     }
   }
 </style>

package/src/components/Paragraph.astro CHANGED Viewed

@@ -13,7 +13,7 @@ const { as = 'p', text, ...rest } = Astro.props
 ---
 <Element
-  class:list="text"
+  class:list="paragraph"
   {as}
   {...rest}
 >
@@ -23,32 +23,32 @@ const { as = 'p', text, ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
-    .text,
+    .paragraph,
     .prose-content p {
-      @apply leading-relaxed text-foreground;
+      @apply text-foreground;
       &.muted {
         @apply text-muted-foreground;
       }
       &.size-xs {
-        @apply text-xs;
+        @apply text-xs leading-relaxed;
       }
       &.size-sm {
-        @apply text-sm;
+        @apply text-sm leading-relaxed;
       }
       &.size-md {
-        @apply text-base;
+        @apply text-base leading-relaxed;
       }
       &.size-lg {
-        @apply text-lg;
+        @apply text-lg leading-relaxed;
       }
       &.size-xl {
-        @apply text-xl;
+        @apply text-xl leading-relaxed;
       }
     }
   }

package/src/components/Prose.astro CHANGED Viewed

@@ -19,14 +19,14 @@ const { ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .prose {
-      @apply relative w-full max-w-screen-md py-8;
+      @apply relative w-full max-w-screen-md;
       > * {
-        @apply mt-6 first:mt-0;
+        @apply mt-6;
       }
       p {
-        @apply mt-4 first:mt-0;
+        @apply mt-4;
       }
       code:not(.astro-code code) {
@@ -39,7 +39,7 @@ const { ...rest } = Astro.props
       h4,
       h5,
       h6 {
-        @apply mt-8 scroll-m-20 font-bold first:mt-0;
+        @apply scroll-m-20 font-bold;
         code {
           font-size: inherit !important;
@@ -51,11 +51,11 @@ const { ...rest } = Astro.props
       }
       > h2 {
-        @apply text-2xl;
+        @apply mt-10 text-2xl;
       }
       > h3 {
-        @apply text-xl;
+        @apply mt-8 text-xl;
       }
       > h4 {
@@ -71,7 +71,15 @@ const { ...rest } = Astro.props
       }
       > aside {
-        @apply mt-6 rounded-md border border-destructive p-4 text-destructive first:mt-0;
+        @apply rounded-md border border-destructive p-4 text-destructive;
+      }
+      img {
+        @apply my-12 rounded-lg;
+      }
+      > *:first-child {
+        @apply mt-0;
       }
     }
   }

package/src/components/Search.astro CHANGED Viewed

@@ -63,7 +63,7 @@ const entries = [...pages, ...categories, ...products, ...posts, ...docs]
           entries.map(({ collection, slug, data }) => (
             <Element
               as="a"
-              href={getHref(collection, slug)}
+              href={getHref(slug)}
               class="search-item hide"
             >
               <Heading

package/src/components/Section.astro CHANGED Viewed

@@ -20,7 +20,7 @@ const { as = 'section', ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .section {
-      @apply relative w-full bg-background py-16 first:py-8;
+      @apply relative w-full bg-background py-20 first:pt-20 lg:py-32;
     }
   }
 </style>

package/src/components/Sidebar.astro CHANGED Viewed

@@ -2,13 +2,11 @@
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import type { SidebarSchema } from 'fulldev-ui/schemas/components/sidebar'
-import Container from './Container.astro'
-import Heading from './Heading.astro'
-import Link from './Link.astro'
+import Menus from './Menus.astro'
 interface Props extends HTMLAttributes<'aside'>, SidebarSchema {}
-const { company, logo, menus, links, heading, themer, ...rest } = Astro.props
+const { menus, ...rest } = Astro.props
 ---
 <Element
@@ -16,59 +14,30 @@ const { company, logo, menus, links, heading, themer, ...rest } = Astro.props
   as="aside"
   {...rest}
 >
-  <Container>
-    {
-      menus?.map(({ heading, links }) => (
-        <Element class:list="sidebar-menu">
-          <Heading
-            text={heading}
-            size="sm"
-            as="h6"
-          />
-          <Element class:list="sidebar-links">
-            {links?.map((link) => (
-              <Link
-                size="sm"
-                variant="muted"
-                {...link}
-              />
-            ))}
-          </Element>
-        </Element>
-      ))
-    }
-  </Container>
+  <Menus
+    size="sm"
+    menu={rest}
+    {menus}
+  />
 </Element>
 <style is:global>
   @layer fulldev {
     .sidebar {
-      @apply sticky bottom-0 left-0 hidden w-64 max-w-[75vw] border-r bg-background py-8 lg:flex;
+      @apply sticky bottom-0 left-0 hidden h-full max-w-[75vw] flex-col items-start gap-8 overflow-y-auto border-r bg-background py-8 pr-8 lg:flex;
+      @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
       --headers: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
       top: var(--headers);
       width: var(--sidebar-width);
-      max-height: calc(100vh - var(--headers));
+      height: calc(100vh - var(--headers));
       &,
       & ~ * {
         @media (min-width: 1024px) {
-          --sidebar-width: 16rem;
+          --sidebar-width: 14rem;
         }
       }
-      .container {
-        @apply flex h-full w-full grow flex-col items-start gap-8 overflow-y-auto;
-        /* @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover; */
-      }
-      .sidebar-menu {
-        @apply flex flex-col gap-3;
-      }
-      .sidebar-links {
-        @apply flex flex-col gap-2;
-      }
     }
   }
 </style>

package/src/components/Stack.astro ADDED Viewed

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+const { ...rest } = Astro.props
+---
+<Element
+  class:list="stack"
+  {...rest}
+>
+  <slot />
+</Element>
+<style is:global>
+  @layer fulldev {
+    .stack {
+      @apply relative grid w-full auto-cols-fr items-start gap-x-16 gap-y-8 lg:grid-flow-col;
+    }
+  }
+</style>

package/src/components/Tagline.astro CHANGED Viewed

@@ -13,7 +13,7 @@ const { as = 'p', text, ...rest } = Astro.props
 ---
 <Element
-  class:list="text"
+  class:list="tagline"
   {as}
   {...rest}
 >