From 7601394ca1334836164c9058c4f1ab2503cbc678 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Fri, 7 Apr 2023 12:05:32 -0400
Subject: [PATCH] improve website typography

---
 apps/website/src/components/Placeholder.astro |  4 ++++
 apps/website/src/pages/_global.astro          | 17 +++++++++++++++++
 apps/website/src/pages/docs/_layout.astro     | 19 ++-----------------
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/apps/website/src/components/Placeholder.astro b/apps/website/src/components/Placeholder.astro
index 85af5ac74b1..a2e51caf011 100644
--- a/apps/website/src/components/Placeholder.astro
+++ b/apps/website/src/components/Placeholder.astro
@@ -28,6 +28,10 @@ const storyUrl = `https://itwin.github.io/iTwinUI/react/?path=/story/${component
     border: solid 1px var(--color-highlight-2);
     border-radius: var(--border-radius-1);
 
+    p {
+      color: var(--color-text);
+    }
+
     svg {
       color: var(--color-highlight-2);
       height: var(--space-8);
diff --git a/apps/website/src/pages/_global.astro b/apps/website/src/pages/_global.astro
index be615bbf85a..15ed6cbff0b 100644
--- a/apps/website/src/pages/_global.astro
+++ b/apps/website/src/pages/_global.astro
@@ -65,10 +65,27 @@ const { content = {} } = Astro.props;
         line-height: 1.2;
       }
 
+      :where(h1) {
+        font-size: var(--type-4);
+      }
+
+      :where(h2) {
+        font-size: var(--type-3);
+      }
+
+      :where(h3) {
+        font-size: var(--type-2);
+      }
+
       :where(code, pre) {
         font-family: var(--font-mono);
       }
 
+      :where(ul:not(.content-wrapper *)) {
+        list-style: none;
+        padding: 0;
+      }
+
       @media (pointer: fine) and (hover: hover) {
         // bump specificity to counteract iui scrollbars
         :not(#\#) {
diff --git a/apps/website/src/pages/docs/_layout.astro b/apps/website/src/pages/docs/_layout.astro
index 157b42e6313..a7989fdd751 100644
--- a/apps/website/src/pages/docs/_layout.astro
+++ b/apps/website/src/pages/docs/_layout.astro
@@ -206,26 +206,11 @@ const currentPage = new URL(Astro.request.url).pathname;
         }
 
         &:global(:not(:first-child)) {
-          margin-top: 1rem;
+          margin-block-start: 1.1em;
         }
       }
 
-      :global(
-          :where(
-              :not(
-                  a,
-                  h1,
-                  h2,
-                  h3,
-                  h4,
-                  .demo-iui-wrapper,
-                  .demo-iui-wrapper *,
-                  table,
-                  table *,
-                  [data-iui-theme] *
-                )
-            )
-        ) {
+      :global(:where(p, ul, ol):where(:not(.demo-iui-wrapper *))) {
         color: var(--color-subtext);
         font-size: var(--type-1);
       }