better style for rendered markdown

core/static/core/markdown.scss

@@ -0,0 +1,75 @@
+.markdown {
+  --bg-lightgrey: rgb(240, 241, 245);
+  --border-lightgrey: rgb(215, 216, 220);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    padding-top: 20px;
+  }
+
+  ul,
+  ol,
+  p {
+    line-height: 22px;
+  }
+
+  code {
+    overflow: auto;
+    max-width: 100%;
+    font-family: Consolas;
+    font-size: 14px;
+    border-radius: 4px;
+    border: 1px solid var(--border-lightgrey);
+    background-color: var(--bg-lightgrey);
+    padding: 1px 2px;
+  }
+
+  pre code {
+    // code that is not inlined
+    margin: 15px;
+    padding: 10px;
+    display: block;
+    border-radius: 5px;
+    font-size: 1em;
+
+    @media screen and (max-width: 500px) {
+      margin: 10px 0;
+    }
+  }
+
+  blockquote {
+    background-color: var(--bg-lightgrey);
+    border: unset;
+    border-left: 5px solid #ccc;
+    border-radius: 4px;
+    margin: 15px;
+    padding: 10px 15px;
+    display: block;
+    width: fit-content;
+
+    p:first-of-type {
+      margin-top: 0;
+    }
+
+    @media screen and (max-width: 500px) {
+      margin: 10px 0;
+      padding: 8px 10px;
+    }
+  }
+
+  table {
+    width: auto;
+    min-width: 30%;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+  .footnotes {
+    font-size: 85%;
+  }
+}

core/static/core/style.scss

@@ -947,22 +947,6 @@ dt {
   margin-top: 25px;
 }
 
-code {
-  font-family: monospace;
-  overflow: auto;
-  max-width: 100%;
-}
-
-blockquote {
-  margin: 5px;
-  padding: 2px;
-  border: solid 1px $black-color;
-}
-
-blockquote h5:first-child {
-  font-size: 100%;
-}
-
 .edit-bar {
   display: block;
   margin: 4px;
@@ -979,14 +963,15 @@ blockquote h5:first-child {
 }
 
 table {
-  width: 100%;
+  width: 90%;
   margin: 15px auto;
   border-collapse: collapse;
   border-spacing: 0;
   border-radius: 5px;
   -moz-border-radius: 5px;
   overflow: hidden;
-  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
+  box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
+    rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
 }
 
 @media screen and (max-width: 500px) {
@@ -999,7 +984,8 @@ th {
   padding: 4px;
 }
 
-td, th {
+td,
+th {
   vertical-align: middle;
   text-align: center;
   padding: 5px 10px;
@@ -1009,7 +995,6 @@ td, th {
 }
 
 td {
-  padding: 4px;
   margin: 5px;
   border-collapse: collapse;
   vertical-align: top;
@@ -1020,7 +1005,8 @@ td {
   }
 }
 
-th, thead td {
+th,
+thead td {
   text-align: center;
   border-top: none;
 }
@@ -1421,7 +1407,7 @@ footer {
 
   > .version {
     margin-top: 3px;
-    color: rgba(0, 0, 0, .3)
+    color: rgba(0, 0, 0, 0.3);
   }
 }
 
@@ -1485,31 +1471,6 @@ label {
   }
 }
 
-/*-------------------------------MARKDOWN------------------------------*/
-
-.markdown {
-  margin: 0;
-  padding: 0;
-  code {
-    font-family: monospace;
-    color: $white-color;
-    background: $black-color;
-    display: inline-block;
-    padding: 4px;
-    line-height: 120%;
-    vertical-align: middle;
-  }
-  a {
-    color: $primary-dark-color;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-  .footnotes {
-    font-size: 85%;
-  }
-}
-
 /*--------------------------------JQuery-------------------------------*/
 
 .ui-state-active,

core/templates/core/base.jinja

@@ -9,6 +9,7 @@
             <link rel="stylesheet" href="{{ static('core/jquery.datetimepicker.min.css') }}">
             <link rel="stylesheet" href="{{ static('ajax_select/css/ajax_select.css') }}">
             <link rel="stylesheet" href="{{ scss('core/style.scss') }}">
+            <link rel="stylesheet" href="{{ scss('core/markdown.scss') }}">
             <link rel="stylesheet" href="{{ scss('core/header.scss') }}">
             <link rel="stylesheet" href="{{ scss('core/navbar.scss') }}">