Fix visual regression in docs (#1866)

Blame rev: 80aa4c6
immutable-js · Jul 23, 2021 · 4d50e12 · 4d50e12
1 parent 6b03706
commit 4d50e12
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 19 deletions.
diff --git a/website/src/MarkdownContent.tsx b/website/src/MarkdownContent.tsx
@@ -19,7 +19,7 @@ export const MarkdownContent = memo<Props>(({ contents, className }) => {
 
   return (
     <div
-      className={className}
+      className={'markdown ' + className}
       onClick={handleClick}
       dangerouslySetInnerHTML={{ __html: contents }}
     />

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -2,6 +2,7 @@ import fs from 'fs';
 import Head from 'next/head';
 
 import { Header } from '../Header';
+import { MarkdownContent } from '../MarkdownContent';
 import { ImmutableConsole } from '../ImmutableConsole';
 import { genMarkdownDoc } from '../static/genMarkdownDoc';
 import { getVersions } from '../static/getVersions';
@@ -30,7 +31,7 @@ export default function Home({ versions, readme }: Props) {
       <Header versions={versions} />
       <div className="pageBody" id="body">
         <div className="contents">
-          <div dangerouslySetInnerHTML={{ __html: readme }} />
+          <MarkdownContent contents={readme} />
         </div>
       </div>
     </div>

diff --git a/website/styles/globals.css b/website/styles/globals.css
@@ -39,29 +39,16 @@ h6 {
   color: var(--header-color);
 }
 
-h1 {
-  font-size: 2em;
-  margin: 0 0 1rem;
-}
-
 h2 {
-  font-size: 1.5em;
-  padding-top: 100px;
-  margin: calc(4rem - 100px) 0 1rem;
+  margin: 4rem 0 1rem;
 }
 
 h3 {
-  font-size: 1.25em;
-  padding-top: 100px;
-  margin: calc(2rem - 100px) 0 1rem;
+  margin: 2rem 0 1rem;
 }
 
-h4,
-h5,
-h6 {
-  font-size: 1em;
-  padding-top: 100px;
-  margin: calc(1rem - 100px) 0 0;
+h4 {
+  margin: 1rem 0 0;
 }
 
 a {
@@ -208,6 +195,31 @@ a.try-it {
   position: relative;
 }
 
+.markdown h1 {
+  font-size: 2em;
+  margin: 0 0 1rem;
+}
+
+.markdown h2 {
+  font-size: 1.5em;
+  padding-top: 100px;
+  margin: calc(4rem - 100px) 0 1rem;
+}
+
+.markdown h3 {
+  font-size: 1.25em;
+  padding-top: 100px;
+  margin: calc(2rem - 100px) 0 1rem;
+}
+
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  font-size: 1em;
+  padding-top: 100px;
+  margin: calc(1rem - 100px) 0 0;
+}
+
 .miniHeader {
   background: var(--header-bg-color);
   position: fixed;