docs: add Typography
I had to work around Storybook here thanks to Tailwind. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
parent
b4527b7fc0
commit
f5e64cdd7d
2 changed files with 59 additions and 0 deletions
|
@ -1,4 +1,8 @@
|
||||||
import type { Preview } from '@storybook/svelte';
|
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';
|
import '../src/app.postcss';
|
||||||
|
|
||||||
const preview: Preview = {
|
const preview: Preview = {
|
||||||
|
|
55
stories/Typography.mdx
Normal file
55
stories/Typography.mdx
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
import { Meta } from '@storybook/blocks';
|
||||||
|
|
||||||
|
<Meta title="Typography" />
|
||||||
|
|
||||||
|
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 class="h1">H1: {SampleText}</h1>
|
||||||
|
<h2 class="h2">H2: {SampleText}</h2>
|
||||||
|
<h3 class="h3">H3: {SampleText}</h3>
|
||||||
|
<h4 class="h4">H4: {SampleText}</h4>
|
||||||
|
<h5 class="h5">H5: {SampleText}</h5>
|
||||||
|
<h6 class="h6">H6: {SampleText}</h6>
|
||||||
|
|
||||||
|
## Paragraph
|
||||||
|
|
||||||
|
<p>{SampleText}</p>
|
||||||
|
|
||||||
|
## Anchor
|
||||||
|
|
||||||
|
<p style={{ minHeight: '1em', position: 'relative' }}>
|
||||||
|
<a class="anchor" href="/">
|
||||||
|
Anchor
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
## Blockquote
|
||||||
|
|
||||||
|
<blockquote class="blockquote">Blockquote</blockquote>
|
||||||
|
|
||||||
|
## Preformatted text
|
||||||
|
|
||||||
|
<pre class="pre">Preformatted text</pre>
|
||||||
|
|
||||||
|
## Code
|
||||||
|
|
||||||
|
<code class="code">Code</code>
|
||||||
|
|
||||||
|
## Keyboard
|
||||||
|
|
||||||
|
<kbd class="kbd">Keyboard</kbd>
|
||||||
|
|
||||||
|
## Insertion
|
||||||
|
|
||||||
|
<ins class="ins">Insertion</ins>
|
||||||
|
|
||||||
|
## Deletion
|
||||||
|
|
||||||
|
<del class="del">Deletion</del>
|
Loading…
Reference in a new issue