diff --git a/.storybook/preview.ts b/.storybook/preview.ts index cdebadd..b4fce33 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,4 +1,8 @@ import type { Preview } from '@storybook/svelte'; +// See src/routes/+layout.svelte +// Order is important! +import '../src/theme.postcss'; +//import '@skeletonlabs/skeleton/styles/skeleton.css'; import '../src/app.postcss'; const preview: Preview = { diff --git a/stories/Typography.mdx b/stories/Typography.mdx new file mode 100644 index 0000000..f2ed7b4 --- /dev/null +++ b/stories/Typography.mdx @@ -0,0 +1,55 @@ +import { Meta } from '@storybook/blocks'; + + + +export const SampleText = 'Lorem ipsum dolor sit amet, consectetur'; + +# Typography + +Given that this project uses Tailwind via Skeleton.dev, the usual Storybook +Typeset cannot be used. Instead this is how it will actually be styled: + +## Heading + +

H1: {SampleText}

+

H2: {SampleText}

+

H3: {SampleText}

+

H4: {SampleText}

+
H5: {SampleText}
+
H6: {SampleText}
+ +## Paragraph + +

{SampleText}

+ +## Anchor + +

+ + Anchor + +

+ +## Blockquote + +
Blockquote
+ +## Preformatted text + +
Preformatted text
+ +## Code + +Code + +## Keyboard + +Keyboard + +## Insertion + +Insertion + +## Deletion + +Deletion