markdown render fixes (#239)

src/components/atoms/Markdown.module.css

@@ -0,0 +1,71 @@
+.markdown {
+  /* handling long text, like URLs */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.markdown h1 {
+  font-size: var(--font-size-h3);
+}
+
+.markdown h2 {
+  font-size: var(--font-size-h4);
+}
+
+.markdown h3 {
+  font-size: var(--font-size-large);
+}
+
+.markdown h4,
+.markdown h5 {
+  font-size: var(--font-size-base);
+}
+
+.markdown ul,
+.markdown ol {
+  margin: 0;
+  margin-bottom: var(--spacer);
+  padding-left: 1.5rem;
+}
+
+.markdown ul {
+  list-style: none;
+}
+
+.markdown ul li {
+  position: relative;
+  display: block;
+}
+
+.markdown ul li:before {
+  content: '▪';
+  top: -2px;
+  position: absolute;
+  left: -1.5rem;
+  color: var(--brand-grey-light);
+  user-select: none;
+}
+
+.markdown li + li {
+  margin-top: calc(var(--spacer) / 8);
+}
+
+.markdown li ul,
+.markdown li ol,
+.markdown li p {
+  margin-bottom: 0;
+  margin-top: calc(var(--spacer) / 8);
+}
+
+.markdown hr {
+  display: block;
+  margin: calc(var(--spacer) * 1.5) auto;
+  max-width: 20%;
+  border: 0;
+  border-top: 2px solid var(--border-color);
+}
+
+.markdown img {
+  margin-bottom: calc(var(--spacer) / 2);
+}

src/components/atoms/Markdown.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react'
 import ReactMarkdown from 'react-markdown'
+import styles from './Markdown.module.css'
 
 const Markdown = ({
   text,
@@ -12,7 +13,12 @@ const Markdown = ({
   // https://github.com/rexxars/react-markdown/issues/105#issuecomment-351585313
   const textCleaned = text.replace(/\\n/g, '\n ')
 
-  return <ReactMarkdown source={textCleaned} className={className} />
+  return (
+    <ReactMarkdown
+      source={textCleaned}
+      className={`${styles.markdown} ${className}`}
+    />
+  )
 }
 
 export default Markdown

src/components/organisms/AssetContent/index.module.css

@@ -46,22 +46,3 @@
   margin-top: var(--spacer);
   margin-bottom: var(--spacer);
 }
-
-/* Markdown tweaks */
-
-.description h1 {
-  font-size: var(--font-size-h3);
-}
-
-.description h2 {
-  font-size: var(--font-size-h4);
-}
-
-.description h3 {
-  font-size: var(--font-size-large);
-}
-
-.description h4,
-.description h5 {
-  font-size: var(--font-size-base);
-}

src/components/pages/Publish/Preview.module.css

@@ -40,25 +40,6 @@
   margin-top: calc(var(--spacer) / 4);
 }
 
-/* Markdown tweaks */
-
-.description h1 {
-  font-size: var(--font-size-h3);
-}
-
-.description h2 {
-  font-size: var(--font-size-h4);
-}
-
-.description h3 {
-  font-size: var(--font-size-large);
-}
-
-.description h4,
-.description h5 {
-  font-size: var(--font-size-base);
-}
-
 .toggle {
   position: absolute;
   bottom: 0.15rem;