From 3b6251c0cc67536b072eed031c90f651ff493411 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sat, 29 Jul 2023 20:12:33 +0100
Subject: [PATCH] typography sample

---
 .../BodyText/BodyText.stories.svelte          | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)

diff --git a/src/components/BodyText/BodyText.stories.svelte b/src/components/BodyText/BodyText.stories.svelte
index 2d7a027d..9cec1957 100644
--- a/src/components/BodyText/BodyText.stories.svelte
+++ b/src/components/BodyText/BodyText.stories.svelte
@@ -33,3 +33,120 @@
   Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`,
   }}"
 />
+
+<Story
+  name="Typography sample"
+  args="{{
+    class: 'body-text-typography-example-story',
+    text: `Reprehenderit hamburger pork bresaola, dolore chuck sirloin landjaeger ham hock [tempor meatball](https://baconipsum.com/) alcatra nostrud pork belly. Culpa pork belly doner ea jowl, elit deserunt leberkas cow shoulder ham hock dolore.
+
+## Biltong turducken ground round kevin
+
+Pig est irure buffalo ullamco. Sunt beef ribs tri-tip, chislic officia sint dolor. Spare ribs drumstick ground round, irure duis cillum id chicken est ipsum ut. 
+
+Qui cupidatat chislic buffalo consequat deserunt. 
+
+Andouille sint shankle quis velit nostrud chislic meatloaf culpa labore corned beef chuck spare ribs. Filet mignon eu shankle in, meatloaf ut dolor ham hock ut.
+
+### Venison shoulder ham hock ham leberkas flank beef ribs fatback, jerky meatball ham hock
+  
+Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig. Veniam laboris sunt chislic. Aute doner porchetta nulla, tongue venison ad ex in do.
+
+- Steak
+    - Capicola 
+- [Pork chop](https://www.google.com)
+- Fillet landjaeger commodo
+
+Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.
+
+Minim id buffalo dolore ad, **boudin chicken laboris** excepteur qui eiusmod. 
+
+#### Jerky prosciutto burgdoggen
+
+Sirloin beef flank labore cillum venison pariatur cow nulla ut irure in consequat proident velit. Jerky meatball pig nulla irure laboris fatback et rump ut dolore.
+
+Biltong enim consequat pork chop, flank ea.
+
+Flank bacon sint dolore porchetta strip steak. Tail capicola flank nostrud meatball consequat pastrami lorem cupidatat chuck drumstick ham hock bresaola sint.
+
+##### Venison pork chop
+
+Alcatra bacon mollit boudin. Capicola ut tongue biltong, cow cillum pariatur sausage.
+
+1. Minim ribeye
+2. Prosciutto laborum
+3. Salami doner irure
+
+Consectetur ribeye consequat pork capicola. T-bone ad laborum beef ribs picanha.
+
+###### Alcatra bacon mollit boudin
+
+Tempor tail doner chicken incididunt beef ribs. Ad ullamco in cupim venison. Leberkas rump ullamco adipisicing, laboris excepteur voluptate.
+
+Ham hock id porchetta elit. Sint spare ribs aute buffalo.
+`,
+  }}"
+/>
+
+<style lang="scss" global>
+  %heading-tag {
+    position: absolute;
+    top: 0;
+    left: -50px;
+    text-align: right;
+    display: block;
+    width: 40px;
+    color: #ddd;
+    padding: 2px 5px;
+    border-radius: 4px;
+    font-weight: 800;
+    &:hover {
+      color: #999;
+    }
+    @media (max-width: 800px) {
+      color: white;
+    }
+  }
+  .body-text-typography-example-story {
+    h2 {
+      position: relative;
+      &:before {
+        content: 'H2';
+        @extend %heading-tag;
+        font-size: 22px;
+      }
+    }
+    h3 {
+      position: relative;
+      &:before {
+        content: 'H3';
+        @extend %heading-tag;
+        font-size: 19px;
+      }
+    }
+    h4 {
+      position: relative;
+      &:before {
+        content: 'H4';
+        @extend %heading-tag;
+        font-size: 16px;
+      }
+    }
+    h5 {
+      position: relative;
+      &:before {
+        content: 'H5';
+        @extend %heading-tag;
+        font-size: 15px;
+      }
+    }
+    h6 {
+      position: relative;
+      &:before {
+        content: 'H6';
+        @extend %heading-tag;
+        font-size: 12px;
+      }
+    }
+  }
+</style>