docs: Improve paragraph readability (#4928)

website/package.json

@@ -57,7 +57,6 @@
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.19.0",
-    "nodegit": "^0.26.5",
     "postcss-nested": "^4.2.1",
     "postcss-nesting": "^7.0.1",
     "prettier": "^2.0.4",

website/src/components/Mdx.tsx

@@ -29,7 +29,7 @@ type Props = {
   body: string;
 };
 
-const text = 'font-thin leading-loose';
+const text = 'leading-loose';
 
 const components = {
   // Headings
@@ -66,7 +66,7 @@ const components = {
 
   // Text
   p: ({ children }: any) => {
-    return <p className={cx('my-4 font-light', text)}>{children}</p>;
+    return <p className={cx('my-4', text)}>{children}</p>;
   },
 
   // Code
@@ -76,9 +76,9 @@ const components = {
   },
 
   // Lists
-  ul: (props: any) => <ul {...props} className="list-disc list-inside pl-4 font-light" />,
-  ol: (props: any) => <ul {...props} className="list-decimal list-inside pl-4 font-light" />,
-  li: (props: any) => <li {...props} className={cx('mb-2 font-light', text)} />,
+  ul: (props: any) => <ul {...props} className="list-disc list-inside pl-4" />,
+  ol: (props: any) => <ul {...props} className="list-decimal list-inside pl-4" />,
+  li: (props: any) => <li {...props} className={cx('mb-2', text)} />,
 
   // Table
   table: (props: any) => (

website/src/styles.css

@@ -22,7 +22,7 @@ main a:hover {
 
 main p,
 main li {
-  @apply text-gray-600;
+  @apply text-gray-800;
 }
 
 li code,
@@ -71,7 +71,6 @@ h6 code {
   padding: 0 6px;
 }
 
-
 .parameter {
   @apply text-blue-500;
 }