From f5e64cdd7df8b93664a32befa634251c6d12a7e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Thu, 15 Feb 2024 18:05:25 +0100
Subject: [PATCH] docs: add Typography
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I had to work around Storybook here thanks to Tailwind.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 .storybook/preview.ts  |  4 +++
 stories/Typography.mdx | 55 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 stories/Typography.mdx

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';
+
+<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>