fix line height and update typography component

docs/docusaurus.config.js

@@ -168,7 +168,7 @@ const config = {
         ],
       },
       prism: {
-        theme: lightCodeTheme,
+        theme: darkCodeTheme,
         darkTheme: darkCodeTheme,
         additionalLanguages: ["python"],
       },

docs/src/styles/base.scss

@@ -27,10 +27,10 @@
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   }
   body {
-    @apply text-sm;
+    @apply text-base;
     @apply antialiased;
     @apply bg-white dark:bg-black;
-    @apply text-gray-700 dark:text-gray-400;
+    @apply text-gray-800 dark:text-gray-300;
   }
   img {
     pointer-events: none;

docs/src/styles/tweaks.scss

@@ -92,9 +92,23 @@
   }
   ul,
   ol {
-    padding-left: 16px;
+    padding-left: 32px;
     li {
       @apply leading-loose;
     }
   }
 }
+
+.markdown h1:first-child,
+.markdown > p {
+  margin-bottom: 16px;
+}
+
+.theme-code-block {
+  font-size: 14px;
+  background-color: black;
+}
+
+.table-of-contents {
+  font-size: 14px;
+}

docs/src/styles/typography.scss

@@ -1,38 +1,38 @@
 h1,
 .h1 {
-  line-height: 48px;
   font-size: 40px;
+  line-height: 48px;
   @apply font-bold text-black dark:text-white;
 }
 h2,
 .h2 {
-  font-size: 32px;
+  font-size: 36px;
+  line-height: 42px;
   @apply font-bold text-black dark:text-white;
-  line-height: 40px;
 }
 h3,
 .h3 {
-  font-size: 28px;
-  @apply font-bold text-black dark:text-white;
+  font-size: 32px;
   line-height: 40px;
+  @apply font-bold text-black dark:text-white;
 }
 h4,
 .h4 {
-  font-size: 24px;
+  font-size: 28px;
+  line-height: 40px;
   @apply font-bold text-black dark:text-white;
-  line-height: 32px;
 }
 h5,
 .h5 {
-  font-size: 20px;
+  font-size: 24px;
+  line-height: 32px;
   @apply font-bold text-black dark:text-white;
-  line-height: 28px;
 }
 h6,
 .h6 {
-  font-size: 16px;
+  font-size: 20px;
+  line-height: 28px;
   @apply font-bold text-black dark:text-white;
-  line-height: 24px;
 }
 p {
   line-height: 24px;