made markdown render less bad

2 files changed, 33 insertions, 17 deletions

diff --git a/frontend/src/components/renderers/RenderDispatch.js b/frontend/src/components/renderers/RenderDispatch.js
index 35fdc54..3f1c87b 100644
--- a/frontend/src/components/renderers/RenderDispatch.js
+++ b/frontend/src/components/renderers/RenderDispatch.js
@@ -5,7 +5,7 @@ import Markdown from './Markdown'
 import CodeRenderer from './Code'
 
 const RenderWrapper = styled.div`
-    padding: 2em;
+    padding: 1em;
 `
 
 const RenderDispatch = React.forwardRef((props, ref) => {
@@ -17,7 +17,7 @@ const RenderDispatch = React.forwardRef((props, ref) => {
                 </RenderWrapper>)
         case 'markdown':
             return (
-                <RenderWrapper>
+                <RenderWrapper ref={ref} className="md" >
                     <Markdown content={props.content} />
                 </RenderWrapper>)
         default:
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index da345d7..a6e8e9c 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -11,11 +11,6 @@ body {
   font-family: 'Lora', serif;
 }
 
-h1 {
-  font-size: 50px;
-  margin: 0 0;
-}
-
 form {
   width: 100%;
 }
@@ -132,17 +127,9 @@ button[type=button] {
   margin: 2em 2em;
 }
 
-ul {
-  list-style-type: none;
-  display: inline-block;
-}
-
-li {
-  display: inline-block;
-  margin: 0 1em;
-}
-
 .mainLogo {
+  font-size: 50px;
+  margin: 0 0;
   display: inline-block;
 }
 
@@ -165,4 +152,33 @@ li {
 
 .mainLogo:hover a::after {
   width: 100%;
+}
+
+/* fixing markdown renderer */
+.md h3 {
+  font-weight: bold;
+}
+
+.md hr {
+  border-top: 1px solid #000;
+  border-style: solid;
+}
+
+.md code {
+  background: #00000008;
+  font-size: 0.8em;
+  padding: 0.2em 0.5em;
+}
+
+.md pre {
+  padding: 0.7em;
+  background: #00000008;
+}
+
+.md pre > code {
+  background: none;
+}
+
+.md table {
+  width: 100%;
 }
\ No newline at end of file